Question

BLUF

我有一个具有以下依赖项的应用程序

ProjectX (web app)
    └ ProjectY (custom package)
        └ rc-tooltip@3.5.0

将ProjetX与Webpack 1捆绑在一起时，一切正常，没有错误。但是，当升级到Webpack 4时，ProjectY中使用的rc-tooltip组件会引发以下运行时错误：

warning.js：33警告：React.createElement：类型无效 - 期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：对象。

详细信息

在ProjectY中，工具提示的导入方式如下：

const Tooltip = require("rc-tooltip);

<div>
  <Tooltip all-my-props>
    my content
  </Tooltip>
</div>

在Webpack 1和4下，rc-tooltip Tooltip的创建最初看起来是相同的：

React.createElement(Tooltip, my-props, my-childern):

但是，通过控制台检查工具提示会发现主要差异。

在Webpack 1下：

> Tooltip
  ƒ Tooltip() {
    var _ref;
    var _temp, _this, _ret;
    (0, _classCallCheck3['default'])(this, Tooltip);
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _…

在Webpack 4下：

> Tooltip
  {default: ƒ, __esModule: true}default: ƒ Tooltip()__esModule: true__proto__: Object

似乎在Webpack 4下我没有收到正确的信息出口类。事实上，在控制台上我可以创建一个新的React 元素没有错误

React.createElement(Tooltip.default, my-props, my-childern):

为什么Webpack 4会改变我的应用程序中包的表示方式？这是一个配置问题，我错过了什么？

Webpack 4配置

// webpack.common.js
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: "./src/app/main.ts"
  },
  output: {
    filename: "[name].[hash].bundle.js",
    publicPath: "./",
    libraryTarget: "amd"
  },
  resolve: {
    extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },
  module: {
    noParse: [/html2canvas.js/],
    rules: [
      //typescript
      {
        test: /\.tsx?$/,
        loader: "ts-loader"
      },
      // css
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      // images
      {
        test: /\.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
      },
      // fonts
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader:
          "url-loader?limit=10000&name=fa/[hash].[ext]&mimetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader?name=fa/[hash].[ext]"
      }
    ]
  },
  externals: [
    function(context, request, callback) {
      if (
        /^dojo/.test(request) ||
        /^dijit/.test(request) ||
        /^esri/.test(request)
      ) {
        return callback(null, "amd " + request);
      }
      callback();
    }
  ],
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "index.ejs",
      inject: false
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

// webpack.dev.js
const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map"
});

Answer 1

我能够通过更改

中的导入语法来解决问题

const Tooltip = require("rc-tooltip);

到

import Tooltip from "rc-tooltip";

虽然这个解决方案有效，但我还是不接受这个答案，因为它没有解释为什么Webpack 4使用原始导入语法产生不正确的输出。

警告：使用Webpack 4

BLUF

详细信息

Webpack 4配置

1 个答案: