Can't resolve 'process/browser' in '/../node_modules/ipfs-repo/esm/src'

[dangell7]

• Version:
  node: v16.3.0
  npm: 7.15.1
  OSX: 11.6
  IPFS: BELOW

• Platform:

Package.json notable installs

"ipfs-core": "^0.11.0",
"webpack": "^5.41.1",
"babel-loader": "^8.2.2",
"process": "^0.11.10",
"buffer": "^6.0.3",

Webpack Common

entry: [
    PATHS.app,
  ],

  resolve: {
    symlinks: false,
    fallback: {
      fs: false,
      net: false,
      dgram: false,
      child_process: false,
      buffer: require.resolve('buffer'),
      util: require.resolve('util'),
      assert: require.resolve('assert'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      zlib: require.resolve('browserify-zlib'),
      path: require.resolve('path-browserify'),
    },
    extensions: ['.jsx', '.js', '.json', '.css'],
    modules: ['node_modules', PATHS.app],
  },
  resolveLoader: {
    modules: ['node_modules', PATHS.app],
  },
  module: {
    rules: [
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'asset/resource',
      }, {
        test: /\.png/,
        type: 'asset/resource',
      }, {
        test: /\.jpg/,
        type: 'asset/resource',
      }, {
        test: /\.mdx?$/,
        use: ['babel-loader', '@mdx-js/loader']
      }, {
        test: /\.js$|jsx/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          }
        ]
      }
    ],
  },

  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          postcssImport({
            addDependencyTo: webpack,
          }),
        ],
      },
    }),
  ],
};

I also use this babelrc file

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    ["@babel/plugin-transform-modules-commonjs"],
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-proposal-class-properties"]
  ],
  "env": {
    "start": {
      "presets": ["react-hmre"]
    }
  }
}

• Subsystem:
  MacOsX

Severity:

Critical - System crash, application panic.

Description:

Stack Trace:

ERROR in ./node_modules/blockstore-datastore-adapter/esm/src/index.js 127:19-26
Module not found: Error: Can't resolve 'process/browser' in '/.../node_modules/blockstore-datastore-adapter/esm/src'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'process/browser' in '/.../node_modules/blockstore-datastore-adapter/esm/src'
  Parsed request is a module
  using description file: /.../node_modules/blockstore-datastore-adapter/esm/package.json (relative path: ./src)
    resolve as module
      /.../node_modules/blockstore-datastore-adapter/esm/src/node_modules doesn't exist or is not a directory
      /.../node_modules/blockstore-datastore-adapter/esm/node_modules doesn't exist or is not a directory
      /.../node_modules/blockstore-datastore-adapter/node_modules doesn't exist or is not a directory
      /.../node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /.../node_modules
        existing directory /.../node_modules/process
          using description file: /.../node_modules/process/package.json (relative path: .)
            using description file: /.../node_modules/process/package.json (relative path: ./browser)
              Field 'browser' doesn't contain a valid alias configuration
              /.../node_modules/process/browser doesn't exist
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /../node_modules doesn't exist or is not a directory
      /../node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /...
        /.../process doesn't exist
 @ ./node_modules/ipfs-core-config/esm/src/repo.browser.js 3:0-74 12:16-42
 @ ./node_modules/ipfs-core/esm/src/components/storage.js 2:0-51 32:70-80
 @ ./node_modules/ipfs-core/esm/src/components/index.js 42:0-39 267:24-37
 @ ./node_modules/ipfs-core/esm/src/index.js 1:0-63 9:22-34
 @ ./src/App.js 28:39-59
 @ ./src/index.js 37:34-50

ERROR in ./node_modules/ipfs-repo/esm/src/idstore.js 42:21-28
Module not found: Error: Can't resolve 'process/browser' in '/.../node_modules/ipfs-repo/esm/src'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'process/browser' in '/.../node_modules/ipfs-repo/esm/src'
  Parsed request is a module
  using description file: /.../node_modules/ipfs-repo/esm/package.json (relative path: ./src)
    resolve as module
      /.../node_modules/ipfs-repo/esm/src/node_modules doesn't exist or is not a directory
      /.../node_modules/ipfs-repo/esm/node_modules doesn't exist or is not a directory
      /.../node_modules/ipfs-repo/node_modules doesn't exist or is not a directory
      /.../node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /.../node_modules
        existing directory /.../node_modules/process
          using description file: /.../node_modules/process/package.json (relative path: .)
            using description file: /.../node_modules/process/package.json (relative path: ./browser)
              Field 'browser' doesn't contain a valid alias configuration
              /.../node_modules/process/browser doesn't exist
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /.../node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /...
        /.../process doesn't exist
 @ ./node_modules/ipfs-repo/esm/src/index.js 12:0-45 45:18-31
 @ ./node_modules/ipfs-core-config/esm/src/repo.browser.js 1:0-49 7:9-15
 @ ./node_modules/ipfs-core/esm/src/components/storage.js 2:0-51 32:70-80
 @ ./node_modules/ipfs-core/esm/src/components/index.js 42:0-39 267:24-37
 @ ./node_modules/ipfs-core/esm/src/index.js 1:0-63 9:22-34
 @ ./src/App.js 28:39-59
 @ ./src/index.js 37:34-50

webpack 5.54.0 compiled with 2 errors in 35740 ms

Steps to reproduce the error:

npm i --save ipfs-core
import { create } from 'ipfs-core';

[dangell7]

Needed to add mjs to my common web pack file. It builds now.

const common = {
  entry: [
    PATHS.app,
  ],

  resolve: {
    symlinks: false,
    fallback: {
      buffer: require.resolve('buffer'),
      util: require.resolve('util'),
      path: require.resolve('path-browserify'),
    },
    extensions: ['.mjs', '.jsx', '.js', '.json', '.css'],
    modules: ['node_modules', PATHS.app],
  },
  resolveLoader: {
    modules: ['node_modules', PATHS.app],
  },
  module: {
    rules: [
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'asset/resource',
      }, {
        test: /\.png/,
        type: 'asset/resource',
      }, {
        test: /\.jpg/,
        type: 'asset/resource',
      }, {
        test: /\.mdx?$/,
        use: ['babel-loader', '@mdx-js/loader']
      }, {
        test: /\.js$|jsx/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          }
        ]
      }, {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ],
  },

  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          postcssImport({
            addDependencyTo: webpack,
          }),
        ],
      },
    }),
  ],
};