Typescript React Webpack Issues

CM_H · December 11, 2023, 7:19am

Hi,

I am trying to use the Platform SDK with React (TypeScript) and I keep getting a bunch of webpack errors. I have been looking around the forums and I have seen a few people with a similar issue, but they are all old topics and don't seem to resolve my issue. Has anyone seen this and have a fix?

Compiled with problems:
×
ERROR in ./node_modules/@colors/colors/lib/colors.js 34:11-26
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\@colors\colors\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 }
ERROR in ./node_modules/@colors/colors/lib/system/supports-colors.js 28:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\@colors\colors\lib\system'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/configparser/src/configparser.js 1:13-28
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\configparser\src'

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 }
ERROR in ./node_modules/configparser/src/configparser.js 2:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\git\project-name\node_modules\configparser\src'
ERROR in ./node_modules/configparser/src/configparser.js 3:13-28
Module not found: Error: Can't resolve 'path' in 'C:\git\project-name\node_modules\configparser\src'

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 }
ERROR in ./node_modules/logform/dist/pretty-print.js 3:14-37
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\logform\dist'

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 }
ERROR in ./node_modules/logform/dist/splat.js 73:11-26
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\logform\dist'

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 }
ERROR in ./node_modules/mkdirp/index.js 1:11-26
Module not found: Error: Can't resolve 'path' in 'C:\git\project-name\node_modules\mkdirp'

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 }
ERROR in ./node_modules/mkdirp/index.js 2:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\git\project-name\node_modules\mkdirp'
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 221:17-30
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\purecloud-platform-client-v2\dist\node'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 222:19-34
Module not found: Error: Can't resolve 'path' in 'C:\git\project-name\node_modules\purecloud-platform-client-v2\dist\node'

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 }
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 245:21-34
Module not found: Error: Can't resolve 'fs' in 'C:\git\project-name\node_modules\purecloud-platform-client-v2\dist\node'
ERROR in ./node_modules/readable-stream/lib/_stream_readable.js 43:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\git\project-name\node_modules\readable-stream\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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }
ERROR in ./node_modules/readable-stream/lib/_stream_writable.js 66:13-37
Module not found: Error: Can't resolve 'buffer' in 'C:\git\project-name\node_modules\readable-stream\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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }
ERROR in ./node_modules/readable-stream/lib/internal/streams/buffer_list.js 74:15-32
Module not found: Error: Can't resolve 'buffer' in 'C:\git\project-name\node_modules\readable-stream\lib\internal\streams'

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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }
ERROR in ./node_modules/safe-buffer/index.js 3:13-30
Module not found: Error: Can't resolve 'buffer' in 'C:\git\project-name\node_modules\safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }
ERROR in ./node_modules/winston-transport/dist/index.js 3:11-26
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\winston-transport\dist'

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 }
ERROR in ./node_modules/winston-transport/dist/legacy.js 3:11-26
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\winston-transport\dist'

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 }
ERROR in ./node_modules/winston-transport/legacy.js 3:13-28
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\winston-transport'

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 }
ERROR in ./node_modules/winston/dist/winston/common.js 10:15-30
Module not found: Error: Can't resolve 'util' in 'C:\git\project-name\node_modules\winston\dist\winston'

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 }
ERROR in ./node_modules/winston/dist/winston/exception-handler.js 55:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\winston\dist\winston'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/rejection-handler.js 55:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\winston\dist\winston'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/tail-file.js 10:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\git\project-name\node_modules\winston\dist\winston'
ERROR in ./node_modules/winston/dist/winston/transports/console.js 124:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 124:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'
ERROR in ./node_modules/winston/dist/winston/transports/file.js 125:11-26
Module not found: Error: Can't resolve 'path' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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 }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 127:11-26
Module not found: Error: Can't resolve 'zlib' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 135:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/transports/http.js 158:11-26
Module not found: Error: Can't resolve 'http' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'
Did you mean './http'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\git\project-name\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }
ERROR in ./node_modules/winston/dist/winston/transports/http.js 159:12-28
Module not found: Error: Can't resolve 'https' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }
ERROR in ./node_modules/winston/dist/winston/transports/stream.js 126:9-22
Module not found: Error: Can't resolve 'os' in 'C:\git\project-name\node_modules\winston\dist\winston\transports'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }

Any help is appreciated.

CM_H · December 11, 2023, 7:37am

I posted this and then managed to work it out. It is not the most elegant solution in the world.

I am using react-scripts so the fix is to open node_modules/react-scripts/config/webpack.config.js and add the following code:

{
    // The rest of the code
    resolve: {
      fallback: {
        path: false,
        crypto: false,
        util: false,
        os: false,
        fs: false,
        zlib: false,
        http: false,
        https: false,
        buffer: false
      },
    }
    // The rest of the code
}

Reference: How to Add PureCloud SDK to Angular (12) - Platform API / JavaScript SDK - Genesys Cloud Developer Forum

If I find a better way, I will post however this will get me out of jail for now.

CM_H · December 13, 2023, 1:58am

Here is a longer term solution, install craco - @craco/craco - npm (npmjs.com)

Run npm i @craco/craco.

Then create a craco.config.js file in the root of your project and add this config.

const path = require("path");
const fs = require("fs");

const { whenDev } = require("@craco/craco");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) =>
          constructor && constructor.name === "ModuleScopePlugin"
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      webpackConfig["resolve"] = {
        fallback: {
          path: false,
          crypto: false,
          util: false,
          os: false,
          fs: false,
          zlib: false,
          http: false,
          https: false,
          buffer: false,
        },
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
      };
      return webpackConfig;
    },
  },
  devServer: whenDev(() => ({
    https: true,
  })),
};

Now open your package.json and update these fields.

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "craco eject"
}

Now the errors should go away for you!

system · January 13, 2024, 1:59am

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.