Hi @jacobshaw,
Thanks for coming back to me. I've tried your suggestion importing directly from dist but it doesnt work due to webpack not being able to resolve node modules.To fix that we will need to apply the hacky solution that I mentioned before (How to Add PureCloud SDK to Angular (12)), which we want to avoid.
I've created a branch with your suggestion: GitHub - asierba/sample-genesys-ts-react-app at jacobshaws-solution
If you pull that branch to your local machine and run npm run start you should be able to see the error.
The webpack error for reference:
Failed to compile.
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/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 }
WARNING in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 758:32-65
Module not found: Error: Can't resolve 'crypto' in '/Users/asier/dev/sample-genesys-ts-react-app/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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
ERROR in ./node_modules/configparser/src/configparser.js 1:13-28
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/configparser/src'
ERROR in ./node_modules/configparser/src/configparser.js 3:13-28
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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/node_modules/@colors/colors/lib/colors.js 34:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/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/logform/node_modules/@colors/colors/lib/system/supports-colors.js 28:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/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/mkdirp/index.js 1:11-26
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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/legacy.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/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/modern.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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-transport/modern.js 3:13-28
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/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 '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston'
ERROR in ./node_modules/winston/dist/winston/transports/console.js 110:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/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 110:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
ERROR in ./node_modules/winston/dist/winston/transports/file.js 111:11-26
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/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 113:11-26
Module not found: Error: Can't resolve 'zlib' in '/Users/asier/dev/sample-genesys-ts-react-app/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 121:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/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 144:11-26
Module not found: Error: Can't resolve 'http' in '/Users/asier/dev/sample-genesys-ts-react-app/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, /Users/asier/dev/sample-genesys-ts-react-app/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 145:12-28
Module not found: Error: Can't resolve 'https' in '/Users/asier/dev/sample-genesys-ts-react-app/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 112:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/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 }
webpack compiled with 32 errors and 1 warning
No issues found.
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
