Dynamic import issue when using react hook useEffect inside a remote component about esbuild

[evanw]

Sorry but I can't run the code in your git repo. Following those instructions (on GitHub Codespaces) gives the following error:

Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

Installing @rollup/rollup-linux-x64-gnu then results in the page failing to load with this network error:

Loading module from “https://{...}.app.github.dev/src/main.jsx” was blocked because of a disallowed MIME type (“”).

and with the page showing this error:

[plugin:vite:react-swc] Bindings not found.

/workspaces/codespaces-blank/react-useeffect-dynamic-import/app/src/main.jsx

    at Compiler.<anonymous> (/workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@swc/core/index.js:228:19)
    at Generator.next (<anonymous>)
    at /workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@swc/core/index.js:34:71
    at new Promise (<anonymous>)
    at __awaiter (/workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@swc/core/index.js:30:12)
    at Compiler.transform (/workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@swc/core/index.js:205:16)
    at transform (/workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@swc/core/index.js:347:21)
    at transformWithOptions (file:///workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@vitejs/plugin-react-swc/index.mjs:160:20)
    at TransformContext.transform (file:///workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/@vitejs/plugin-react-swc/index.mjs:79:30)
    at Object.transform (file:///workspaces/codespaces-blank/react-useeffect-dynamic-import/app/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:62

It seems like your code needs the @vitejs/plugin-react-swc plugin to run, which is not working. However, it sounds like this is probably a problem with some swc configuration instead of with esbuild in that case. Please either reproduce this issue without any libraries other than esbuild involved (so no vite, swc, rollup, etc.) or close this issue. I'm not going to help you debug your non-esbuild code.

[msantic]

Hey @evanw,

Thanks for taking the time to review the issue. I apologize for any confusion. I understand you're not going to debug non-esbuild code, but this repo actually has two separate servers and build processes: one for the main app and the other for remote components. While the main app was using Vite build, I believe the issue lies in the remote component build process which uses esbuild already.

To clarify, I completely removed any non-esbuild dependencies, and now esbuild is used on both sides: main app and remote component.

If you don't mind, could you try cloning and building once more with the full esbuild setup?

Rep https://github.com/msantic/react-useeffect-dynamic-import

I appreciate your time. Thank you.

[evanw]

When I run that code without minification enabled, it prints this to the console:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Perhaps you need to see https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem? Sorry, I'm not familiar with the parts of React that you are using. I'm guessing the problem is probably #3 (multiple copies of React) which you'd have to work around by not bundling it twice. For example, the host bundle could stash a reference to the React library on window.React and the imported bundle could load the React library from window.React instead of including it in the bundle.

[msantic]

@evanw, thanks a lot again for taking the time and pointing me in the right direction. With your suggestion, I was able to find a solution.

I'll put it here in case someone else has a similar request:

On the main app side, I exposed window.React as you suggested and passed hook functions as props to the remote controller. They could also be exposed globally, but I find this solution more elegant.

Host side:

window.React = React;

function loadRemoteComponent(componentName) {
  let RemoteComponent = lazy(() => importUserComponent(componentName));
  
  return (props) => {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <RemoteComponent {...props} useEffect={useEffect} useState={useState} />;
      </Suspense>
    )
  }
}

Remote component side

RemoteComponent.jsx

export default function RemoteComponent({useEffect, useState, ...props}) {
   ...
}

esbuild.config.js

import * as esbuild from 'esbuild'

await esbuild.build({
  entryPoints: ['./src/RemoteComponent.jsx'],
  bundle: true,
  format: 'esm',
  outfile: './dist/remotecomponent.js',
  external: ['react', 'react-dom'], // don't include react lib 
  minify: true,
})