javascript - Webpack bundle 未导出,无法导入
问题描述
我使用Create-React-app
. _ 然后我将它们捆绑在一起Webpack
并保存在我的 Git 帐户中。现在我在不同的目录中创建另一个项目(称为项目 B )。直接从 git下载项目 A。并尝试像这样使用它:
import React from 'react';
import ReactDOM from 'react-dom';
import { Main } from 'project-A/dist/main'
ReactDOM.render(<Main />, document.getElementById('root'));
我收到如下错误:
Element 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.
项目 A的 webpack如下所示:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
module.exports = [
{
/*Client Side*/
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: { minimize: true }
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename:"./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename:"[id].css"
})
]
}
]
我通过github研究并尝试更改名称导入,它仍然不起作用。
项目 A 的组件如下所示:
应用程序.js:
render() {
return (
<div>
{this.renderCodeAuthCard()}
{this.renderConfirmCard()}
{this.renderVerifyCard()}
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
显然 webpack 没有导出在项目 A 中创建的包文件。因为导入产生“ undefine
”。
我正在尝试找到一种方法来导出我的 webpack 捆绑文件并在另一个项目中使用它。
任何帮助将不胜感激
解决方案
这是因为您没有从Project Aindex.js
中导出任何东西。由导出函数安装的库。npm
index.js
推荐阅读
- objective-c - Error "request too large (413)" when trying to upload a PDF file to OneNote
- sql - 如何在 SQL 查询中添加条件语句?
- java - Java method return type acceptable for method argument [...]
- c++ - 编译器忽略运算符新分配
- javascript - 在页面加载时显示底部而无需任何滚动
- java - 扫描仪 noSuchElementException。它的原因是什么?我该如何解决?
- node.js - 如何进行对话流会话
- php - 计划队列作业对我不起作用。我找不到任何解决方案
- handlebars.js - 车把模拟开关(案例)
- javascript - 扩展错误:违反以下内容安全策略指令:“script-src 'self' 'unsafe-eval'”