Reproduction of loading commonjs modules from nextjs in the browser

[kasperpeulen]

I moved cjsModuleRunnerPlugin to the minimal plugin, to see if that would solve common js issues in the browser example.

I could succesfully load marked and load this context provider from next:

import { PathnameContext } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'

But it gave cryptic messages for some other nextjs modules:

import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
import { publicAppRouterInstance } from 'next/dist/client/components/app-router-instance'

The error is:

app-router-context.s…me.js?v=9591181e:35 Uncaught TypeError: Cannot read properties of undefined (reading '_')
    at eval (app-router-context.s…js?v=9591181e:35:57)
    at async ESModulesEvaluator.runInlinedModule (module-runner.js?v=8935b260:905:3)
    at async ModuleRunner.directRequest (module-runner.js?v=8935b260:1112:59)
    at async ModuleRunner.cachedRequest (module-runner.js?v=8935b260:1030:73)
    at async eval (ContextProvider.tsx:6:31)
    at async ESModulesEvaluator.runInlinedModule (module-runner.js?v=8935b260:905:3)
    at async ModuleRunner.directRequest (module-runner.js?v=8935b260:1112:59)
    at async ModuleRunner.cachedRequest (module-runner.js?v=8935b260:1030:73)

It seems that the following module doesn't get loaded correctly:

const _interop_require_default = (await __vite_ssr_dynamic_import__("/@fs/Users/kasperpeulen/code/github/vite-plugin-react/node_modules/.pnpm/@swc+helpers@0.5.15/node_modules/@swc/helpers/esm/_interop_require_default.js?v=9591181e")).default;

So that the _ method is not defined:

const _react = /* @__PURE__ */
    _interop_require_default._((await __vite_ssr_dynamic_import__('/node_modules/.vite/deps_react_client/react.js?v=9591181e').then(m => ( (m$2) => m$2?.__esModule ? m$2 : {

[hi-ogawa]

Thanks for the repro. This looks like one of currently expected bugs in cjsModuleRunnerPlugin. I think some cjs module has require("@swc/helpers") and that's probably transformed to (await import(".../@swc/helpers/esm/...")).default, but this needs to be avoided somehow (probably either import(".../@swc/helpers/esm/...") without default or resolve it to import(".../@swc/helpers/cjs/...") + default).

[hi-ogawa]

I have fixes two issues #905 #908. Now it looks like vendor/react-server-dom/client.edge.js alias isn't working intended.

[hi-ogawa]

I appreciate the reproduction PRs. Additionally can you create a tracking issue which points to each reproduction?