I got a lot of problem trying to get my npm project updated at webpack 5 and now i only have one error that stands :
bundle.js:1088566
Uncaught ReferenceError: Buffer is not defined
at bundle.js:1044980:24
at Object.<anonymous> (bundle.js:1045039:4)
at ./node_modules/restructure/src/DecodeStream.js (bundle.js:1045041:4)
at options.factory (bundle.js:1089181:31)
at __webpack_require__ (bundle.js:1088563:33)
at fn (bundle.js:1088838:21)
at Object.<anonymous> (bundle.js:1045071:18)
at ./node_modules/restructure/src/EncodeStream.js (bundle.js:1045193:4)
at options.factory (bundle.js:1089181:31)
at __webpack_require__ (bundle.js:1088563:33)
OR
bootstrap:27
Uncaught ReferenceError: Buffer is not defined
at DecodeStream.js:31:1
at Object.<anonymous> (DecodeStream.js:98:1)
at ./node_modules/restructure/src/DecodeStream.js (DecodeStream.js:102:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Object.<anonymous> (EncodeStream.js:9:1)
at ./node_modules/restructure/src/EncodeStream.js (EncodeStream.js:151:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
here is my package.json:
{
"name": "client",
"version": "1.1.0",
"private": true,
"homepage": "",
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fullcalendar/core": "^5.9.0",
"@fullcalendar/daygrid": "^5.9.0",
"@fullcalendar/interaction": "^5.9.0",
"@fullcalendar/react": "^5.9.0",
"@mui/icons-material": "^5.0.0",
"@mui/lab": "^5.0.0-alpha.49",
"@mui/material": "^5.0.2",
"@mui/styled-engine": "^5.0.1",
"@mui/styles": "^5.0.1",
"@mui/x-data-grid": "^5.4.0",
"@mui/x-date-pickers": "^5.0.1",
"@react-pdf/renderer": "^2.1.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.25",
"@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9",
"@types/react-html-parser": "^2.0.2",
"@types/react-router-dom": "^5.1.9",
"@types/recharts": "^1.8.21",
"axios": "^0.21.4",
"babel-polyfill": "^6.26.0",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"clsx": "^1.1.1",
"crypto-browserify": "^3.12.0",
"dayjs": "^1.11.5",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"file-saver": "^2.0.5",
"fs": "^0.0.1-security",
"fullcalendar": "^5.9.0",
"html-react-parser": "^1.4.8",
"moment": "^2.29.3",
"node-polyfill-webpack-plugin": "^2.0.1",
"path-browserify": "^1.0.1",
"prettier": "^2.4.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-big-calendar": "^0.40.1",
"react-circular-progressbar": "^2.0.4",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-export-excel": "^0.5.3",
"react-fast-marquee": "^1.2.1",
"react-google-places-autocomplete": "^3.3.2",
"react-html-parser": "^2.0.2",
"react-icons": "^4.3.1",
"react-jsx-parser": "^1.29.0",
"react-pdf-html": "^1.1.8",
"react-quill": "^2.0.0-beta.4",
"react-router-dom": "6.8.1",
"react-scripts": "^5.0.1",
"react-signature-canvas": "^1.0.3",
"react-sketch-canvas": "^6.1.0",
"react-table": "^7.8.0",
"react-transition-group": "^4.4.2",
"react-zlib-js": "^1.0.5",
"react-zoom-pan-pinch": "^2.1.3",
"recharts": "^2.1.5",
"stream": "^0.0.2",
"stream-http": "^3.2.0",
"typescript": "^4.9.5",
"web-vitals": "^1.1.2",
"xlsx": "^0.18.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@types/draft-js": "^0.11.7",
"@types/draftjs-to-html": "^0.8.1",
"@types/file-saver": "^2.0.5",
"@types/react-big-calendar": "^0.38.0",
"@types/react-color": "^3.0.6",
"@types/react-draft-wysiwyg": "^1.13.4",
"@types/react-signature-canvas": "^1.0.2",
"@types/react-table": "^7.7.8",
"react-error-overlay": "6.0.9",
"webpack-cli": "^4.10.0"
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
And here my webpack config :
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
///
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
fallback: {
"fs": false,
"zlib": false,
"crypto": false,
"path": false,
"stream": false,
},
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
reactRefreshRuntimeEntry,
reactRefreshWebpackPluginRuntimeEntry,
babelRuntimeEntry,
babelRuntimeEntryHelpers,
babelRuntimeRegenerator,
]),
],
},
I already tried to add this plugin to webpack config but it doesn't work it make a TypeError: Cannot read properties of undefined (reading 'assets') at Compilation.createModuleAssets :
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
I also already tried to add "buffer": false, in fallback but no changes
I also already tried to comment the lines / erase the file at ./node_modules/restructure/src/DecodeStream.js but nothing change
Downgrading my node version to 15.14 worked by doing a npm i again didn't got any error, tho the project is really outdated now...