Webpack Upgrade - Module not found: Can't resolve node_modules
I think the problem is that when you set the following option in your webpack.client.base.config.js
:
resolve: {
modules: [
path.resolve('./app/bundles'),
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
You override the default resolve modules option which is
resolve: { modules: ['node_modules'] }
.
If you want webpack to find modules in your bundles folder aswell as your node modules folder, you should try something like the following:
resolve: {
modules: [
path.resolve('./app/bundles'),
'node_modules'
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
EDIT: Also, you shouldn't look at webpack 1 docs if you're trying to upgrade to webpack 2. See the latest documentation instead.
Xenyal
#hmu with dank memes Programming Lang: Ruby, Javascript/TS, C# (.Net), Python Databases: Postgres, MySQL, Firestore, Redis Web: ESNext, React, SCSS/CSS-in-JS Infra: Docker Compose, k8s, GKE, PaaS (EB/GAE) Hobbies: Volleyball, MMA, Singing
Updated on July 01, 2022Comments
-
Xenyal almost 2 years
I'm currently working on a upgrade from Webpack 1 to 2, and then to 3. Within this upgrade, I've adhered to the migration instructions as per the instructions for 1 => 2 and for 2 => 3.
The issue I'm having is that none of the installed packages within my
node_modules
seem to be getting resolved within my code insideclient/app/bundles
. The error I'm getting for all the node_modules are in the following structure:ERROR in ./node_modules/alt/lib/store/StoreMixin.js || Module not found: Error: Can't resolve 'transmitter' in 'client/node_modules/alt/lib/store'
My theory is that somewhere I have a mismatch on the
file-loader
,expose-loader
, orimports-loader
versions since it makes sense that without the proper versions, the modules wouldn't get imported. I've ensured that all themodule.rules
have loaders that end in the-loader
pattern.yarn install
also succeeds without errors.My dependencies and Webpack configurations are as follows:
Package.json
"dependencies": { "ajv": "^5.1.5", "alt": "^0.17.8", "alt-container": "^1.0.2", "autoprefixer": "^6.4.0", "axios": "^0.7.0", "babel-cli": "^6.10.1", "babel-core": "^6.3.26", "babel-loader": "^7.1.2", "babel-plugin-syntax-decorators": "^6.3.13", "babel-polyfill": "^6.3.14", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", "babel-types": "^6.4.5", "body-parser": "^1.14.1", "chai": "^3.4.1", "chai-enzyme": "^0.6.1", "css-loader": "^0.23.1", "enzyme": "^2.5.0", "es5-shim": "^4.1.14", "es6-promise": "^3.0.2", "expose-loader": "^0.7.1", "fbjs": "^0.8.16", "file-loader": "^1.1.5", "fixed-data-table-2": "^0.7.11", "immutable": "^3.7.5", "imports-loader": "^0.6.5", "jade": "^1.11.0", "jquery": "^2.1.4", "jquery-ujs": "^1.1.0-1", "jsdom": "^7.0.2", "loader-utils": "^0.2.11", "lodash": "^4.11.1", "lodash-uuid": "^0.0.3", "mocha-jsdom": "^1.0.0", "moment": "^2.11.1", "postcss-loader": "^0.10.1", "react": "^15.6.1", "react-addons-test-utils": "15.4.0", "react-bootstrap": "^0.30.3", "react-dnd": "^2.5.4", "react-dnd-html5-backend": "^2.0.0", "react-dnd-test-backend": "^1.0.0", "react-dom": "^15.6.1", "react-fa": "^4.1.2", "react-height": "^3.0.0", "react-json-tree": "^0.10.9", "react-on-rails": "10.0.0", "react-onclickoutside": "^5.7.0", "react-overlays": "^0.6.2", "react-select": "^1.0.0-rc.3", "react-table": "^6.0.5", "react-textarea-autosize": "^4.0.5", "sass-loader": "^6.0.6", "sinon": "^1.17.2", "sinon-chai": "^2.8.0", "sleep": "^3.0.0", "source-map": "^0.6.1", "uglify-js": "^2.8.29", "url-loader": "^0.5.6", "webpack": "^3.1.0", "webpack-dev-server": "^2.9.2" }, "devDependencies": { "babel-eslint": "^6.1.0", "babel-istanbul": "^0.11.0", "babel-plugin-react-transform": "^2.0.0", "bootstrap-loader": "^2.0.0", "bootstrap-sass": "^3.3.6", "eslint": "^3.3.0", "eslint-config-airbnb": "^10.0.1", "eslint-config-shakacode": "^0.0.1", "eslint-plugin-import": "^1.13.0", "eslint-plugin-jsx-a11y": "^2.1.0", "eslint-plugin-react": "^6.0.0", "esprima-fb": "^15001.1001.0-dev-harmony-fb", "express": "^4.13.3", "extract-text-webpack-plugin": "3.0.1", "image-webpack-loader": "^3.1.0", "mocha": "^2.3.3", "mocha-jenkins-reporter": "^0.1.9", "mocha-jsdom": "^1.0.0", "node-sass": "4.0.0", "react-loadable": "^5.3.0", "react-transform-hmr": "^1.0.1", "resolve-url-loader": "^1.4.3", "style-loader": "^0.19.0", "stylelint": "^7.1.0", "stylelint-config-standard": "^12.0.0" }
File Structure
webpack.client.rails.config.js app /assets /javascripts /generated -- app-bundle.js -- vendor-bundle.js client /app /bundles /[APP ENTRY]... /node_modules webpack.client.rails.config.js webpack.client.base.config.js
webpack.client.rails.config.js
const webpack = require('webpack'); const path = require('path'); const config = require('./webpack.client.base.config'); const devBuild = process.env.NODE_ENV !== 'production'; const autoprefixer = require('autoprefixer'); config.output = { filename: '[name]-bundle.js', path: path.resolve('../app/assets/javascripts/generated'), publicPath: path.resolve('/assets/generated/'), }; config.entry.vendor.unshift( 'es5-shim/es5-shim', 'es5-shim/es5-sham' ); config.entry.vendor.push('jquery-ujs'); config.module.rules.push( { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, }, { test: require.resolve('react'), loader: 'imports-loader?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham', }, { test: require.resolve('jquery-ujs'), loader: 'imports-loader?jQuery=jquery', }, { test: /\.css$/, loader: 'style-loader!css-loader', }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: function() { return [autoprefixer] } } }, 'sass-loader', ], exclude: /assets\/stylesheets\/common\/packages\/DocumentEditor/, }, { test: /\.scss$/, use: [ 'style-loader?{"singleton":true,"attrs":{"id":"document-content-stylesheet"}}', 'css-loader', { loader: 'postcss-loader', options: { plugins: function() { return [autoprefixer] } } }, 'sass-loader', ], include: /assets\/stylesheets\/common\/packages\/DocumentEditor/, }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff', } ); module.exports = config; if (devBuild) { console.log('Webpack dev build for Rails'); // eslint-disable-line no-console module.exports.devtool = 'eval-source-map'; } else { config.plugins.push( new webpack.optimize.DedupePlugin() ); console.log('Webpack production build for Rails'); // eslint-disable-line no-console }
webpack.client.base.config.js
const webpack = require('webpack'); const path = require('path'); const aliases = require('./aliases'); const devBuild = process.env.NODE_ENV !== 'production'; const nodeEnv = devBuild ? 'development' : 'production'; module.exports = { context: __dirname, entry: { vendor: [ 'babel-polyfill', 'jquery', ], app: [ './app/bundles/BundleOne/startup/clientRegistration', './app/bundles/BundleTwo/startup/clientRegistration', './app/bundles/BundleThree/startup/clientRegistration', './app/bundles/BundleFour/startup/clientRegistration', './app/bundles/BundleFive/startup/clientRegistration', './app/bundles/BundleSix/startup/clientRegistration', './app/bundles/BundleSeven/startup/clientRegistration', ], }, resolve: { modules: [ path.resolve('./app/bundles'), ], extensions: ['.js', '.jsx'], alias: aliases, }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv), }, }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor-bundle.js', minChunks: Infinity, }), ], module: { rules: [ { test: require.resolve('jquery'), loader: 'expose-loader?jQuery' }, { test: require.resolve('jquery'), loader: 'expose-loader?$' }, ], }, };