Related
I have a simple react project which uses webpack as bundler and i am trying to work with #keplr-wallet/cosmos. As I install the package, it gives me a error related to webpack file loader which says:
You may need an appropriate loader to handle this file type, currently
no loaders are configured to process this file.
I have my webpack configuration as below,
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = env => {
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/web', 'index.html'),
filename: 'index.html',
});
const miniCssExtractPlugin = new MiniCssExtractPlugin({
filename: 'css/style.[contenthash:8].css',
chunkFilename: 'css/[id].style.[contenthash:8].css',
});
return {
entry: './src/web/index.tsx',
output: {
path: path.join(__dirname, 'build'), filename: '[name].[contenthash].js', publicPath: '/',
},
mode: process.env.NODE_ENV || 'development',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
modules: ['src', 'node_modules'],
alias: {
Store: path.resolve(__dirname, 'src/store/reducers'),
},
fallback: {
fs: false,
os: false,
path: false,
},
},
stats: {
errorDetails: true,
children: true,
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(css|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name (file) {
/*if (env === 'development') {
return '[path][name].[ext]'
}*/
return '[name]_[hash].[ext]'
},
publicPath: '/public/assets/img/',
outputPath: '../images/'
}
}
]
},
],
},
performance: {
hints: false,
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
miniCssExtractPlugin,
htmlPlugin,
new NodePolyfillPlugin(),
// new BundleAnalyzerPlugin(),
new CompressionPlugin({
algorithm: 'gzip',
}),
new Dotenv()
],
optimization: {
minimizer: [new UglifyJsPlugin()],
usedExports: true,
},
}
};
And my babel.config.js looks like:
module.exports = {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'entry',
modules: false,
},
],
["#babel/preset-typescript"],
[
'#babel/preset-react',
{
targets: {
node: 'current',
},
},
],
['#babel/preset-flow'],
],
};
Adding a screenshot of the error. I can understand that the issue is coming for the files which contains static keyword. I read about this in babel and as far as I have understood, it's available in #babel/preset-env. Here's a link to #babel/plugin-proposal-class-static-block which gives definition to static keywords. I don't understand what is causing this issue.
The versions of packages.
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#babel/node": "^7.17.10",
"#babel/preset-typescript": "^7.17.12",
"#babel/preset-flow": "^7.18.6",
This has been asked multiple times, and the issues always comes down to either a presence of exclude in babel config, or babel config being in .babelrc instead of babel.config.json. In my case it's something else. Here's my babel.config.json:
{
"presets": [
[
"#babel/preset-react",
{
"runtime": "automatic"
}
],
"#babel/env"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
[
"module-resolver",
{
"alias": {
"#common": "./src/common",
"#files": "./src/files",
"#settings": "./src/settings",
}
}
]
]
}
Here's my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ENV = process.env;
const scriptDir = path.join(__dirname, 'scripts');
const config = {
devtool: ENV.WEBPACK_DEVTOOL || 'eval-source-map',
mode: 'development',
entry: {
app: ['./src/app.js'],
},
output: {
path: scriptDir,
publicPath: '/',
},
target: ['web', 'es5'],
module: {
rules: [
{
test: path.resolve(__dirname, 'node_modules/ajv'),
use: 'null-loader',
},
{
test: /\.(js|cjs|jsx)$/,
use: ['babel-loader'],
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/nanoid')],
},
{
test: /\.json$/,
use: ['json-loader'],
type: 'javascript/auto',
},
{
test: /\.css/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.min\.js$/,
exclude: [/react/, /node_modules/],
use: ['script-loader'],
},
{
test: /node_modules\/vfile\/core\.js/,
use: [
{
loader: 'imports-loader',
options: {
type: 'commonjs',
imports: ['single process/browser process'],
},
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV.NODE_ENV),
}),
],
resolve: {
symlinks: false,
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
'#common': path.resolve(__dirname, './src/common'),
'#files': path.resolve(__dirname, './src/files'),
'#settings': path.resolve(__dirname, './src/settings'),
},
fallback: {fs: false, path: require.resolve('path-browserify')},
},
};
if (ENV.NODE_ENV === 'production') {
config.devtool = 'hidden-source-map';
config.mode = 'production';
}
if (ENV.WEBPACK_PLUGIN) {
const Plugin = require(ENV.WEBPACK_PLUGIN);
config.plugins.push(new Plugin());
}
module.exports = config;
When I run the output bundle in IE11, I'm seeing an arrow function, and it comes specifically from package nanoid. As you see above, I tried to explicitly include it. Tried without the include as well.
I'm on Babel 7.12 and Webpack 5.4.
So what is still missing in the config? Why is babel still refusing to parse (some of the) node_modules?
The solution was either to remove the include as suggested by #loganfsmyth in the comments above, or to set include to something more general:
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]
I am trying to build the react app with minification using uglifyjs-webpack-plugin But it's failing in production mode due to UglifyJS.
I am getting the following error.
ERROR in bundle.js from UglifyJs
Unexpected token: keyword «const» [./src/utils/Constants.js:1,0][bundle.js:228154,0]
Below is my webpack config may be I am missing some babel plugin. Any help would be appreciated.
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const bourbon = require('node-bourbon').includePaths;
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const PROXY = `http://${HOST}:${PORT}`;
const config = {
entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.js"],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
module: {
rules: [{
test: /.(jsx|js)?$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
],
loader: 'babel-loader',
options: {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-optional-chaining",
]
}
},
{
test: /.(css|scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer(),
]
}
}, 'sass-loader?includePaths[]=' + bourbon,
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&name=img/[hash].[ext]'
},
{
test: /\.(ttf|ttc|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
}
]
},
resolve: {
extensions: ['.json', '.js', '.jsx', '.css'],
},
devtool: 'source-map',
devServer: {
historyApiFallback: true,
host: HOST,
port: PORT,
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/style.css',
chunkFilename: "[id].css"
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
]
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: HOST,
port: PORT,
proxy: PROXY
}),
new CopyWebpackPlugin([{
from: './*.html',
to: './',
context: 'public/'
},
{
from: './*.ico',
to: './',
context: 'public/'
},
{
from: './img/**/*',
to: './',
context: 'public/'
},
{
from: './fonts/**/*',
to: './',
context: 'public/'
},
{
from: './js/**/*',
to: './',
context: 'public/'
}
], {
copyUnmodified: true
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
performance: {
hints: false
} // Bundle warnings
};
module.exports = config;
I'm using Webpack 4 and getting error when I'm building my app.
I have also attached both snapshot of the error that I'm facing and Webpack configuration code.
Please help me to resolve this issue.
I'm using:
OS: Ubuntu 18.04,
Webpack: 4
NodeJs: NodeJS LTS 10,
NPM: 5.6.0
Snapshot of error here
My Webpack.config.prod.js Config:
var webpack = require('webpack');
var path = require('path');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// var OfflinePlugin = require('offline-plugin')
// const CompressionPlugin = require("compression-webpack-plugin")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
'/js/app': './frontend/app.js'
},
output: {
filename: 'app.js',
chunkFilename: '[name].js',
publicPath: "/public/js/",
path: path.resolve(__dirname, 'public', 'js')
},
module: {
rules: [
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
},
{
test: /\.(scss|css|sass)$/i,
use: [
// {
// loader: MiniCssExtractPlugin.loader,
// options: {
// // you can specify a publicPath here
// // by default it use publicPath in webpackOptions.output
// publicPath: '../'
// }
// },
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./node_modules/")
]
}
}
]
},
{
test: /\.js$/,
loader: "babel-loader",
include: [
path.resolve(__dirname, "frontend"),
],
exclude: [
path.resolve(__dirname, "node_modules")
],
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
loader: 'url-loader?limit=4096&name=[name]-[hash].[ext]'
},
{
test: /\.json$/,
loader: 'json-loader',
type: "javascript/auto"
}
]},
node: {
fs: "empty",
net: "empty"
},
optimization: {
minimizer: [new UglifyJsPlugin()]
},
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
plugins: [
new BundleAnalyzerPlugin({
analyzerHost: "0.0.0.0"
}),
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
parallel: true,
extractComments: 'all'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
]
}
Try running npm i sigmund then running the build script again.
Reinstall your npm, your node+npm installation might be broken:
curl https://www.npmjs.org/install.sh | sh might help
Addressed on Github: https://github.com/npm/npm/issues/6795
I use webpack to bundle modules react written in ES6. All have been worked until I added json-immutable plugin. There required is json-stream-stringify and there is a class:
class JSONStreamify extends CoStream {...}
module.exports = function(obj, replacer) {
return new JSONStreamify(obj, replacer);
};
webpack works good but not monify files because Uglify throw error
Unexpected token: name (JSONStreamify)
I found here information about module https://github.com/webpack-contrib/uglifyjs-webpack-plugin . I installed and added ecma support but still I have the same errors. I've trie remove I've tried add exclude node_modules but without results.
My webpack.config.js is
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
backend: './src/backend.js',
frontend: './src/frontend.js',
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: '[name].sakui.min.js'
},
externals: {
'jQuery':'jQuery',
'Foundation':'Foundation',
'react': 'React',
'react-dom': 'ReactDOM',
'redux': 'Redux',
'react-redux': 'ReactRedux',
'immutable': 'Immutable',
'lodash': '_',
'_': '_'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
"only": "src/**",
"presets": [
"env",
"react",
"es2017",
"stage-3"
],
"plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy","minify-simplify"],
"babelrc": false
}
}
}
]
},
plugins: [
new UglifyJSPlugin({
ecma: 6
})
]
}
Any hints how I can solve this problem? Maybe any external tool to minify files after webpack?
Solution:
one way what I found is transpile all with node_modules by babel to ES5 and it works.
my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
backend: './src/backend.js',
frontend: './src/frontend.js',
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: '[name].sakui.min.js'
},
externals: {
'jQuery':'jQuery',
'Foundation':'Foundation',
'react': 'React',
'react-dom': 'ReactDOM',
'redux': 'Redux',
'react-redux': 'ReactRedux',
'immutable': 'Immutable',
'lodash': '_',
'_': '_'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
"presets": [
"env",
"react",
"es2017",
"stage-3"
],
"plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy"],
"babelrc": false
}
}
}
]
},
plugins: [
new UglifyJSPlugin()
]
}
Maybe will useful for someone.