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.
Related
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 integrate Stripe checkout into a VueJS application, but get the following error when the app compiles;
ERROR in ./node_modules/stripe/lib/utils.js
Module parse failed: Unexpected token (152:24)
You may need an appropriate loader to handle this file type.
| opts.auth = args.pop();
| } else if (utils.isOptionsHash(arg)) {
| const params = {...args.pop()};
|
| const extraKeys = Object.keys(params).filter(
# ./node_modules/stripe/lib/stripe.js 44:14-32
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app/CMS/eCommerce/Checkout.vue
# ./src/app/CMS/eCommerce/Checkout.vue
# ./src/routes.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js
I happens when i add the following variable to mt Checkout.vue file;
import Stripe from 'stripe';
const stripe = Stripe('MYAPI');
Here is we webpack file
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'style-loader',
'css-loader'
],
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: 'assets/images/'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Any advice would be great. Thank you
It seems to me like something went wrong in the file ./src/app/CMS/eCommerce/Checkout.vue.
First: Do both variables arg and args really exist?
Second: In order for the syntax params = {...args.pop()} to work argsmuss be an array of objects
Third: Do you have a babel config file? Because I think you need the babel preset "#babel/preset-env" or some babel plugins like "#babel/plugin-proposal-object-rest-spread" and "#babel/plugin-transform-spread" for babel to transpile the code for the browser...
A minimal babel.config.js can look like this:
module.exports = api => {
api.cache(true);
const presets = [];
const plugins = [];
/*
// If you want to transpile just some syntaxes manually - micromanagement
plugins.push(
[ "#babel/plugin-transform-block-scoping" ],
[ "#babel/plugin-proposal-object-rest-spread" ],
[ "#babel/plugin-transform-classes" ],
[ "#babel/plugin-transform-spread" ],
[ "#babel/plugin-transform-destructuring" ],
[ "#babel/plugin-transform-for-of" ],
[ "#babel/plugin-transform-template-literals" ],
[ "#babel/plugin-transform-arrow-functions", { spec: false } ],
);
*/
// Or let babel transpile everthing
presets.push(
[ "#babel/preset-env" ]
)
return {
presets,
plugins
}
}
I saw that here was the same question but without solution for me.
I get react development from CDN and when I run browser I see error.
in my webpack is:
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
backend: ['babel-polyfill','./src/backend.js'],
},
output: {
path: path.resolve(__dirname),
filename: '[name].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 webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development')
})
]
}
I use webpack 2.6.1, node 8.2.1 on mac OS
Thanks in advance for any hint.
I have small utility project where I am using react bootstrap table. I am bundling this project using webpack to use into some different project. my webpack config file is look like this. When I am running gulp into the main project where I have imported the utility package; I am getting following error.
Error: Cannot find module 'jquery' from 'C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\src\javascript\components\dnsIpam'
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
at process (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)
webpack config file
const path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var build = 'dns-ipam';
// shared config settings
var config = {
module: {
loaders: [
{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.(less|css)$/, loader: ExtractTextPlugin.extract('style-loader',
'css-loader!less-loader') },
{ test: /\.(png|jpg|gif|jpeg|svg)$/,
loader: 'file?name=images/[name].[ext]' },
{ test: /\.(ttf|woff|eot|otf)$/,
loader: 'file?name=fonts/[name].[ext]' },
{ test: /\.json$/,
loader: 'json' },
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: `${build}-react-components.js`,
library: `${build}-react-components`,
libraryTarget: 'umd',
},
plugins: [
new ExtractTextPlugin(`${build}-react-components.css`),
new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery',}),
],
externals: [{
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
}, {
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
}],
};
// custom config settings
config.entry = './src/components/dns-ipam-index.js';
// if (build == 'dns-ipam') {
// config.plugins.push(new webpack.optimize.UglifyJsPlugin({
// compress: { warnings: false },
// }));
// }
module.exports = config;
React-bootstrap has an internal dependency with jQuery.
I can see that you are explicitly excluding node modules, therefore your code won't be able to use those dependencies.
exclude: /node_modules/
I will suggest you to split your code and create a vendor config, and there explicitly include jquery and react-bootstrap-table
var webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["jquery", "react-bootstrap-table", ...],
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
Place your downloaded JQuery file in the your project's root folder and use it in your HTML file like this -
<script type="text/javascript" src="jquery-1.9.1.min.js">
I'm using webpack and babel to convert my js and vue2 files to es5 and compile into a single build.js
This is my .babelrc
{
"presets": ["latest", 'stage-1'],
"plugins": [
"transform-runtime",
"transform-es2015-arrow-functions"
],
"comments": false
}
and webpack.config.js
var path = require('path'),
webpack = require('webpack');
require("babel-polyfill");
module.exports = {
entry: ['babel-polyfill', './src'],
output: {
path: './dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader',
styl: 'style-loader!css-loader!stylus-loader'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'stylus-loader',
},
],
}
]
},
resolve: {
modules: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
plugins: [
// new webpack.DefinePlugin({
// 'process.env': {
// 'NODE_ENV': JSON.stringify('production')
// }
// })
]
}
Running the following command, successfuly compiles all js and vue files including the imported ones into build.js
./node_modules/webpack/bin/webpack.js --progress --watch --display-error-details
All es6 compatible codes are converted to es5 except for BaseModal.js in https://github.com/vue-bulma/modal/
BaseModal.js resides in node_modules/vue-bulma-modal/src/ and is imported by Modal.vue in the same package
I import Modal over index.js of the same package by
import {Modal} from 'vue-bulma-modal'
and BaseModal.js ends up in build.js as it is, without being converted to es5.
But if i copy Modal.vue and BaseModal.js directly into my code and update the import paths accordingly , it is converted to es5 just fine without any problems.
What is it that I'm doing wrong in my webpack.config.js?