The above dynamic import cannot be analyzed by Vite.

[kenlyon]

I have some code that dynamically loads the locale for use with the date-fns library:

const localeObj = await import(`date-fns/locale/${locale}/index.js`

I was able to use vite-plugin-dynamic-import to get this to work in the build by making the following changes to my vite.config.ts file:

1. I added the import:

   import dynamicImport from "vite-plugin-dynamic-import";

2. I added configuration for the plugin to the plugins array:

   plugins: [
   dynamicImport({
       loose: true,
       onFiles: (files: string[], id: string) => {
           if (id.includes("/MyFileName.tsx")) { // The file that contains the dynamic import.
               // I do not want to bundle anything in "_lib" folders.
               files = files.filter((file) => file.indexOf("/_lib/") === -1);
           }
           return files;
       },
   }),
   ...
   ],

3. This was more of a cosmetic step. I added the following to name the relevant chunks with a date-fns- prefix.

   build: {
   rollupOptions: {
       output: {
           chunkFileNames: (chunkInfo: PreRenderedChunk) => {
               if (
                   chunkInfo.moduleIds.some((moduleId: string) =>
                       moduleId.includes("date-fns")
                   )
               ) {
                   return "date-fns-[hash].js";
               }
               return "[name]-[hash].js";
           },
       },
   },
   },

   This works as intended when I perform vite build which is great! The problem is that when I try to start the project on my development workstation, it does not work.

When I perform yarn vite, the output shows my dynamic import followed by this message:

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

I can add a /* @vite-ignore */ comment to suppress the warning, but the dynamic import does not work.

It produces this error:

 TypeError: The specifier “date-fns/locale/az/index.js” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

Is there a way to get vite-plugin-dynamic-import to work when using vite to run the dev server?

[yejimeiming]

Can you provide a minimal reproduction repo?

[kenlyon]

@yejimeiming Sorry for the delay. Here is a project that I think is the leanest I could make that shows the problem.

date-fns-import-bug-vite.zip

• Unzip the folder.
• Inside the folder, execute these commands:
  • npm install
  • npm run dev
• Open the app in a browser. You will see the error message in the terminal output.

If you proceed to change selection on the drop-down list to attempt to change locales and you can see the console error that it failed to import it.

I should also note that while I thought my initial fix solved the production build, it didn't. It had succeeded in finding all the files but our production environment never managed to load those modules.

So really I have two problems, but we can focus on the one I initially posted first if you like.

[kenlyon]

In my attached example, the built version will work if you add base: "", to the vite configuration. That's why it wasn't working for me.

The dev environment continues to be a problem, though.

[kenlyon]

@yejimeiming Any update here?

[yejimeiming]

Looks es-module-lexer throw an error. I'm looking for a solution to this issue.