我创建了一个带有两个工作区‘Webmail’和‘Component’的Reaction项目.我在‘Component’中放了一个小的TSX文件,我想在‘Webmail’中使用它. 这是Component的Package.json:
{
"name": "@monorepo/component",
"version": "0.1.0",
"description": "Creating a component module project",
"main": "src/index.tsx",
"scripts": {
"dev": "webpack serve",
"build": "webpack"
},
"keywords": [
"react",
"component",
"npm"
],
"author": "Christine",
"license": "MIT",
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.18.6",
"@babel/register": "^7.12.10",
"babel-loader": "^9.1.3",
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
这是组件中的webpack.js
const path = require('path');
module.exports = {
entry: {
index: { import: "./src/index.tsx" }
},
output: {
path: path.resolve(__dirname, "dist"),
},
mode: "production",
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
}
这是"Mycrient":
import React from "react-dom";
interface ComponentProps {
label: string
}
export const MyComponent=({label, ...props}: ComponentProps)=> {
return (
<div>
<button>{label}</button>
</div>
);
}
这是使用MyComponent的tsx文件:
import './css/App.css';
import React from 'react'
import { MyComponent } from "@monorepo/component"
function App() {
return (
<div className="flex flex-col h-screen w-screen">
<nav className="nav">
<div className='flex-wrap flex justify-between w-4/6'>
<div className='flex-wrap flex '>
<MyComponent label='my button'/>
</div>
</div>
</nav>
</div>
);
}
export default App;
发生的事情是,webmail应用程序启动,然后抱怨,
ERROR in ../component/src/index.tsx 4:0
Module parse failed: The keyword 'interface' is reserved (4:0)
File was processed with these loaders:
* ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| import React from "react-dom";
> interface ComponentProps {
| label: string
| }
编辑: 如果我删除组件代码中的‘接口’,我得到的错误是
Module parse failed: Unexpected token (9:8)
File was processed with these loaders:
* ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| return (
> <div>
| <button>{label}</button>
| </div>
ERROR in ../component/src/index.tsx 9:8
如果我将组件中的"index.tsx"更改为"index.js",
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
不知何故,我想,巴别塔的react 预设并没有被接受.我已经try 将预设行放在Package.json、webpack.config.json或Babelrc.json中.我的配置有什么问题吗?
编辑: 我用this作为我的项目的例子. 我现在在本地重新创建了这个例子,它给我带来了与tsx组件相同的错误.在把这个
{
"compilerOptions": {
"target": "ES6",
"module": "ES2015",
"outDir": "dist",
"allowSyntheticDefaultImports": true,
"jsx": "react"
},
"include": [
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
在tsfig.js中,加上两个答案中建议的预设打字脚本行,问题就解决了,至少目前看来是这样.
我不能平分赏金,也不能分两份赏金,所以我会把赏金给第一个响应者,接受最细致的回答.