Unexpected token when using import type

Question

I ejected from create-react-app and I am having problems using import type when I run the test site (using yarn start). Module parse failed: /project/src/web/MarkdownField.js Unexpected token (6:12) You may need an appropriate loader to handle this file type.

When I use yarn flow, the process completes without errors.

.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"]
}
}

Any suggestions?

Answer 1

We have a similar setup and had the same error. You may need to add e plugin for the eslint check in .eslintrc like this:

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