我正在用Typescript编写我自己的React库。我在构建和使用它时遇到了很多问题。我正在使用带有ts加载程序的Webpack将文件构建到lib
文件夹中。当我试图使用构建中的组件时
import React from 'react'
import { Text } from '../lib'
export default () => {
return <Text lg>Blabla</Text>
}
我收到错误
index.js:9未捕获的错误:简化React错误#321;请访问https://reactjs.org/docs/error-decoder.html?invariant=321以获取完整的消息,或者使用non-minified dev environment以获取完整的错误和附加的有用警告。
怎么了?
配置
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "esnext"],
"allowJs": true,
"outDir": "./lib/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"typeRoots": ["node_modules/@types"]
},
"include": ["src"],
"exclude": ["node_modules"]
}
网络包
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../lib'),
library: 'my-library',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [new CleanWebpackPlugin()]
}
package.json
{
"name": "my-library",
"version": "1.0.0",
"private": true,
"types": "lib",
"main": "lib/index.js",
"dependencies": {
"@types/node": "^14.0.11",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --mode development --open --hot --config config/webpack.dev.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"babel-loader": "^8.1.0"
}
}
1条答案
按热度按时间shyt4zoc1#
TL;DR我以前遇到过这个问题。这个问题可能是由React的多个示例引起的。我从这里得到了解决方案:https://github.com/facebook/react/issues/16029#issuecomment-570912067
这就是我解决package.json和webpack配置问题的方法。
1.在包.json中:
devDependencies
中。peerDependencies
中也加入react。1.在网络包中:
externals
中加入React示例https://github.com/seawind543/react-token-input/pull/7/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519