reactjs - React 不会被 Webpack 5 加载,而是在 4 中
问题描述
我制作了一个 React 组件库,它与 Webpack 4 配合得很好。当我升级到 Webpack 5 时,它仍然可以编译,但它给了我一些警告:
./src/index.tsx 6:24-35 中的警告在“@dlcm/dlcm-shared-modules”中找不到导出“GridContent”(导入为“GridContent”)(模块没有导出)
并在浏览器控制台中抛出此错误:
未捕获的类型错误:无法读取未定义的属性“组件”
它尝试使用 React.Component 类来扩展我的组件,但是
var React = __webpack_require__(/*! react */ "react");
回馈未定义。
// webpack.config from my library
const path = require('path');
module.exports = {
optimization:{
minimize: false, // <---- disables uglify.
// minimizer: [new UglifyJsPlugin()] if you want to customize it.
},
entry: './src/index.ts',
target: "web",
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
externals: {
'react': {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
umd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
umd: 'react-dom',
},
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
library: {
name: 'DlcmLib',
type: 'umd',
}
}
};
我导出 index.ts 中的组件
export { Button } from "./control/Button/Button";
...
...
例如,导入 React。像这样的按钮:
import * as React from 'react';
import './Button.scss';
export class Button extends React.Component<any, any> {
...
我使用的版本:
"devDependencies": {
"@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5",
"css-loader": "^5.2.6",
"html-webpack-plugin": "^5.3.1",
"http-server": "^0.12.3",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"webpack": "^5.38.0",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"@babel/core": "^7.14.3",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@dlcm/dlcm-shared-modules": "^1.0.0",
"babel-loader": "^8.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
(适用于 webpack 4.46.0)
我做错了什么?
解决方案
问题是线路
"type": "module",
在库的 package.json 中
我真的不明白问题和解决方案之间的联系是什么,所以如果有人有线索,请回复,我很好奇。
推荐阅读
- r - 根据 R 中其他 2 列的值减去特定值
- apache-spark - How to properly update the Spark SQL catalyst jar in a cluster
- linux-kernel - 为什么 arm atomic_[read/write] 操作实现为 volatile 指针?
- mysql - SQL Query to get most recent date of transaction
- postgis - pgr_dijkstra resulting dashline road
- c++ - 为什么编译器会跳过 for 循环?
- c++ - 如何在类声明中动态初始化变量,并且不是常量
- sql - 将计算公式添加到现有列
- python - python类的增量
- java - Java Fx 如何引用类中添加的元素