React组件获取意外令牌<

时间:2019-05-29 20:04:19

标签: reactjs typescript

我有一个已创建的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/**/*"]
}

0 个答案:

没有答案