出现错误：您必须将组件传递给 connect 返回的函数

Question

我一直在更新所有 Babel 和 Webpack 依赖项以消除漏洞。目前，我的 package.json 文件如下所示，它完美地安装了所有依赖项：

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"test": "jest --coverage --config ./jest.config.js",
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
"test:watch": "npm run test -- --watch",
"test:watchAll": "npm run test -- --watchAll",
"test:updateSnapshot": "jest --updateSnapshot"
},
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.1",
"core-js": "^3.36.0",
"dom-to-image": "2.6.0",
"i18n-react": "0.6.4",
"immutable": "^4.0.0-rc.12",
"jquery": "^3.4.1",
"mime-types": "latest",
"prop-types": "latest",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.2.2",
"react-select": "3.0.4",
"react-svg": "^10.0.14",
"react-webcam": "^5.2.0",
"reactjs-popup": "^1.4.2",
"redux": "4.2.0",
"redux-logger": "3.0.6",
"redux-promise-middleware": "6.1.2",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/eslint-parser": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-jest": "^29.7.0",
"babel-loader": "^9.0.0",
"babel-plugin-react-html-attrs": "^3.0.5",
"babel-plugin-rewire": "^1.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.10.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0",
"jest": "^29.7.0",
"less": "^4.2.0",
"less-loader": "^11.1.0",
"react-hot-loader": "4.8.4",
"style-loader": "^3.3.4",
"url-loader": "^4.0.0",
"webpack": "^5.76.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^5.0.0"
}
}

我通过 webpack-config.js 文件进行配置，它看起来像这样：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Copy
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

const config = {
js: {
srcDir: 'src/main/javascript',
resourceDir: 'src/main/resources',
src: ./main.jsx,
outputDir: './target/classes/static/',
outputFile: 'bundle.js',
},
};

const debug = process.env.NODE_ENV !== 'production';

const modules = [];
modules.push(config.js.srcDir);
const modulesWithNode = modules.slice();
modulesWithNode.push('node_modules');

module.exports = {
mode: debug ? 'development' : 'production',
context: path.join(__dirname, config.js.srcDir),
devtool: debug ? 'source-map' : 'hidden-source-map',
entry: {
app: [config.js.src],
},
output: {
filename: config.js.outputFile,
publicPath: '/',
path: path.join(__dirname, config.js.outputDir),
sourceMapFilename: 'prod-[file].map',
},
resolve: {
modules: modulesWithNode,
extensions: ['.js', '.jsx'],
fallback: { path: false },
},
module: {
rules: [
{
test: /.jsx?$/,
include: modules.map(module => path.resolve(__dirname, module)),
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3 }], '@babel/preset-react'],
plugins: [['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }], '@babel/plugin-proposal-class-properties'],
retainLines: true,
},
},
},
{
test: /.less$/,
include: modules.map(module => path.resolve(__dirname, module)),
use: [
{ loader: 'style-loader'},
{ loader: 'css-loader', options: { sourceMap: debug } },
{ loader: 'less-loader', options: { sourceMap: debug } }
],
},
{
test: /.(jpg|png|woff|woff2|eot|ttf|svg|wav)$/,
use: 'url-loader?limit=100000'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body'
}),
new CopyWebpackPlugin({
patterns: [
{
context: '../resources',
from: './static/assets/sounds/camera-shutter-sound.wav',
to: 'assets/sounds',
toType: 'dir',
},
{
from: './sw',
to: './',
},
]
}),
]
};

我使用的是 Node 版本 20.11.0 和 npm 版本 10.2.4。当我通过 Maven 安装所有依赖项时，没有收到任何错误。但是，当我通过 Spring Boot 启动应用程序并部署前端时，我总是在浏览器控制台上收到此错误：

未捕获错误：您必须将组件传递给 connect 返回的函数。而是收到了 {"kind":"class","elements":[{"kind":"method","key":"render","placement":"prototype","descriptor":{"writable": true,"可配置":true,"可枚举":false}}]}

我认为这与装饰器的配置有关，这导致了react-redux的connectAdvanced.js文件中出现这种情况，因为我没有对代码进行任何更改。

我一直在尝试以多种方式配置装饰器，但都没有奏效。我希望加载页面上的所有组件而不会出现错误。

Answer 1

问题似乎是 Babel 如何转译你的 JS 代码，特别是关于使用 Reach 组件的装饰器。

使用

@babel/plugin-proposal-decorators

插件时，插件的顺序很重要，尤其是与

@babel/plugin-proposal-class-properties

插件一起使用时。装饰器提案已经进行了多次迭代，并且语法和语义随着时间的推移而发生变化，因此正确配置 Babel 插件至关重要。

您可以尝试更改插件的顺序。在 Babel 配置数组中，

@babel/plugin-proposal-decorators

应位于

@babel/plugin-proposal-class-properties

插件之前。此外，如果您使用装饰器的遗留模式（React项目中常见），则需要为装饰器插件设置

legacy: true

和选项，并为类属性设置

loose: true

：

plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
]

此设置很重要，因为 Legacy: true 选项允许使用旧的装饰器语法，这是大多数使用装饰器的 React 和 Redux 代码库所需要的。

更改订单并添加旧/松散对后，您应该运行以下命令：

rm -rf node_modules
rm package-lock.json
npm install