babel-plugin-syntax-dynamic-import 不会转译答案

【问题标题】：babel-plugin-syntax-dynamic-import does not transpilebabel-plugin-syntax-dynamic-import 不会转译
【发布时间】：2018-08-15 13:32:03
【问题描述】：

我认为我正确配置了babel-plugin-syntax-dynamic-import，但它仍然无法转换我的动态导入。

节点：v8.11.3

package.json:

  ...
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    ...
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.js --open --hot --progress",
  ...
  },

  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-polyfill": "^6.26.0",
    ...
    "react-loadable": "^5.5.0",
    "whatwg-fetch": "^2.0.4"
  }

webpack.config.js：

...
{
  test: [/\.js$/, /\.jsx?$/],
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
  },
},
...

.babelrc

{
  "presets": ["env", "react", "stage-3"],
  "plugins": ["syntax-dynamic-import"]
}

AsyncComp.jsx：

import React from 'react';
import Loadable from 'react-loadable';

const Loading = () => (<div>Loading...</div>);

const LoadableComponent = Loadable({
  loader: () => import('./CompRaw'),
  loading: Loading,
})

export default class AsyncComp extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}

执行yarn dev 会导致：

/home/somepath/src/components/AsycnComp.jsx
  7:17  error  Parsing error: Unexpected token import

为什么动态import() 没有被转译？我该如何解决？

【问题讨论】：

看这里：stackoverflow.com/a/48001697/2352587
它在客户端上运行，所以我不需要动态导入节点。但是，我再次尝试了它，它并没有改变任何东西。

标签： reactjs webpack babeljs

【解决方案1】：

啊，好吧！我想你还需要react-loadable/babel。请参阅此处的讨论：https://github.com/jamiebuilds/react-loadable/pull/35#issuecomment-337156641

【讨论】：

感谢您的帮助，但是使用react-loadable/babel 作为 babel 插件仍然不能解决问题。我尝试在 .bablerc 和 webpack babel-loder 选项中添加它。我也自己尝试过，并与babel-plugin-syntax-dynamic-import
我试过他们的例子，对我来说效果很好。 react-loadable/babel 也是可选的。
感谢您的验证！那么它一定是别的东西。
这是 eslint 的错误配置（请参阅自己的答案）。谢谢！

【解决方案2】：

配置良好，错误源于使用eslint-loader，但未安装babel-eslint插件，该插件将支持动态导入。

这解决了问题

yarn add babel-eslint -D

.eslintrc

{
  ...
  "parser": "babel-eslint"
}

【讨论】：