0

I'm trying to use the @lit/localize library. I have followed the documentation https://lit.dev/docs/localization/overview/

I've also looked at the sample application https://github.com/lit/lit/tree/main/packages/localize/examples/runtime-ts

What I'm struggling with is that when I pass a parameter for language (http://localhost:3001?locale=es-419) I get the following error

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

What I have noticed is that if I pass the default language of "en" in the URL the screen loads fine. If i pass junk locale it will give me a different error saying invalid locale code.

It feels like for some reason my locale*.js file is not being built into the project properly. I have followed the link in the comments and tried to add the extensions. But that does not work either

module.exports = (env, argv) =>
    merge(customConfigs(env, argv), {
        resolve: {
            extensions: ['.ts', '.js'],
        }
    });
Brian S
  • 3,096
  • 37
  • 55
  • Have you run `lit-localize build`? and make sure your config has the correct outdir and mode. – Augustine Kim Jul 06 '23 at 18:02
  • It builds without error. I have added my lit-localize.json file. – Brian S Jul 06 '23 at 18:35
  • It's hard to say without seeing the whole project. Do you see the file generate after running the build command? If so this could be webpack failing to resolve the `.js` extension so checkout https://stackoverflow.com/a/67929013/19498660 – Augustine Kim Jul 06 '23 at 22:25
  • @AugustineKim I re-wrote the question with the issue I'm having now. I feel I'm closer, but still missing something – Brian S Aug 01 '23 at 19:19
  • There are a lot of other moving parts that are not shown here. Check the outputDir in lit-localize.json, and see if that's actually in your project directory after running. Does that path match with what you're doing in configureLocalization call? Is your dev server configured to serve those files? – Augustine Kim Aug 03 '23 at 00:51
  • I enedd up figuring out the problem was that the example uses a mixture of *.ts & *.js. Once I figured that out, and made sure that the files matched the imports and usage, things worked much better. – Brian S Aug 10 '23 at 11:45

0 Answers0