Webpack 5

[Eli-Black-Work]

FYI, my understanding is that Webpack 5 does not automatically include this package by default, so this package's documentation may need to be updated 🙂

[Eli-Black-Work]

For those wanting to use this package with Webpack 5, here's a way to do so:

1. Install the util and process packages:

npm install util
npm install process

2. In webpack.config.js, add 'util' to fallbacks and make a global process variable via webpack.ProvidePlugin:

module: {
   ...
},
resolve: {
   ...,
   extensions: ['*', '.js', '.jsx'],
   fallback: {
	'util': require.resolve('util/')
   }
},
plugins: {
   ...,
   new webpack.ProvidePlugin({
	// Make a global `process` variable that points to the `process` package,
	// because the `util` package expects there to be a global variable named `process`.
       // Thanks to https://stackoverflow.com/a/65018686/14239942
	process: 'process/browser'
   })
}

[ljharb]

Updating the docs so webpack 5 users can reverse v5’s breakage sounds like a good idea.

[Eli-Black-Work]

Ya, that's what I'm thinking, too. Especially once Webpack 5 becomes the norm, although at the moment I think Webpack 4 is still far more popular 🙂

[chardskarth]

I'm usingwebpack.config.babel.js. And it says require is not defined. How can I make this work with es6?

[ljharb]

@chardskarth likely you’d use import in a babelified webpack config, not require?

[QGB]

@Bosch-Eli-Black

yarn run v1.22.19
$ gulp clean
[08:06:14] Using gulpfile /home/qgb/github/ttyd/html/gulpfile.js
[08:06:14] Starting 'clean'...
[08:06:14] Finished 'clean' after 38 ms
$ webpack serve
[webpack-cli] Failed to load '/home/qgb/github/ttyd/html/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'util/'
Require stack:
- /home/qgb/github/ttyd/html/webpack.config.js
- /home/qgb/github/ttyd/html/node_modules/webpack-cli/lib/webpack-cli.js
- /home/qgb/github/ttyd/html/node_modules/webpack-cli/lib/bootstrap.js
- /home/qgb/github/ttyd/html/node_modules/webpack-cli/bin/cli.js
- /home/qgb/github/ttyd/html/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (/home/qgb/github/ttyd/html/webpack.config.js:47:20)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (/home/qgb/github/ttyd/html/node_modules/webpack-cli/lib/webpack-cli.js:204:22) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/qgb/github/ttyd/html/webpack.config.js',
    '/home/qgb/github/ttyd/html/node_modules/webpack-cli/lib/webpack-cli.js',
    '/home/qgb/github/ttyd/html/node_modules/webpack-cli/lib/bootstrap.js',
    '/home/qgb/github/ttyd/html/node_modules/webpack-cli/bin/cli.js',
    '/home/qgb/github/ttyd/html/node_modules/webpack/bin/webpack.js'
  ]
}
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.








                                                                                                                                                                                          
ERROR in ../node_modules/precond/lib/checks.js 6:11-26                                                                                                                                    
Module not found: Error: Can't resolve 'util' in '/home/qgb/github/ttyd/html/node_modules/precond/lib'                                                                                    
                                                                                                                                                                                          
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: { "util": require.resolve("util/") }'                                                                                                         
        - install 'util'                                                                                                                                                                  
If you don't want to include a polyfill, you can use an empty module like this:                                                                                                           
        resolve.fallback: { "util": false }                                                                                                                                               
 @ ../node_modules/precond/index.js 6:0-40                                                                                                                                                
 @ ../node_modules/backoff/lib/function_call.js 5:14-32                                                                                                                                   
 @ ../node_modules/backoff/index.js 7:19-52                                                                                                                                               
 @ ./components/terminal/index.tsx 17:0-35 37:23-42                                                                                                                                       
 @ ./components/app.tsx 2:0-35 44:18-23                                                                                                                                                   
 @ ./index.tsx 3:0-39 5:9-12                                                                                                                                                              
                                                                                                                                                                                          
ERROR in ../node_modules/precond/lib/errors.js 6:11-26                                                                                                                                    
Module not found: Error: Can't resolve 'util' in '/home/qgb/github/ttyd/html/node_modules/precond/lib'                                                                                    
                                                                                                                                                                                          
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: { "util": require.resolve("util/") }'                                                                                                         
        - install 'util'                                                                                                                                                                  
If you don't want to include a polyfill, you can use an empty module like this:                                                                                                           
        resolve.fallback: { "util": false }                                                                                                                                               
 @ ../node_modules/precond/lib/checks.js 8:13-49                                                                                                                                          
 @ ../node_modules/precond/index.js 6:0-40                                                                                                                                                
 @ ../node_modules/backoff/lib/function_call.js 5:14-32                                                                                                                                   
 @ ../node_modules/backoff/index.js 7:19-52                                                                                                                                               
 @ ./components/terminal/index.tsx 17:0-35 37:23-42                                                                                                                                       
 @ ./components/app.tsx 2:0-35 44:18-23                                                                                                                                                   
 @ ./index.tsx 3:0-39 5:9-12                                                                                                                                                              
                                                                                                                                                                                          
7 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

[QGB]

websocket connection closed with code: 1006

[Eli-Black-Work]

@QGB Please file new bugs for these 🙂

[Eli-Black-Work]

@QGB Instructions for how to fix that error are in the error message 😉

ERROR in ../node_modules/precond/lib/checks.js 6:11-26                                                                                                                                    
Module not found: Error: Can't resolve 'util' in '/home/qgb/github/ttyd/html/node_modules/precond/lib'                                                                                    
                                                                                                                                                                                          
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: { "util": require.resolve("util/") }'                                                                                                         
        - install 'util'                                                                                                                                                                  
If you don't want to include a polyfill, you can use an empty module like this:                                                                                                           
        resolve.fallback: { "util": false }                                                                                                                                               
 @ ../node_modules/precond/index.js 6:0-40                                                                                                                                                
 @ ../node_modules/backoff/lib/function_call.js 5:14-32                                                                                                                                   
 @ ../node_modules/backoff/index.js 7:19-52                                                                                                                                               
 @ ./components/terminal/index.tsx 17:0-35 37:23-42                                                                                                                                       
 @ ./components/app.tsx 2:0-35 44:18-23                                                                                                                                                   
 @ ./index.tsx 3:0-39 5:9-12