[Solved] Rewood 0.36.2 & webpack 5

Get Help and Help Others
1

I’m merging the rw-jwt-auth-example into redwood 0.36.2 and getting a webpack 5 error

I’ve installed the stream-browserify via: yarn workspace webbb add stream-browserify

and I still get the error:

oddd…

web | ERROR in ../node_modules/jws/lib/verify-stream.js 5:13-30
web | Module not found: Error: Can't resolve 'stream' in '/Users/ajoslin/Documents/Als/Development/vaxxifi/production-candidates/2vaccess/vaccess/node_modules/jws/lib'
web |
web | BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
web | This is no longer the case. Verify if you need this module and configure a polyfill for it.
web |
web | If you want to include a polyfill, you need to:
web | 	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
web | 	- install 'stream-browserify'
web | If you don't want to include a polyfill, you can use an empty module like this:
web | 	resolve.fallback: { "stream": false }
web |  @ ../node_modules/jws/index.js 3:19-49
web |  @ ../node_modules/jsonwebtoken/decode.js 1:10-24
web |  @ ../node_modules/jsonwebtoken/index.js 2:10-29
web |  @ ./src/jwtAuthClient.js 13:0-31 38:28-38 135:18-28
web |  @ ./src/App.js 6:0-64 15:12-25 18:25-39
web |  @ ../node_modules/@redwoodjs/web/dist/entry/index.js 9:45-73
web |
2

I used the cli cmd to setup config

I added one potential fix - didn’t work

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

/** @returns {import('webpack').Configuration} Webpack Configuration */
module.exports = (config, { mode }) => {
  if (mode === 'development') {
    // Add dev plugin
  }

    plugins: [
        new NodePolyfillPlugin()
    ]

    // Add custom rules for your project
  // config.module.rules.push(YOUR_RULE)

  // Add custom plugins for your project
  // config.plugins.push(YOUR_PLUGIN)

  return config
}
3

I think this is working – will advise

…web/config/webpack.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

/** @returns {import('webpack').Configuration} Webpack Configuration */
module.exports = (config, { mode }) => {
  if (mode === 'development') {
    // Add dev plugin
  }

  confog.modules.rules.push(
    {
      resolve: { 
        fallback: { 
        "crypto-browserify": require.resolve('crypto-browserify'),
        "stream": require.resolve("stream-browserify"),
        }
      }
    }
  );


    // Add custom rules for your project
  // config.module.rules.push(YOUR_RULE)

  // Add custom plugins for your project
  // config.plugins.push(YOUR_PLUGIN)

  return config
}
4

not bad so far

new problem in that ‘process’ needs to be pollyfilled also

web | [webpack-cli] Failed to load '/Users/ajoslin/Documents/Als/Development/vaxxifi/production-candidates/2vaccess/vaccess/node_modules/@redwoodjs/core/config/webpack.development.js' config

config so far:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

/** @returns {import('webpack').Configuration} Webpack Configuration */
module.exports = (config, { mode }) => {
  if (mode === 'development') {
    // Add dev plugin
  }

  config.module.rules.push(
    {
      resolve: { 
        fallback: { 
          "process": false,
          "crypto": require.resolve("crypto-browserify"),
          "stream": require.resolve("stream-browserify"),
        }
      }
    }
  );

  config.plugins.push(
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  );


    // Add custom rules for your project
  // config.module.rules.push(YOUR_RULE)

  // Add custom plugins for your project
  // config.plugins.push(YOUR_PLUGIN)

  return config
}
5

this seems to have worked

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

var webpack = require('webpack');

/** @returns {import('webpack').Configuration} Webpack Configuration */
module.exports = (config, { mode }) => {
  if (mode === 'development') {
    // Add dev plugin
  }

  config.module.rules.push(
    {
      resolve: { 
        fallback: { 
          "process": false,
          "crypto": require.resolve("crypto-browserify"),
          "stream": require.resolve("stream-browserify"),
        }
      }
    }
  );

  config.plugins.push(
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  );


    // Add custom rules for your project
  // config.module.rules.push(YOUR_RULE)

  // Add custom plugins for your project
  // config.plugins.push(YOUR_PLUGIN)

  return config
}
1 Like