使用CrafterCMS+TypeScript时遇Unexpected token 'export'错误求助

这个错误的核心原因是@craftercms/experience-builder@1.0.0-rc.3作为候选发布版本，可能未将TypeScript源码完全编译为Node.js/浏览器可直接执行的CommonJS/ES5代码，而你的TypeScript项目默认不会转译node_modules目录下的文件，导致运行时无法识别ES模块语法。

以下是可行的解决方法：

1. 配置打包工具转译该依赖包 #

根据你使用的打包工具，添加规则让它处理@craftercms/experience-builder：

如果你用Webpack #

在webpack.config.js的module.rules中添加转译规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
          // 加入该依赖包，让babel转译它
          path.resolve(__dirname, 'node_modules/@craftercms/experience-builder')
        ],
        use: 'babel-loader'
      }
    ]
  }
}

如果你用Vite #

在vite.config.ts中配置optimizeDeps和build选项：

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['@craftercms/experience-builder']
  },
  build: {
    commonjsOptions: {
      include: [/experience-builder/, /node_modules/]
    }
  },
  // 如果是Vue项目，还可以添加transpileDependencies
  // transpileDependencies: ['@craftercms/experience-builder']
})

2. 调整TypeScript配置（辅助步骤） #

确保tsconfig.json中没有错误排除必要文件，同时设置正确的模块解析方式：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  // 不要排除@craftercms/experience-builder，不过默认exclude是node_modules，所以主要还是靠打包工具转译
  "exclude": ["node_modules/**/*", "!node_modules/@craftercms/experience-builder/**/*"]
}

3. 更换依赖版本 #

由于你使用的是RC（候选发布）版本，存在未完善的可能性，尝试：

• 等待该包的正式稳定版本发布后升级
• 降级到该包更早的RC版本（如果有的话），或者检查@craftercms生态中其他包的版本兼容性，确保版本匹配

4. 临时手动转译（不推荐） #

如果以上方法都无效，可以手动转译该依赖包：

1. 进入node_modules/@craftercms/experience-builder目录
2. 安装babel依赖（npm i @babel/core @babel/preset-env @babel/preset-typescript -D）
3. 创建.babelrc配置文件：

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

4. 执行转译命令：npx babel src --out-dir dist
5. 修改该包package.json中的main字段指向转译后的dist/index.js

注意：这个方法只是临时解决方案，执行npm install后会被覆盖，需要重新操作。

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