search

PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.66k stars 370 forks source link

Q: Error with Lazy Loading Components in Plasmo's Shadow UI #1024

Open tony-dominic opened 4 months ago

tony-dominic commented 4 months ago

What is the example you wish to see?

Hi there!

I'm experiencing an issue when trying to implement lazy loading for components using React.lazy within Plasmo's Shadow UI.

Is there any context that might help us understand?

Specifically, I'm unable to access my lazily imported route, and I keep encountering the following error:

  1. I set up a lazy-loaded component (House) within my Home component like this: 
    
import React, { lazy, Suspense } from 'react';
const House = lazy(() => import('./House'));

function Home() { return (

Home

Loading...
}>

); }


2. I'm using `createMemoryRouter` for routing.

**Expected Behavior:**

I expect the House component to load lazily without encountering the module resolution error.

**Actual Behavior:**

Instead, I receive the error mentioned above, suggesting that the dynamic import is not resolving correctly.

**Additional Context:**

I have confirmed that the path to House is correct.
I have tested static imports, which work fine, so the issue seems specific to lazy loading.

**Questions:**

Are there any known limitations or considerations regarding lazy loading components in Plasmo's Shadow UI?
What steps can I take to troubleshoot or resolve this issue?

Thank you for your help!

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct
- [X] I checked the [current issues](https://github.com/PlasmoHQ/plasmo/issues) for duplicate problems.
mouricef commented 3 months ago

Facing same issue while importing plasmo storage dynamically

reedjones commented 2 months ago

Not sure, but have you tried importing using the url/scheme syntax? import myFile from "url:./path/to/my/file/something.js"

The url: scheme will automatically resolve the something.js asset and add it to the web_accessible_resources declaration in the built bundle. The above myFile variable will be a string containing the URL to the asset:

see doc here: https://docs.plasmo.com/framework/content-scripts#importing-resources