使用@lit/localize传递es-419参数时出现模块未找到错误

问题现象 #

• 遵循@lit/localize官方文档及runtime-ts示例配置后，访问http://localhost:3001?locale=es-419时出现模块找不到错误：

Cannot find module './es-419.js'
    at http://localhost:3001/asset-src_routable-components_UsersScreen_ts.js:54:11

• 默认语言en可正常加载，传入无效locale时会正确提示无效代码
• 已尝试在webpack配置中添加扩展名解析，但问题未解决，当前webpack配置片段：

module.exports = (env, argv) =>
    merge(customConfigs(env, argv), {
        resolve: {
            extensions: ['.ts', '.js'],
        }
    });

排查及解决方案 #

1. 验证语言包生成路径 #

确认lit-localize build生成的es-419.js文件是否存在于错误提示中的相对路径下（即与UsersScreen.ts同目录）。如果语言包生成在其他目录（比如单独的locales文件夹），需调整代码中的动态导入路径，例如将import(./${locale}.js)改为import(../locales/${locale}.js)，同时确保lit-localize.json的output.path指向正确的输出目录：

{
  "output": {
    "mode": "runtime",
    "path": "./src/locales"
  },
  "sourceLocale": "en",
  "targetLocales": ["es-419"]
}

2. 确保webpack正确处理动态导入 #

@lit/localize通过动态导入加载语言包，webpack需要明确识别这些模块并打包。可添加ContextReplacementPlugin限定动态导入的范围，避免webpack遗漏语言包文件：

const webpack = require('webpack');

module.exports = (env, argv) =>
    merge(customConfigs(env, argv), {
        resolve: {
            extensions: ['.ts', '.js'],
        },
        plugins: [
            new webpack.ContextReplacementPlugin(
                /src\/routable-components/, // 匹配UsersScreen.ts所在目录
                /^\.\/(en|es-419)\.js$/ // 指定需要打包的语言包文件
            )
        ]
    });

3. 检查webpack输出配置 #

避免webpack的output.filename或chunkFilename使用哈希值导致语言包文件名变化，比如如果配置了[name].[contenthash].js，会导致生成的语言包文件名带哈希，而@lit/localize仍按原名称es-419.js加载。需确保语言包文件保持原名称输出，或配置webpack的chunkFilename针对locale文件做特殊处理：

module.exports = (env, argv) =>
    merge(customConfigs(env, argv), {
        output: {
            filename: '[name].js',
            chunkFilename: (pathData) => {
                return pathData.chunk.name?.includes('locale') ? '[name].js' : '[name].[contenthash].js';
            }
        },
        resolve: {
            extensions: ['.ts', '.js'],
        }
    });

4. 确认语言包生成命令是否执行完整 #

检查是否每次修改翻译后都执行了lit-localize build命令，确保es-419.js是最新生成且存在的文件。

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