Richienb / node-polyfill-webpack-plugin

Polyfill Node.js core modules in Webpack.
MIT License
290 stars 31 forks source link

It doesn't work #36

Open venturaEffect opened 2 years ago

venturaEffect commented 2 years ago

Followed the steps that are described on README but with no success. As seen on other tutorials I created webpack.config.js file on the root directory. Added the code lines to call the plugin as said on the README but still got the 23 errors. Also searched in node_modules/react-scripts/config/webpack.config.js and added the piece of code from README. Searched for module.exports but it doesn't appear as it shows on many tutorials. It appears like: // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function (webpackEnv) { const isEnvDevelopment = webpackEnv === 'development'; const isEnvProduction = webpackEnv === 'production';

Any help will be much appreciated because I've tried everything what I found on internet. Downgrading webpack, using react-app-rewired,...

Nothing is working. Thought that this solution could fix the problem as it seems more concise. But no success.

Here the errors:

`Compiled with problems:X

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/body-parser/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: { "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/content-disposition/index.js 19:15-39

Module not found: Error: Can't resolve 'path' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/content-disposition'

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/cookie-signature/index.js 4:13-30

Module not found: Error: Can't resolve 'crypto' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/cookie-signature'

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/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/destroy'

ERROR in ./node_modules/destroy/index.js 17:13-30

Module not found: Error: Can't resolve 'stream' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/destroy'

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

ERROR in ./node_modules/destroy/index.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/zaesar/Escritorio/coding/Github/webpack-intallation-exercise/webpack-installation-exercise/node_modules/destroy'

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.

   ...`
Richienb commented 2 years ago

By default, Create React App uses an internally-defined configuration. One way to access this configuration in order to modify it is to eject. Alternate methods appear to be listed here: https://marmelab.com/blog/2021/07/22/cra-webpack-no-eject.html

venturaEffect commented 2 years ago

Thanks Richy but as I said on the first comment I used already react-app-rewired followed this tutorial as it suggests on the link that you provided.

I have runned npm run eject and this is what I've got: `> webpack-installation-exercise@0.1.0 eject

react-scripts eject

 NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: 
 https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

 ✔ Are you sure you want to eject? This action is permanent. … yes
 This git repository has untracked files or uncommitted changes:

 package-lock.json
 M package.json
 M src/App.js
 D src/logo.svg
 src/Components/
 webpack-installation-exercise/
 webpack.config.js

 Remove untracked files, stash or commit any changes, and try again.`

I tried dozens of stack overflow links. With no success. Any help or better explanation about the steps how to achieve it would be super appreciated.

venturaEffect commented 2 years ago

I started a new app. wrote on the terminal npm install node-polyfill-webpack-plugin. Added on react-scripts/config/webpack.config.js the code showed on README:

`const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
};`

And agian the same problem:

`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.`

Any suggestions would be appreciated, because I can't figure out what is wrong.

Richienb commented 2 years ago

Added on react-scripts/config/webpack.config.js

I don't think that would work. Try ejecting within this new app.