после установки пакета webpack-5-react-scripts выходит ошибка
В проекте используется create-react-app. После того, как сервере перестало билдиться с конфликтом webpack < 5, установила пакет webpack-5-react-scripts, и ошибка прошла, билдится и на сервере, и локально. Но теперь локально при старте приложения выходит ошибка:
Failed to compile.
Module not found: Error: Can't resolve 'os' in 'C:\github\other\web_support\app\chat-app\node_modules\local-ip-url'
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 these module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add an alias 'resolve.alias: { "os": "os-browserify/browser" }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.alias: { "os": false }
Вставляла предлагаемый resolve 'resolve.alias: { "os": "os-browserify/browser" }', вставляла 'resolve.alias: { "os": false }' в web.config.js, удаляла пакет 'os-browserify', но ошибка продолжает выходить. Пакет local-ip-url нужен. Подскажите, как заставить работать?
webpack.config.js
// import * as webpack from "webpack";
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
"web_chat": "./src/index.js",
"web_chat.min": "./src/index.js",
},
module: {
strictExportPresence: true,
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin()
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
resolve : {
alias: { "os": "os-browserify/browser" }
}
}
package.json
{
"name": "qwe1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chatscope/chat-ui-kit-react": "^1.0.3",
"@chatscope/chat-ui-kit-styles": "^1.0.4",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.5.0",
"axios": "^0.21.1",
"html-webpack-plugin": "^4.5.0",
"latest": "^0.2.0",
"local-ip-url": "^1.0.3",
"os-browserify": "^0.3.0",
"react": "^17.0.1",
"react-chat-widget": "^3.0.5",
"react-dom": "^17.0.1",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.2",
"react-scripts": "^4.0.2",
"react-scrollable-feed": "^1.2.0",
"react-svg": "^11.2.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4",
"webpack-5-react-scripts": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --config webpack.config.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"style-loader": "^2.0.0",
"svg-inline-loader": "^0.8.2",
"webpack-cli": "^4.2.0"
},
"babel": {
"presets": [
"@babel/env",
"@babel/react"
]
}
}