reactjs - Webpacked 和转译的 JSX 导出不能在别处重新导入

Question

我正在尝试创建一个包含 JSX 的库，并使用带有 babel-loader 的 webpack 将其转换为可以重新导入并在其他地方使用的 CommonJS 模块。

其中一个 JSX 文件的示例如下所示

export const Item1 = (props) => (
  <div id={props.id}>   
  </div>
);

还有一个主要的入口点 index.js 就是这样做的：

import Item1 from '../jsx/item1'
import Item2 from '../jsx/item2'
...etc

export { Item1, Item2 }

然后我的 webpack.config.js 有这个

configs.push({
    entry: "./jsx/index.js",
    output: {
      path: path.join(__dirname, "dist"),
      filename: "jsx.js"
    },
    resolve: {
      extensions: [".js", ".jsx"]
    },
    module: {
      rules: [
        {
          use: 'babel-loader',
          test: /\.(js|jsx)?$/,
        },
      ]
    }
   }

它在运行时会在 dist 中生成一个名为 的文件jsx.js，据我所知，它看起来是正确的，它按预期包含了我所有的转译 JSX。我正在使用带有自动运行时的 @babel/react 预设。然后我将我main的 in设置package.json为指向这个 jsx.js 文件。

当我在另一个地方安装库并尝试使用它时，导入的项目只是空对象。

import { Item1, Item2 } from 'jsx-library'
console.log(Item1) // prints undefined
<Item1 />

最后一行得到错误Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

有任何想法吗？谢谢。

标签： reactjswebpackbabeljsbabel-loader