webpack: Cannot find module 'react' in react-redux and cloudinary-react with Yarn 2, babel-loader, and webpack 5

Bug report

What is the current behavior?

Trying to get a stack of webpack 5.1.3, babel-loader and yarn 2.3.3 working with PnP on a react, react-redux web app.

Getting the following series of errors which all seem to be the same thing, but I have been working for a week trying to resolve them and I can’t figure it out. Turning the webpack cache on or off doesn’t seem to matter because the errors are the same. Turning the babel-cache on or off doesn’t seem to affect the errors as well:

ℹ ｢wdm｣: Compiling...
webpack built client 552c73ddd3ffbe9a9bbe in 610ms
✖ ｢wdm｣: assets by status 19.9 MiB [cached] 3 assets
assets by path . 3.12 KiB
  asset favicon.ico 2.54 KiB [emitted]
  asset index.html 590 bytes [emitted]
cached modules 14 MiB (javascript) 28 KiB (runtime) [cached] 1915 modules

WARNING in ../node_modules/react-redux/es/index.js 11:9-14
export 'unstable_batchedUpdates' (imported as 'batch') was not found in './utils/reactBatchedUpdates' (possible exports: )

WARNING in ../node_modules/react-redux/es/index.js 12:0-179
export 'unstable_batchedUpdates' (reexported as 'batch') was not found in './utils/reactBatchedUpdates' (possible exports: )

ERROR in ../node_modules/cloudinary-react/lib/components/CloudinaryComponent/CloudinaryComponent.js 8:37-53
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/CloudinaryComponent/internal.js
 @ ../node_modules/cloudinary-react/lib/components/Video/Video.js 14:51-84

ERROR in ../node_modules/cloudinary-react/lib/components/CloudinaryContext/CloudinaryContext.js 8:36-52
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/CloudinaryContext/internal.js
 @ ../node_modules/cloudinary-react/lib/index.js 33:48-89

ERROR in ../node_modules/cloudinary-react/lib/components/CloudinaryContext/CloudinaryContextType.js 10:37-53
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/CloudinaryContext/internal.js

ERROR in ../node_modules/cloudinary-react/lib/components/Image/Image.js 8:36-52
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/Image/internal.js

ERROR in ../node_modules/cloudinary-react/lib/components/Transformation/Transformation.js 8:36-52
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/Transformation/internal.js

ERROR in ../node_modules/cloudinary-react/lib/components/Video/Video.js 8:36-52
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/components/Video/internal.js
 @ ../node_modules/cloudinary-react/lib/index.js 39:36-65

ERROR in ../node_modules/cloudinary-react/lib/index.js 31:36-52
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/cloudinary-react/lib/internal.js

ERROR in ../node_modules/react-redux/es/components/Context.js 1:0-26
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/components/internal.js

ERROR in ../node_modules/react-redux/es/components/Provider.js 1:0-50
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/components/internal.js

ERROR in ../node_modules/react-redux/es/components/connectAdvanced.js 4:0-71
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/components/internal.js

ERROR in ../node_modules/react-redux/es/hooks/useReduxContext.js 1:0-35
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/hooks/internal.js
 @ ../node_modules/react-redux/es/hooks/useStore.js 3:0-78 16:56-78

ERROR in ../node_modules/react-redux/es/hooks/useSelector.js 1:0-64
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/hooks/internal.js
 @ ../node_modules/react-redux/es/index.js 6:0-70 12:0-179 12:0-179

ERROR in ../node_modules/react-redux/es/hooks/useStore.js 1:0-35
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/hooks/internal.js
 @ ../node_modules/react-redux/es/index.js 7:0-61 12:0-179 12:0-179

ERROR in ../node_modules/react-redux/es/utils/reactBatchedUpdates.js 2:0-52
Module not found: Error: Cannot find module 'react-dom'
Require stack:
- /Users/gtw/node_modules/react-redux/es/utils/internal.js
 @ ../node_modules/react-redux/es/index.js 9:0-79 11:9-14 12:0-179

ERROR in ../node_modules/react-redux/es/utils/useIsomorphicLayoutEffect.js 1:0-51
Module not found: Error: Cannot find module 'react'
Require stack:
- /Users/gtw/node_modules/react-redux/es/utils/internal.js
 @ ../node_modules/react-redux/es/hooks/useSelector.js 4:0-79 39:2-27 44:2-27

client (webpack 5.1.3) compiled with 15 errors and 2 warnings in 610 ms
ℹ ｢wdm｣: Failed to compile.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

It feels like react should be found as a peer dependency of react-redux.

Here is my webpack config - yarn 2.3.3 is building the pnp modules in the .yarn directory:

.yarn
    .cache
        babel-loader
        webpack
            client-development
    cache
    plugins
    releases
    unplugged

Webpack configuration:

