无法使用craco在create-react-app中导入其他项目的组件

我在将组件从一个 React 项目导入另一个项目时遇到问题。这些问题似乎非常基本,但我真的很难弄清楚问题出在哪里以及实现我的目标的确切 craco 配置是什么。

导出项目

我正在导出App,这是一个功能性 React 组件。

源代码/索引.js

import App from "./App";
export default App;

我用craco主要是因为Tailwindcss和antd,这是配置文件:

craco.config.js

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");

const path = require("path");

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  webpack: {
    plugins: [
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === "development"
        ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
        : []),
    ],
    configure: (webpackConfig, { env, paths }) => {
      paths.appBuild = webpackConfig.output.path = path.resolve("dist");

      webpackConfig.output = {
        ...webpackConfig.output,
        filename: "index.bundle.js",
        path: path.resolve(__dirname, "dist"),
        library: "library",
        libraryTarget: "umd",
      };

      webpackConfig.entry = path.join(__dirname, "./src/index.js");

      return webpackConfig;
    },
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "./src/styles/variables.less"
        ),
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

我正在使用 npm 发布我的包并将其导入到另一个项目中。这是 package.json 启动配置(出于隐私考虑删除了信息):

包.json

{
  "name": [company-repo-name],
  "version": "1.1.1-alpha16",
  "homepage": ".",
  "repository": [company-repo],
  "main": "dist/index.bundle.js",
  "publishConfig": {
    "registry": [company-registry]
  },
...

npm run build按预期工作并index.bundle.js在 dist 文件夹内生成一个。我不确定问题是否出在这里,但该文件充满了缩小的功能并且似乎没有导出任何内容。

消费者项目

通过 npm 安装导出项目工作正常,尝试导入App组件没有结果:

  • import App from [company-repo-name];给我{}(空物体)
  • import { App } from [company-repo-name]; 给我 undefined

我目前不知道问题出在哪里,我期待着尝试的建议。

以上是无法使用craco在create-react-app中导入其他项目的组件的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>