Remix与Vite环境导入报错：Unexpected token 'export'及lodash导出异常

针对你遇到的两个核心问题：

1. Import error: Unexpected token 'export'
2. Vite内部服务器错误：CommonJS模块lodash无Named export findIndex

核心原因是Vite对CommonJS（CJS）与ES模块（ESM）的混合处理兼容性问题，以及lodash本身是CJS模块无法直接支持ES命名导入导致的。以下是针对性解决步骤：

一、修正lodash导入方式 #

lodash作为纯CJS模块，不支持ES模块的命名导出语法，必须调整导入方式：

• 按需导入（推荐，减少打包体积）：

  import findIndex from 'lodash/findIndex'
  

• 整体导入后使用：

  import _ from 'lodash'
  // 使用时调用 _.findIndex(...)
  

禁止使用import { findIndex } from 'lodash'这类命名导入语法。

二、调整Vite配置，增强CJS模块兼容性 #

修改你的Vite配置文件，优化依赖预构建与SSR处理：

export default defineConfig({
    server: {
        port: 3000,
    },
    optimizeDeps: {
        include: ["lodash","@commercelayer/react-components"],
        // 强制将lodash预构建为ESM格式
        esbuildOptions: {
            define: {
                global: 'globalThis'
            },
            plugins: [
                {
                    name: 'lodash-esm-adapter',
                    setup(build) {
                        // 拦截lodash的导入请求
                        build.onResolve({ filter: /^lodash$/ }, args => ({
                            path: require.resolve('lodash'),
                            namespace: 'lodash-cjs-adapter'
                        }))
                        // 将CJS格式的lodash转换为ESM默认导出
                        build.onLoad({ filter: /.*/, namespace: 'lodash-cjs-adapter' }, async args => {
                            const fs = require('fs')
                            const content = fs.readFileSync(args.path, 'utf8')
                            return {
                                loader: 'js',
                                content: content.replace(/module.exports = _,?/, 'export default _')
                            }
                        })
                    }
                }
            ]
        }
    },
    // 开启SSR不外部化，确保依赖被正确转换
    ssr: {
        noExternal: ["@commercelayer/react-components", "lodash"]
    },
    plugins: [
        nodePolyfills(),
        remixDevTools(),
        remix({
            future: {
                v3_fetcherPersist: true,
                v3_relativeSplatPath: true,
                v3_throwAbortReason: true,
            },
        }),
        tsconfigPaths(),
    ],
    build: {
        sourcemap: true,
        commonjsOptions: {
            include: [/node_modules/], // 明确包含所有node_modules下的CJS模块
            transformMixedEsModules: true,
        },
    },
});

三、清理缓存并重启服务 #

执行以下操作确保Vite重新预构建依赖：

1. 删除项目根目录下的node_modules/.vite缓存文件夹
2. 停止当前开发服务，重新执行npm run dev（或你使用的包管理器启动命令）

四、排查@commercelayer/react-components的依赖问题 #

如果上述方案仍未解决，需要检查@commercelayer/react-components是否内部使用了错误的lodash导入方式：

• 查看该组件库的源码或文档，确认它是否支持ESM格式
• 如果组件库本身依赖CJS版本的lodash，可以尝试在optimizeDeps.esbuildOptions.plugins中添加类似的转换逻辑适配它

内容的提问来源于stack exchange，提问作者Leonel Matias Domingos