typescript 精简React错误#321 - React类型脚本库构建

vd2z7a6w  于 2023-02-25  发布在  TypeScript
关注(0)|答案(1)|浏览(140)

我正在用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"
  }
}
shyt4zoc

shyt4zoc1#

TL;DR我以前遇到过这个问题。这个问题可能是由React的多个示例引起的。我从这里得到了解决方案:https://github.com/facebook/react/issues/16029#issuecomment-570912067
这就是我解决package.json和webpack配置问题的方法。
1.在包.json中:

  • react移动到devDependencies中。
  • peerDependencies中也加入react
{
  "name": "react-customize-token-input",
  
  // ... omit

  "peerDependencies": {
    "react": "^16.10.2 || ^17.0.0 || ^18.0.0"
  },
  "devDependencies": {

    // ... omit

    "react": "^17.0.2",

    // ... omit
  }
}

1.在网络包中:

  • externals中加入React
externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  },

示例https://github.com/seawind543/react-token-input/pull/7/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

相关问题