我一直在尝试从 CRA 出来并在我的 React 应用程序中使用 React18 和 webpack 5。我尝试了很多事情,但似乎都没有解决。
我几乎尝试了网络上的所有答案,但没有任何效果,而且我仍然收到此错误。这是我第一次不使用 CRA,所以陷入了最终循环。
这是我的 webpack 配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
externals: {
react: 'react'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
target: 'web',
devServer: {
port: '3000',
static: {
directory: path.join(__dirname, 'public')
},
open: true,
hot: true,
liveReload: true,
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: ['bower_components', 'node_modules', path.resolve('./src')],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 100000,
},
},
],
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index.html')
}),
]
};
.babelrc
{
"presets": ["@babel/preset-env",["@babel/preset-react", {"runtime": "automatic"}]]
}
和src文件夹中的index.js
import React from 'react';
import ReactDOM from "react-dom/client";
import App from './App';
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "__globalStore/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</React.StrictMode>
);
我之前确实将外部组件放入webpack,更改插件,编写reactDom,几乎每个答案都可以提到。我正在使用 React 18.2 和 webpack
5.88.1
还有人困惑吗,我已经用这个解决方案解决了。我在寻找解决方案时经历了这个过程。在
External
中添加 React 并没有帮助我在不导入它的情况下进行 React 工作。
所以我必须在webpack.config.js
中添加一个插件。
我刚刚添加了这个
const webpack = require('webpack'); // at top
plugins: [
new webpack.ProvidePlugin({
"React": "react",
})
]