无法使用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
我目前不知道问题出在哪里,我期待着尝试的建议。