Webpack + React - Can't resolve 'react' in submodule

Question

I am trying to use webpack to serve a smaller bundle of my react applications. I have two parts (client and admin), but I only have concerns with regards to the client part.

I have tried the following:

Created the webpack.config.js file in the root

module.exports = {
    module: {
        rules: [
          {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: {
                  babelrc: false,
                  presets: ['@babel/preset-env', '@babel/preset-react'],
                  plugins: ['@babel/plugin-proposal-class-properties'],
              },
         },
         {
              test: /\.css$/i,
              use: ['style-loader', 'css-loader'],
         },
         {
              test: /\.s[ac]ss$/i,
              use: [
              'style-loader',
              'css-loader',
              'sass-loader',
              ],
         },
         {
              test: /\.svg$/,
              loader: 'svg-inline-loader',
         },
         {
              test: /\.(png|jpe?g|gif)$/i,
              use: [
               {
                 loader: 'file-loader',
               },
              ],
         },
       ],
   },
};

I have added the options to ignore babel because I could not make it import the .babelrc file and it kept throwing:

Support for the experimental syntax 'jsx' isn't currently enabled.

However, every time I run webpack, it throws errors such as:

ERROR in ./node_modules/react-side-effect/lib/index.js Module not found: Error: Can't resolve 'react' in 'project_path\node_modules\react-side-effect\lib'

ERROR in ./client/src/App.js Module not found: Error: Can't resolve 'style-loader' in 'project_path'

ERROR in ./client/src/components/resources/PDFCard.js Module not found: Error: Can't resolve 'style-loader' in 'project_path'

Did I mistype a test?

EDIT

Here is the babel file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

package.json:

{
  "name": "app_name",
  "version": "1.6.1",
  "description": "app_description",
  "main": "server.js",
  "engines": {
    "node": "12.16.3"
  },
  "scripts": {
    "build": "webpack --mode development ./client/src/index.js --output ./client/public/bundle.js",
    "start": "node server",
    "server": "nodemon server",
    "client": "npm start --prefix client",
    "admin": "npm start --prefix admin",
    "dev": "concurrently \"npm run server\" \"npm run client\" \"npm run admin\""
  },
  "author": "David - Marian Buzatu",
  "license": "MIT",
  "dependencies": {
    "apexcharts": "^3.19.0",
    "aws-sdk": "^2.671.0",
    "bcryptjs": "^2.4.3",
    "config": "^3.3.1",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-validator": "^6.4.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.25.3",
    "mongoose": "^5.9.12",
    "multer": "^1.4.2",
    "multer-s3": "^2.9.0",
    "node-sass": "^4.14.1",
    "nodemailer": "^6.4.6",
    "react-apexcharts": "^1.3.7",
    "react-helmet": "^6.1.0",
    "react-minimal-pie-chart": "^6.0.1",
    "react-pdf": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "concurrently": "^5.2.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.0.0",
    "nodemon": "^2.0.3",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.1",
    "svg-inline-loader": "^0.8.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Also, I am running the npm run build script from the root folder. client, where the react project resides, is inside this root folder.

Yes, they are. Running the website even in production without problems. The problem occurs with webpack only — David Buzatu, Aug 31 '20 at 11:21

score 0 · Accepted Answer · answered Sep 19 '20 at 16:23

0

Apparently, the problem was that the project was built using the npx create-react-app command. That one comes with some react-scripts that generate their own webpack and take care of bundling.

answered Sep 19 '20 at 16:23

David Buzatu

624
8
18

So, what's the workaround if we want to use webpack manually? – Henry Jan 05 '21 at 04:27
2

I think you need to look over this [answer](https://stackoverflow.com/questions/48308936/what-does-this-react-scripts-eject-command-do). You have to use `react-scripts eject` in order to get out the webpack config and add your options to that. – David Buzatu Jan 05 '21 at 08:22

score 0 · Answer 2 · answered Jan 05 '21 at 08:58

For me, I only needed to install react, react-native and react-dom as devDependencies, even though they are already there inside peerDependencies. IMO this is so that Webpack can actually understand where import React from 'react'; comes from (the node_modules).

Webpack + React - Can't resolve 'react' in submodule

2 Answers2