我有一个已创建的React组件库,然后将其用于我拥有的React应用程序中。将组件之一添加到我拥有的React应用程序时,出现意外令牌错误>。
我尝试配置Babel。不过,我不确定该操作是否正确完成。
组件代码:
import * as React from "react";
export default class Button extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
public render() {
return (
<div>
<input type="button" value={this.props.name} />
</div>
);
}
}
错误:
./node_modules/@test/testing/dist/components/Button.js
SyntaxError: /Users/d/projects/myproj/node_modules/@test/testing/dist/components/Button.js: Unexpected token (23:15)
21 | }
22 | Button.prototype.render = function () {
> 23 | return <input type="button" value="test Button"/>;
| ^
24 | };
25 | return Button;
26 | }(react_1.Component));
Package.json:
{
"name": "@test/testing",
"version": "0.0.3",
"description": "The component library and framework required to build test modules.",
"main": "index.js",
"transform": {
"^.+\\.(ts|tsx)?$": "<rootDir>/node_modules/babel-jest"
},
"scripts": {
"build": "tsc"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/test/testing/issues"
},
"homepage": "https://github.com/test/testing#readme",
"dependencies": {
"@types/jest": "^24.0.13",
"@types/node": "12.0.2",
"@types/react": "16.8.17",
"@types/react-dom": "16.8.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"tachyons": "^4.11.1"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^1.9.0",
"@typescript-eslint/parser": "^1.9.0",
"awesome-typescript-loader": "^5.2.1",
"babel-jest": "^24.8.0",
"babel-preset-react": "^6.24.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-prettier": "^3.1.0",
"prettier": "^1.17.1",
"typescript": "^3.4.5"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"outDir": "./dist",
"jsx": "preserve"
},
"include": ["src/**/*"]
}