React 不会被 Webpack 5 加载，而是在 4 中

Question

我创建了一个 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）

我做错了什么？

Answer 1

问题出在线路

"type": "module",

在库的 package.json 中

我真的不明白问题和解决方案之间的联系是什么，所以如果有人有线索，请回答，我很好奇。