Legacy Dev Forum Posts

 View Only

Sign Up

Typescript React Webpack Issues

  • 1.  Typescript React Webpack Issues

    Posted 06-05-2025 18:04

    CM_H | 2023-12-11 07:19:38 UTC | #1

    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 | 2023-12-11 07:37:25 UTC | #2

    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 | 2023-12-13 01:58:55 UTC | #3

    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 | 2024-01-13 01:59:44 UTC | #4

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


    This post was migrated from the old Developer Forum.

    ref: 23619