TypeError: Failed to fetch dynamically imported module

[chrisozgo99]

I'm getting the following error when trying to inject some HTML via this chrome extension boilerplate:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: chrome-extension://{my-extension-id}/assets/js/index.js

It only happens about 10% of the time, which is strange. I think it has something to do with the Vite configuration, although, it is difficult to debug with it only happening occasionally.

Might it have something to do with the customDynamicImport() function, or some other custom configuration of this boilerplate? Any help would be appreciated!

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[Jonghakseo]

Can you give me a little more information on what you mean by injecting some HTML?

[chrisozgo99]

@Jonghakseo sure! You can actually check out the entire repo here. The file in question is in src/pages/content/components/index.tsx. I'm adding a React component to a website (Gmail) specified by my content script.

Specifically, in that file, I'm add a React component via the addIconToComposeWindow() function inside the render() function.

As far as I can tell, the only file that is being dynamically imported is from your boilerplate code, here. Based on the comment in that file, it seems like this has to be done. But it also causes that error:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: chrome-extension://{my-extension-id}/assets/js/index.js

Again, it only happens about 10% of the time and seemingly at random so it's difficult to reproduce. But any ideas on how to fix the issue would be greatly appreciated.

[chrisozgo99]

As additional context, it seems like the only time this happens is upon making a file change. The webpage reloads automatically and executes the rollup (via the npm run dev script), but then if you don't reload the extension in the chrome://extensions/ webpage, it throws that error.

So I'm guessing this would not affect anything in production because there won't be any changes to the files, but it serves as a minor inconvenience in development.

I'm new to Vite and Chrome Extensions though, so if there is anything above that doesn't add up or make sense, please help me to understand.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lwh795]

I encountered the same problem on my vite project，has this problem been solved？

[Jonghakseo]

I apologise for the delay in responding. Let's take a look.

[lookis]

I found customDynamicImport doesn't work with await import, here is error:

src/pages/background/index.js:7681:16: ERROR: Expected ":" but found "dynamicImport"

Expected ":" but found "dynamicImport"
7679|                  const { FewShotPromptTemplate } = await
7680|          {
7681|            const dynamicImport = (path) => import(path);
   |                  ^
7682|            dynamicImport(
7683|            '../../../assets/js/few_shot.js')};

and this will resolve my problem

1. update vite >= 3.2
2. add modulePreload: false in vite.config.ts build part
3. change custom-dynamic-import.ts:

import type { PluginOption } from "vite";

export default function customDynamicImport(): PluginOption {
  return {
    name: "custom-dynamic-import",
    renderDynamicImport({ moduleId }) {
      if (!moduleId.includes("node_modules")) {  // <- dont modify any import from node_modules
        if (process.env.__FIREFOX__) {
          return {
            left: `
          {
            const dynamicImport = (path) => import(path);
            dynamicImport(browser.runtime.getURL('./') + 
            `,
            right: ".split('../').join(''))}",
          };
        }
        return {
          left: `
          {
            const dynamicImport = (path) => import(path);
            dynamicImport(
            `,
          right: ")}",
        };
      }
      return {
        left: "import(",
        right: ")",
      };
    },
  };
}

[Jonghakseo]

@lookis

I've been testing with the solution you suggested and it seems to be working well. I'll raise a PR to reflect it, unless you have any other comments.

• issue #157 #195

[Jonghakseo]

@all-contributors please add @lookis for bug

[allcontributors]

@Jonghakseo

I've put up a pull request to add @lookis! 🎉

[Jonghakseo]

@all-contributors please add @lookis for code

[allcontributors]

@Jonghakseo

I've put up a pull request to add @lookis! 🎉

[Jonghakseo]

@all-contributors please add @chrisozgo99 for bug

[allcontributors]

@Jonghakseo

I've put up a pull request to add @chrisozgo99! 🎉