Cannot use import statement outside a module

[AaronLayton]

What am I missing here folks, I still can't get imports() to work due to _vitePreload being an import {} statement

const __vite__fileDeps=["assets/js/index2.js","assets/js/_virtual_reload-on-update-in-view.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
import { _ as __vitePreload } from "../../../assets/js/preload-helper.js";
__vitePreload(() => import("../../../assets/js/index2.js"), true ? __vite__mapDeps([0,1]) : void 0);
console.log("content loaded");
//# sourceMappingURL=index.js.map

I have read up on
https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/160

[github-actions[bot]]

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

[Jonghakseo]

Was this PR not helpful?

[AaronLayton]

I am using an earlier version of this repo before it changed to a turbo-repo. I am pretty sure I tried the changes in the mentioned PR but I will happily give it another go this evening or tomorrow and report back

[PatrykKuniczak]

I am using an earlier version of this repo before it changed to a turbo-repo. I am pretty sure I tried the changes in the mentioned PR but I will happily give it another go this evening or tomorrow and report back

Feel free to ask.

Maybe you want to update from legacy to the latest version?

[AaronLayton]

I would do, but I included the old version in an already turbo-repo'd project. It was nice having it all contained in the 1 place and me just sharing UI between my NextJS project and the Extension. I've not gotten around to testing this again just yet, but I will strive to do it today so we know if we can close this issue

[PatrykKuniczak]

I would do, but I included the old version in an already turbo-repo'd project. It was nice having it all contained in the 1 place and me just sharing UI between my NextJS project and the Extension. I've not gotten around to testing this again just yet, but I will strive to do it today so we know if we can close this issue

I have read it 2 times, and i completely don't understand, what's the problem :)

You have tried to put legacy version into turbo-repo(latest) version and sth don't work.

And you need to share ui with NextJS app, i think it's other app which are other module in turbo-repo strucuture.

If I'm right in my thoughts, you still able to update that extension module, to the latest version, and i hope it will work.

As you describe above you will be testing it today, feel free to ask us, for more help :)

[PatrykKuniczak]

@AaronLayton Works? 🚀

[AaronLayton]

Ok so my simplified setup

src/pages/content/index.ts

import('@/pages/content/ui');

console.log('content loaded');

src/pages/content/index.ts

import { createRoot } from 'react-dom/client';
import App from './app';
import refreshOnUpdate from "virtual:reload-on-update-in-view";

refreshOnUpdate('pages/content');

const root = document.createElement('div');
root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';

document.body.append(root);

const rootIntoShadow = document.createElement('div');
rootIntoShadow.id = 'shadow-root';

const shadowRoot = root.attachShadow({ mode: 'open' });
shadowRoot.appendChild(rootIntoShadow);

createRoot(rootIntoShadow).render(<App />);

src/pages/content/app.tsx

import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    console.log('content view loaded');
  }, []);

  return <div className="">content view</div>;
}

---

Updated customDynamicImport to

import type { PluginOption } from 'vite';

export default function customDynamicImport(): PluginOption {
  return {
    name: 'custom-dynamic-import',
    renderDynamicImport({ moduleId }) {
      if (!moduleId.includes('node_modules') && process.env.__FIREFOX__) {
        return {
          left: `import(browser.runtime.getURL('./') + `,
          right: ".split('../').join(''));",
        };
      }
      return {
        left: 'import(',
        right: ')',
      };
    },
  };
}

---

Output file throwing error

chrome-extension:///src/pages/content/index.js

const __vite__fileDeps=["assets/js/index2.js","assets/js/_virtual_reload-on-update-in-view.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
import { _ as __vitePreload } from "../../../assets/js/preload-helper.js";
__vitePreload(() => import("../../../assets/js/index2.js"), true ? __vite__mapDeps([0,1]) : void 0);
console.log("content loaded");
//# sourceMappingURL=index.js.map

[PatrykKuniczak]

@AaronLayton

Import should starts with @pages, you have @/pages.

And why did you refactor customDynamicImport?

[PatrykKuniczak]

@AaronLayton Feel free to reopen, if it's necessary 😄