{
  mode: 'development',
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [ '/Users/xxx/public-web/config/webpack.config.js' ]
    }
  },
  optimization: { emitOnErrors: true, concatenateModules: false },
  name: 'client',
  target: 'web',
  devtool: 'source-map',
  resolve: {
    modules: [ '/Users/xxx/public-web/src', 'node_modules' ],
    extensions: [ '.js', '.jsx', '.json' ],
    fallback: {
      buffer: '/Users/xxx/public-web/.yarn/cache/buffer-npm-5.6.0-e1494693bf-e18fdf099c.zip/node_modules/buffer/index.js',
      crypto: '/Users/xxx/public-web/.yarn/cache/crypto-browserify-npm-3.12.0-bed454fef0-8b558367b3.zip/node_modules/crypto-browserify/index.js',
      os: '/Users/xxx/public-web/.yarn/cache/os-browserify-npm-0.3.0-cbc91c79a5-f547c03881.zip/node_modules/os-browserify/browser.js',
      path: '/Users/xxx/public-web/.yarn/cache/path-browserify-npm-1.0.1-f975d99a99-45bb738917.zip/node_modules/path-browserify/index.js',
      stream: '/Users/xxx/public-web/.yarn/cache/stream-browserify-npm-3.0.0-4c0bd97245-55fb0c3008.zip/node_modules/stream-browserify/index.js',
      util: '/Users/xxx/public-web/.yarn/cache/util-npm-0.12.3-d45fb951c3-684f2f586d.zip/node_modules/util/util.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        include: [ '/Users/xxx/public-web/src' ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: './.yarn/.cache/babel-loader',
              plugins: [ '@babel/plugin-proposal-class-properties' ],
              presets: [ [ '@babel/preset-env' ], '@babel/preset-react' ]
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        include: /(\/Users\/gtw\/redherrings\-app\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: { localIdentName: '[name]__[local]___[hash:base64:5]' },
              importLoaders: 1
            }
          },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                includePaths: [ '/Users/xxx/public-web/src/styles' ]
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: /(\/Users\/gtw\/redherrings\-app\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: { localIdentName: '[name]__[local]___[hash:base64:5]' },
              importLoaders: 1
            }
          },
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /(\/Users\/gtw\/redherrings\-app\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          { loader: 'css-loader', options: {} },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                includePaths: [ '/Users/xxx/public-web/src/styles' ]
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        exclude: /(\/Users\/gtw\/redherrings\-app\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          { loader: 'css-loader', options: {} },
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
        use: [ { loader: 'url-loader', options: { limit: 100000 } } ]
      },
      {
        test: /\.(gif|png|jpg)$/,
        use: [ { loader: 'url-loader', options: { limit: 8192 } } ]
      },
      {
        test: /\.m?js$/,
        type: 'javascript/auto',
        resolve: { fullySpecified: false }
      }
    ]
  },
  entry: {
    app: {
      import: '/Users/xxx/public-web/src/main.js',
      dependOn: 'shared'
    },
    localDevHmr: {
      import: 'webpack-hot-middleware/client?path=http://x.x.x.x:3060/__webpack_hmr',
      dependOn: 'shared'
    },
    shared: [
      'react',
      'react-dom',
      'redux',
      'react-redux',
      'react-router',
      'react-router-dom'
    ]
  },
  output: {
    filename: '[name].[contenthash].js',
    path: '/Users/xxx/public-web/dist',
    publicPath: 'http://192.168.4.62:3060/'
  },
  externals: {
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
    'react/addons': true
  },
  plugins: [
    HtmlWebpackPlugin {
      options: {
        template: '/Users/xxx/public-web/src/index.html',
        templateContent: false,
        templateParameters: [Function: templateParametersGenerator],
        filename: 'index.html',
        publicPath: 'auto',
        hash: false,
        inject: 'body',
        scriptLoading: 'blocking',
        compile: true,
        favicon: '/Users/xxx/public-web/public/favicon.ico',
        minify: { collapseWhitespace: true },
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'auto',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false
      },
      childCompilerHash: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    HotModuleReplacementPlugin { options: {} }
  ]
}

Other relevant information: webpack version: 5.1.3 Node.js version: 14.13.1 Operating System: macOS Catalina 10.15.7 Additional tools: babel-loader, yarn 2.3.3

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 58 (29 by maintainers)

Most upvoted comments

@sokra How we can use resolve.modules with pnp and any custom dir

You need to put "node_modules" into resolve.modules PnP will run at this position.

+1
sokra on Oct 28, 2020

Yes, bug, problem here:

resolve: {
    modules: [
      project.paths.client(),
    ],
  },

and

{
  // Other entries with `dependOn`
  shared: ['react','react-dom','redux','react-redux','react-router','react-router-dom']
}

Due this webpack can’t resolve modules from shared, you should have get this error message: Can't resolve 'react' (and for other modules inside shared) in your case, but you got the ugly error, we should fix it.

@sokra How we can use resolve.modules with pnp and any custom dir

+1
alexander-akait on Oct 28, 2020

Sorry for delay, look at this tomorrow

+1
alexander-akait on Oct 27, 2020

Repro updated (was able to reproduce the error in the test repro at https://github.com/gtwilliams03/test-webpack-repro.git on two different computers - i.e., taking node_modules out of webpack config) - clone repo, run yarn install && yarn run dev

+1
gtwilliams03 on Oct 22, 2020
Read more comments on GitHub
← webpack: Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export)
webpack: Cannot get final name for export "default" in "delegated ..." with Webpack 3 scope hoisting →