Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It doesn't work #36

Open
venturaEffect opened this issue Aug 30, 2022 · 4 comments
Open

It doesn't work #36

venturaEffect opened this issue Aug 30, 2022 · 4 comments

Comments

@venturaEffect
Copy link

venturaEffect commented Aug 30, 2022

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
Copy link
Owner

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
Copy link
Author

venturaEffect commented Aug 30, 2022

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
Copy link
Author

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
Copy link
Owner

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants