如何解决将使用TypeScript编写的React组件发布到npm,但是在导入时未定义
我试图将用TypeScript编写的自己的react组件发布到npm。我成功地发布了它,但是当我创建一个新的react项目并导入我构建的npm包时,发生了一些错误:
错误:元素类型无效:预期为字符串(对于内置 组件)或类/函数(用于复合组件),但得到: 未定义。您可能忘记了从文件中导出组件 是在其中定义的,或者您可能混淆了默认导入和命名导入。
但是我确信我没有滥用命名的出口和默认出口。 因此,我认为我的webpack配置或tsconfig可能有问题。
我的webpack.config.json
const path = require('path');
module.exports = {
mode: 'none',entry: path.join(__dirname,'src','index.tsx'),target: 'web',resolve: {
extensions: ['.ts','.tsx','.js','.jsx','.css']
},module: {
rules: [
{
test: /\.(ts|tsx)$/,use: "babel-loader",exclude: '/node_modules/',},{
test: /\.(ts|tsx)$/,use: 'awesome-typescript-loader',exclude: '/node_modules/'
},{
test: /\.css$/i,use: ['style-loader','css-loader'],],output: {
filename: 'index.js',path: path.resolve(__dirname,'dist')
}
}
我的tscongig.json
{
"compilerOptions": {
"outDir": "./dist","target": "es6","module": "commonjs","skipLibCheck": true,"allowSyntheticDefaultImports": true,"noImplicitAny": false,"strictNullChecks": false,"removeComments": true,"declaration": true,"declarationMap": true,"sourceMap": true,"isolatedModules": true,"esModuleInterop": true,"jsx": "react","typeRoots": [
"dist/index.d.ts","node_modules/@types"
]
},"include": [
"./src/*","exclude": [
"node_modules","dist"
]
}
package.json
{
"name": "myname","version": "1.0.42","description": "some text","main": "dist/index.js","types": "dist","scripts": {
"build": "webpack --config webpack.config.js --mode production"
},"repository": {
"type": "git","url": "some url"
},"author": "secret","license": "MIT","dependencies": {},"devDependencies": {
"@babel/core": "^7.12.3","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.1","@babel/preset-typescript": "^7.12.1","@types/react": "^16.9.53","@types/react-dom": "^16.9.8","@types/webpack": "^4.41.23","awesome-typescript-loader": "^5.2.1","babel-loader": "^8.1.0","css-loader": "^5.0.0","react": "^17.0.1","react-dom": "^17.0.1","style-loader": "^2.0.0","typescript": "^4.0.3","webpack": "^5.2.0","webpack-cli": "^4.1.0"
}
}
和我的入口点index.tsx
import someComponent from './someComponent';
export { someComponent };
并且我确定someComponent是从其他文件默认导出的。
有人可以帮我解决这个问题吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。