使用导入类型时出现意外令牌

Posted 2023-02-21

【中文标题】使用导入类型时出现意外令牌

【英文标题】：Unexpected token when using import type

【发布时间】：2018-03-16 12:21:00

【问题描述】：

我从 create-react-app 中弹出，当我运行测试站点（使用 yarn start）时，我在使用 import type 时遇到问题。 Module parse failed: /project/src/web/MarkdownField.js Unexpected token (6:12) You may need an appropriate loader to handle this file type.

当我使用yarn flow 时，该过程完成且没有错误。

.babelrc

 "presets": ["flow", "es2015", "react", "stage-2"]

.flowconfig

[libs]
./flow-typed

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

[include]
./src/**

mdTypes.types.js

// @flow

import  propTypes  from 'redux-form';

export type FieldType = 
field: propTypes.fieldPropTypes
;

MarkdownField.js

// @flow
import React from 'react';
import PropTypes from 'prop-types';
import MDE from 'medium-editor';
import MeMarkdown from 'medium-editor-markdown';
import type  FieldType  from '../mdTypes.types';

class MarkdownField extends React.PureComponent<void, FieldType> 

package.json

"name": "project",
"version": "0.0.1",
"private": false,
"dependencies": 
    "medium-editor": "^5.23.2",
    "medium-editor-markdown": "^2.6.0",
    "react-markdown": "^2.5.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-form": "^7.0.4"
,
"devDependencies": 
    "autoprefixer": "7.1.2",
    "babel-cli": "^6.26.0",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.0.3",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "6.26.0",
    "chalk": "1.1.3",
    "eslint": "4.4.1",
    "eslint-config-react-app": "^2.0.1",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "^2.37.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.1.0",
    "flow-bin": "^0.56.0",
    "jest": "20.0.4",
    "react": "^16.0.0",
    "react-dev-utils": "^4.1.0",
    "react-dom": "^16.0.0"
,
"scripts": 
    "start": "node scripts/start.js",
    "test": "node scripts/test.js --env=jsdom",
    "build": "flow-remove-types src/ -d lib/",
    "prepublish": "yarn run build"
,
"jest": 
    "collectCoverageFrom": ["src/**/*.js,jsx"],
    "setupFiles": ["<rootDir>/config/polyfills.js"],
    "testMatch": [
    "<rootDir>/src/**/__tests__/**/*.js?(x)",
    "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": 
    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest"
    ,
    "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
    "moduleNameMapper": 
    "^react-native$": "react-native-web"
    ,
    "moduleFileExtensions": ["web.js", "js", "json", "web.jsx", "jsx", "node"]

有什么建议吗？

【问题讨论】：

尝试在没有type关键字的情况下导入。它会起作用吗？

【参考方案1】：

我们有类似的设置并且有同样的错误。您可能需要在.eslintrc 中添加用于 eslint 检查的 e 插件，如下所示：

  "extends": ["plugin:flowtype/recommended"],
  "plugins": [
    "flowtype"
  ]