Single SPA React应用报错：LOADING_SOURCE_CODE状态下意外令牌'EXPORT'求助

常见原因及修复方案 #

• 模块语法错误或未转译
  JavaScript是大小写敏感语言，大写的EXPORT属于无效语法，先检查代码中是否存在拼写错误，将所有大写EXPORT改为标准小写export。
  若使用ES模块语法，需确保构建工具（webpack/vite）将代码转译为浏览器可识别的版本：

  • Webpack配置：添加babel-loader，配置.babelrc包含@babel/preset-env和@babel/preset-react：

    {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    

  • Vite配置：在vite.config.js中设置兼容目标浏览器的build.target，比如：

    export default defineConfig({
      build: {
        target: 'es2015'
      }
    })
    

• Single SPA生命周期配置错误
  子应用入口文件必须导出符合Single SPA要求的bootstrap、mount、unmount生命周期函数，示例代码：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import singleSpaReact from 'single-spa-react';
  import Root from './Root';
  
  const lifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: Root,
    errorBoundary(err) {
      return <div>应用加载出错：{err.message}</div>;
    },
  });
  
  export const bootstrap = lifecycles.bootstrap;
  export const mount = lifecycles.mount;
  export const unmount = lifecycles.unmount;
  

  同时确认父应用注册子应用时，entry地址指向构建后的正确产物文件，避免直接加载未转译的源码。

• 构建产物异常
  重新执行子应用构建命令，检查构建日志是否有报错，确保产物中不存在无效语法。若构建缓存导致问题，可删除node_modules/.cache或dist目录后重新构建。

• 浏览器缓存干扰
  强制刷新页面（Ctrl+Shift+R）或清除浏览器缓存，避免加载旧的、存在语法错误的缓存文件。

调试技巧 #

• 打开浏览器开发者工具Sources面板，定位报错的文件和行号，直接查看EXPORT出现的上下文，确认问题根源。
• 在子应用入口文件开头添加console.log('子应用入口加载')，验证文件是否被正确加载。

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