使用创建反应库的片段错误

Question

我正在尝试将我创建的 React 组件发布到 npm 中，所以我发现了 create-react-library，这是我第一次使用它，我正在尝试从 create-react-library 附带的测试文件夹中测试我的组件，它编译成功，但我的浏览器显示

未定义片段

当我使用 React 的<>片段时

Test 文件夹的package.json如下所示：

{
"name": "example-component",
"homepage": ".",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
},
"dependencies": {
"example-component": "file:..",
"react": "file:../node_modules/react",
"react-dom": "file:../node_modules/react-dom",
"react-scripts": "file:../node_modules/react-scripts"
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

和组件文件夹的package.json：

{
"name": "example-component",
"version": "1.0.0",
"description": "example",
"license": "MIT",
"repository": "ManuelMartinDev/example-component",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.13.1",
"react-router-dom": "5.2.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.3.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^3.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
}

Answer 1

长答案，CRL 不支持片段的短语法，您需要使用 React.Fragment https://github.com/transitive-bullshit/create-react-library/issues/243

Answer 2

1.你能尝试添加
a. import * 作为 React 从 'react' 或

b. 从 'react'
导入 React， { 片段， 组件 };(数字 2 是更好的选择(

1. 您是否尝试使用">
   "或？(作为战士(
2. 我也找到了这个答案，你可以试试吗？ https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

我刚刚看到路德维格尔回答他的答案可能更有用