babel-upgrade
babel-upgrade copied to clipboard
ERROR in multi babel-polyfill ./src/client/index Module not found: Error: Can't resolve 'babel' in 'C:\Users\messi\New folder' @ multi babel-polyfill ./src/client/index main[1]
I am getting this error on build:
**Generating minified bundle for production via Webpack. This will take a moment... (node:117912) DeprecationWarning: Tapable.plugin is deprecated. Use new API on
.hooks` instead
(node:117912) DeprecationWarning: Chunk.mapModules: Use Array.from(chunk.modulesIterable, fn) instead
Webpack stats: Hash: 2563da8cbef0bd4e0876
Version: webpack 4.20.2
Time: 5557ms
Built at: 2018-10-04 14:32:18
Asset Size Chunks Chunk Names
main.1104bafcd2688cdd4861.js 88.1 KiB 0 main
Entrypoint main = main.1104bafcd2688cdd4861.js
[90] (webpack)/buildin/global.js 509 bytes {0} [built]
[109] ./node_modules/core-js/modules/es6.regexp.flags.js 201 bytes {0} [built]
[112] ./node_modules/core-js/modules/es6.map.js 642 bytes {0} [built]
[114] ./node_modules/core-js/modules/es6.set.js 481 bytes {0} [built]
[115] ./node_modules/core-js/modules/es6.weak-map.js 1.92 KiB {0} [built]
[125] multi babel-polyfill ./src/client/index 40 bytes {0} [built]
[126] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
[127] ./node_modules/core-js/shim.js 7.99 KiB {0} [built]
[164] ./node_modules/core-js/modules/es6.number.parse-int.js 221 bytes {0} [built]
[216] ./node_modules/core-js/modules/es6.array.sort.js 643 bytes {0} [built]
[320] ./node_modules/core-js/modules/es7.observable.js 5.39 KiB {0} [built]
[321] ./node_modules/core-js/modules/web.timers.js 754 bytes {0} [built]
[322] ./node_modules/core-js/modules/web.immediate.js 162 bytes {0} [built]
[324] ./node_modules/regenerator-runtime/runtime.js 23.9 KiB {0} [built]
[325] ./node_modules/core-js/fn/regexp/escape.js 108 bytes {0} [built]
+ 313 hidden modules
WARNING in main.1104bafcd2688cdd4861.js contains invalid source map
ERROR in multi babel-polyfill ./src/client/index Module not found: Error: Can't resolve 'babel' in 'C:\Users\rdodle\New folder' @ multi babel-polyfill ./src/client/index main[1] Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 534 KiB 0 Entrypoint undefined = index.html [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.ejs 2.1 KiB {0} [built] [1] ./node_modules/lodash/lodash.js 527 KiB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 519 bytes {0} [built] Your app is compiled in production mode in /dist. It's ready to roll!`**
My Webpack.config.prod.js
// For info about this file refer to webpack and webpack-hot-middleware documentation // For info on how we're generating bundles with hashed filenames for cache busting: https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.w99i89nsz import webpack from 'webpack'; import path from 'path'; // import ExtractTextPlugin from 'extract-text-webpack-plugin'; import WebpackMd5Hash from 'webpack-md5-hash'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import jsonImporter from 'node-sass-json-importer'; if (!global._babelPolyfill) { require('babel-polyfill'); } const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin");
const GLOBALS = { 'process.env.NODE_ENV': JSON.stringify('production'), DEV: false };
export default {
mode:"production",
// debug: true,
devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
// noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'babel-polyfill',
'./src/client/index'
],
output:{
path: path.resolve(__dirname, "dist"), // string
// the target directory for all output files
// must be an absolute path (use the Node.js path module)
filename: '[name].[chunkhash].js', // string // the filename template for entry chunks
publicPath: "/" // string // the url to the output directory resolved relative to the HTML page
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
// output: {
// path: ${__dirname}/dist
,
// publicPath: '/',
// filename: '[name].[chunkhash].js'
// },
resolve: {
alias: {
'webworkify': 'webworkify-webpack'
}
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
// Hash the files using MD5 so that their names change when the content changes.
new WebpackMd5Hash(),
// Optimize the order that inspiration are bundled. This assures the hash is deterministic.
new webpack.optimize.OccurrenceOrderPlugin(),
// Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
// --optimize-dedupe resp. new webpack.optimize.DedupePlugin(GLOBALS),
// Generate an external css file with a hash in the filename
new ExtractTextPlugin('[name].[contenthash].css'),
// Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
new HtmlWebpackPlugin({
template: 'src/client/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
inject: true
// Note that you can add custom options here if you need to handle other custom logic in index.html
}),
// Eliminate duplicate packages when generating bundle
// new webpack.optimize.DedupePlugin(),
// Minify JS
new UglifyJsPlugin()
], module: { // configuration regarding modules rules: [ { test: /.scss$/, use: [ // apply multiple loaders and options "sassLoader", { loader: "sassLoader", options: { importer: jsonImporter } } ] }, { test: /.js$/, include: path.join(__dirname, 'src'), use: "babel" }, { test: /webworkify.+.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), use: 'worker' }, { test: /.eot(?v=\d+.\d+.\d+)?$/, use: 'file' }, { test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, use: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /.[ot]tf(?v=\d+.\d+.\d+)?$/, use: 'url?limit=10000&mimetype=application/octet-stream&name=[name].[ext]' }, { test: /.svg(?v=\d+.\d+.\d+)?$/, use: 'file-loader?limit=10000&mimetype=image/svg+xml'}, { test: /.(jpe?g|png|gif)$/i, use: ['file']}, { test: /.ico$/, use: 'file-loader?name=[name].[ext]'}, { test: /(.css|.scss)$/, use: ExtractTextPlugin.extract('css?sourceMap!postcss!resolve-url-loader!sass?sourceMap') }, { test: /.json$/, use: 'json' }, { enforce:'post', include: /node_modules/mapbox-gl/, loader: 'transform', query: 'brfs' } ] } };
I was facing same issue. I found that one of my custom plugin has error. After fixing that things worked fine
i also face same problem
`const path=require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={ entry:['babel-polifill','./src/js/index.js'], output:{ path:path.resolve(__dirname,'dist'), filename:'js/bundle.js' }, plugins:[ new HtmlWebpackPlugin({ filename:'index.html', template : './src/index.html' }) ], module:{ rules:[ { test:/.js$/, exclude:/node_modules/, use:{ loader:'babel-loader' } } ] }
};`
but the error comes as
ERROR in multi babel-polifill ./src/js/index.js
Module not found: Error: Can't resolve 'babel-polifill' in 'C:\Users\Acer\Desktop\9-forkify\starter'
@ multi babel-polifill ./src/js/index.js main[0]
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 18.3 KiB {HtmlWebpackPlugin_0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: webpack --mode development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Acer\AppData\Roaming\npm-cache_logs\2020-06-04T14_58_41_820Z-debug.log