babel-upgrade icon indicating copy to clipboard operation
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]

Open tiesto429 opened this issue 6 years ago • 2 comments

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' } ] } };

tiesto429 avatar Oct 04 '18 21:10 tiesto429

I was facing same issue. I found that one of my custom plugin has error. After fixing that things worked fine

ghost avatar Jan 03 '19 14:01 ghost

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

iyasmavoor avatar Jun 04 '20 15:06 iyasmavoor