Errors when using webpack 5 - cannot resolve process/browser

[sandzone]

Summary

I get the following errors when using webpack 5

ERROR in ./node_modules/@remirror/core-utils/dist/remirror-core-utils.browser.esm.js 40:18-25 
Module not found: Error: Can't resolve 'process/browser' in '/home/testUser/workspace/neweditortest/node_modules/@remirror/core-utils/dist' 
resolve 'process/browser' in '/home/testUser/workspace/neweditortest/node_modules/@remirror/core-utils/dist' 
 Parsed request is a module 
 using description file: /home/testUser/workspace/neweditortest/node_modules/@remirror/core-utils/package.json (relative path: ./dist) 
   resolve as module 
     /home/testUser/workspace/neweditortest/node_modules/@remirror/core-utils/dist/node_modules doesn't exist or is not a directory 
     /home/testUser/workspace/neweditortest/node_modules/@remirror/core-utils/node_modules doesn't exist or is not a directory 
     /home/testUser/workspace/neweditortest/node_modules/@remirror/node_modules doesn't exist or is not a directory 
     /home/testUser/workspace/neweditortest/node_modules/node_modules doesn't exist or is not a directory 
     looking for modules in /home/testUser/workspace/neweditortest/node_modules 
       /home/testUser/workspace/neweditortest/node_modules/process doesn't exist 
     /home/testUser/workspace/node_modules doesn't exist or is not a directory 
     /home/testUser/node_modules doesn't exist or is not a directory 
     /home/node_modules doesn't exist or is not a directory 
     /node_modules doesn't exist or is not a directory 
@ ./node_modules/@remirror/core/dist/remirror-core.browser.esm.js 9:0-682 10:0-37 10:0-37 1178:9-23 1178:34-52 1187:9-23 1187:34-52 1196:9-23 1196:34-52 1206:9-23 1206:34-52 1216:9-23 1216:34-52 1750:30-46 1754:6-18 1761:11-25 1823:20-
36 1824:18-27 2458:26-42 2480:18-30 2661:11-26 2690:30-46 2695:10-27 2695:37-58 2697:111-127 2823:11-23 2836:11-21 2844:11-26 2853:11-17 2877:11-21 2932:31-52 2968:11-22 3051:9-26 3798:20-38 4004:19-34 4022:40-61 4039:19-31 4049:37-50 4
059:19-31 4068:36-48 4133:11-27 4175:21-42 4211:11-32 4517:25-52 4538:11-34 4548:11-34 4573:33-47 4584:34-48 4589:31-45 4660:11-27 4664:33-53 4707:33-45 4707:48-66 4715:11-27 4715:37-55 4736:33-45 4736:48-66 4744:33-53 4866:24-41 4904:2
6-43 5605:47-66 5743:24-36 6203:13-29 6324:6-23 6330:6-23 8337:159-170 8767:14-32 8779:17-33 9016:7-21 9016:33-51 
@ ./src/App.js 4:0-45 
@ ./src/index.js 5:0-24 7:107-110 

ERROR in ./node_modules/lib0/environment.js 14:29-36 
Module not found: Error: Can't resolve 'process/browser' in '/home/testUser/workspace/neweditortest/node_modules/lib0' 
resolve 'process/browser' in '/home/testUser/workspace/neweditortest/node_modules/lib0' 
 Parsed request is a module 
 using description file: /home/testUser/workspace/neweditortest/node_modules/lib0/package.json (relative path: .) 
   Field 'browser' doesn't contain a valid alias configuration 
   resolve as module 
     /home/testUser/workspace/neweditortest/node_modules/lib0/node_modules doesn't exist or is not a directory 
     /home/testUser/workspace/neweditortest/node_modules/node_modules doesn't exist or is not a directory 
     looking for modules in /home/testUser/workspace/neweditortest/node_modules 
       /home/testUser/workspace/neweditortest/node_modules/process doesn't exist 
     /home/testUser/workspace/node_modules doesn't exist or is not a directory 
     /home/testUser/node_modules doesn't exist or is not a directory 
     /home/node_modules doesn't exist or is not a directory 
     /node_modules doesn't exist or is not a directory 
@ ./node_modules/y-prosemirror/src/plugins/sync-plugin.js 17:0-47 222:8-29 
@ ./node_modules/y-prosemirror/src/y-prosemirror.js 2:0-107 2:0-107 2:0-107 2:0-107 2:0-107 
@ ./node_modules/@remirror/extension-yjs/dist/remirror-extension-yjs.browser.esm.js 2:0-231 19:19-39 105:31-45 106:28-47 108:12-23 108:50-63 112:26-37 176:24-47 186:28-32 202:24-47 212:28-32 235:32-55 239:11-45 245:33-56 249:11-45 
@ ./node_modules/remirror/extensions/dist/remirror-extensions.browser.esm.js 49:0-40 49:0-40 
@ ./src/App.js 2:0-98 29:30-46 29:77-97 
@ ./src/index.js 5:0-24 7:107-110 

webpack 5.65.0 compiled with 2 errors in 4474 ms

Steps to reproduce

Here is my webpack.config.js file

const webpack = require('webpack');

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports =  {
  entry:{
    index:path.resolve(__dirname,'./src/index.js'),
  },
  mode:'development',
  output:{
    publicPath:"/", //Very very important - else, htmlwebackplugin resolve to a relative path and sub routes won't work
    path:path.resolve(__dirname, './dist'),
    filename:'[name].bundle.js'
  },
  resolve:{
    fallback:{
      crypto:require.resolve("crypto-browserify"),
      https:require.resolve("https-browserify"),
      http:require.resolve("stream-http"),
      stream:require.resolve("stream-browserify"),
      zlib:require.resolve("browserify-zlib"),
      fs:false,
      buffer:false
    }
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:path.resolve(__dirname,'./public/index.html'),
      chunks:['index', 'vendor'],
      title:"Home page"
    }),

    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', ["@babel/preset-env", {"targets": {"node": "current"}}], "@babel/preset-typescript"],
            plugins:["@babel/plugin-proposal-class-properties", ["@babel/plugin-proposal-decorators",{decoratorsBeforeExport:true}]]

          }
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups:{
        vendor:{
          test:/node_modules/,
          chunks:'all',
          name:"vendor",
          enforce:true
        }
      }
     },
   },
}

[sandzone]

I manged to resolve it. It was an issue of not configuring webpack correctly.

The following steps addressed both the issues respectively.

Step 1: Install 'process' module as a development dependency
npm install --save-dev process

Go to microsoft/PowerBI-visuals-tools#365 for a discussion about a similar issue

Step 2: Modify webpack.config.js to add a rule as follows

{
 test: /\.m?js/,
 resolve: {
    fullySpecified: false
 }
}

Go to graphql/graphql-js#2721 for a discussion about a similar issue