How to use fallback: { 'path': require.resolve('path-browserify'), in webpack?

H

3

8

I'm getting this error:

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' :

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23433 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23411 ms

But if I add those fallback in resolve :

  // main process
var main_config = {
    mode: isEnvProduction ? 'production' : 'development',
    entry: './src/main/main.ts',
    target: 'electron-main',
    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', 'ts'],
    },

I get the same kind of error:

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
    yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23467 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23445 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

So.... How to correctly resolve in webpack.config.js ?

Hallway answered 20/5, 2022 at 15:37 Comment(0)

H

6

SOLVED.

Just adding

    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', '.tsx', '.ts'],
   }

also in the renderer part of the webpack configuration

Hallway answered 20/5, 2022 at 15:48 Comment(2)

Hello, in which file we should add this config ? – Anchovy 8/12, 2022 at 13:33

@Anchovy I've put it into webpack.main.config.js – Hallway 8/12, 2022 at 13:57

H

4

It worked for me

adding more clarity to those who are not able to understand the above quoted inputs

Using "react": "^18.2.0", "react-scripts": "5.0.1",

Follow these steps:

yarn add path-browserify
Go to node_modules and look for react-scripts [as shown in the image below 2.a & 2.b (look for webpack.config.js); then search for resolve: in the webpack.config.js file and add this line (as seen in 2.c) {fallback:{path : require.resolve("path-browserify")} ]
save the file
go the code where you had set the path.. comment and update as shown in the below image

stop the application
run yarn cache clean
run yarn start .. it should work now

Hyperbola answered 12/1, 2023 at 6:47 Comment(2)

Why did he get a -1? It is a valid solution as well. I did it with craco, which in the end is the same thing. There is no need to change the import from path to path-browserify though, as you are already doing this on the fallback configuration. – Programmer 29/5, 2023 at 17:48

Probably need to install path-browserify as well. In my case it worked as it was a dependency of watchify, which is a dependency of cypress =D. Best to have a direct dependency just in case. – Programmer 29/5, 2023 at 18:10

N

1

you just need to install process make like this :npm install process

Nomination answered 19/3, 2023 at 5:34 Comment(0)

Recommended topics

Hot tags