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.

[kenlyon]

@yejimeiming Any further progress?

[kenlyon]

@illuz @yejimeiming @youngleish

Does anyone have an update on this? I'm about to add another dynamic import to the same vite project and it would be nice if this problem was solved rather than increased.

[kenlyon]

I just tried upgrading to the latest version of es-module-lexer in case it had been fixed but I still get the same issue.