Laravel后端ReactJS应用懒加载报错：import关键字意外令牌

嘿，我看到你在Laravel+React的项目里尝试用asyncComponent实现按需加载时遇到了Unexpected token的错误，而且已经装了babel-plugin-syntax-dynamic-import还是没解决问题。作为React新手遇到这种配置问题确实头疼，我来帮你一步步排查解决：

问题根源 #

这个错误本质是Babel没有正确识别动态import()语法，同时你的Babel配置还缺少React预设，导致JSX和React相关语法也没被正确转译——哪怕你装了插件，没在配置里启用也白搭。

一步步解决 #

1. 修正你的.babelrc配置

你的.babelrc目前只配置了env预设，既没启用syntax-dynamic-import插件，也没有React预设。把它改成下面这样：

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "syntax-dynamic-import"
  ]
}

• 添加react预设是让Babel能解析JSX和React的类组件语法；
• 把syntax-dynamic-import放进plugins数组，Babel才会识别动态import()这个语法。

2. 检查你的asyncComponent实现是否正确

很多新手写asyncComponent时会忽略一个点：动态import()返回的模块里，默认导出的组件在cmp.default里，不是直接用cmp。给你一个标准的实现示例，你可以对照自己的代码调整：

import React, { Component } from 'react';

const asyncComponent = (importComponent) => {
  return class extends Component {
    state = {
      component: null
    }

    componentDidMount() {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default });
        });
    }

    render() {
      const C = this.state.component;
      // 这里可以换成你自己的加载中组件，比如一个Spinner
      return C ? <C {...this.props} /> : <div>加载中...</div>;
    }
  }
};

export default asyncComponent;

3. 重启构建命令

修改完配置后，先关掉当前运行的npm run watch或npm run dev，然后重新执行：

npm run dev

让Webpack重新读取新的Babel配置并编译代码，这时候语法错误应该就消失了。

额外小技巧：用Laravel Mix的内置React支持

其实Laravel Mix对React有专门的内置支持，如果你在webpack.mix.js里用mix.react()代替mix.js()来编译你的React入口文件，Mix会自动帮你配置好Babel的React预设和相关插件，可能连手动修改.babelrc都不需要。比如：

// webpack.mix.js
mix.react('resources/assets/js/app.js', 'public/js');

这样能省不少配置的麻烦，尤其适合React新手。

内容的提问来源于stack exchange，提问作者Rashi Karanpuria