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

[tony-dominic]

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 (
    <div>
      <h3>Home</h3>
      <Suspense fallback={<div>Loading...</div>}>
        <House />
      </Suspense>
    </div>
  );
}

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

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[mouricef]

Facing same issue while importing plasmo storage dynamically