Workaround wrongly published packages

[brillout]

Description

Examples:

• Vite4 regression - TypeError: Cannot read properties of undefined vitejs/vite#11299
• ESM build cannot be loaded by Node.js aws-amplify/amplify-ui#3155
• https://github.com/cyco130/vite-plugin-cjs-interop

[brillout]

• Module is a CommonJS module, which may not support all module.exports as named exports. #635

[brillout]

vitejs/vite#11299

[brillout]

#682

[brillout]

#700 (reply in thread)

[brillout]

• Move all user land to ESM in order to avoid:

  Error [ERR_REQUIRE_ESM]: require() of ES Module
  /home/rom/code/vite-plugin-ssr/node_modules/.pnpm/node-fetch@3.3.1/node_modules/node-fetch/src/index.js
  from
  /home/rom/code/vite-plugin-ssr/examples/graphql-apollo-react/server/index.js
  not supported.
  

[brillout]

CSS imports: #791.

[brillout]

CSS imports: #791.

Maybe, instead of automatically setting ssr.noExternal: add try-catch at ssrLoadModule() and tell user to add library to ssr.noExternal.

[brillout]

CSS imports: #791.

Maybe, instead of automatically setting ssr.noExternal: add try-catch at ssrLoadModule() and tell user to add library to ssr.noExternal.

Contribution welcome.

[brillout]

#830 (comment)

[brillout]

#872 (comment) (with reprod).

[brillout]

#901 (comment) (with reprod)

[brillout]

#934

[brillout]

Also ReferenceError: window is not defined

[brillout]

#571 (reply in thread) (with reprod)

[brillout]

add try-catch

Actually, this also works for teaching users about hydration mismatches.

And React's infamous Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined..

[brillout]

And React's infamous Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined..

Workaround for React's broken stack trace: #571 (reply in thread). Reprod: #571 (reply in thread).

[brillout]

https://github.com/brillout/vps-mui

[brillout]

Closing in favor of #984. The new plan should be a lot simpler than the current workaround.

[brillout]

#1021

[brillout]

#1023 (reply in thread) (includes repro)

[brillout]

Bun may come to the rescue: Bun's next release will work with Vite oven-sh/bun#250 (comment).

[brillout]

#1031 (reply in thread) (with reprod)

[brillout]

#1071 (reply in thread) (with reprod)

[brillout]

#1084 (isn't meant to run on the server-side)

[brillout]

#1080 (no reprod)

[brillout]

List of wrongly published npm packages here.

[brillout]

vue-toast-notification ESM-CJS issue: https://github.com/brillout/vite-esm-cjs-reprod (with reprod)

Showcases that Vite inconsistently adds the library to ssr.noExternal only in dev.

[brillout]

Vue + Map library: #1149 (reprod: https://github.com/brillout/vite-vue-cjs-esm-issue).

This one showcases an issue inside library code that the user cannot (easily) modify.

[brillout]

Vue + Primevue: #1153 (reply in thread) (with reprod)

Showcases that Vite inconsistently adds the library to ssr.noExternal only in dev.

This one showcases an issue inside library code that the user cannot (easily) modify.

Same here.

[brillout]

• If a package that contains __dirname is ssr.noExternal => error is thrown at runtime.
  • __dirname cannot be shimmed for files that are bundled.
    • Ideally an error should be thrown while building. (Maybe with a feature that enables whitelisting npm packages that contain __dirname but that are still working when ssr.noExternal.)
  • Stop noExternalizing linked dependencies by default vitejs/vite#9367

[lourot]

Preact+Redux+SSR:

• problem: Preact SSR: Cannot read properties of undefined (reading '__H') #1235
• reproducer: https://github.com/AurelienLourot/vike-preact-server-routing
• fix: Fix TypeError: Cannot read properties of undefined (reading '__H') JeffreyATW/vike-preact-server-routing#1

[brillout]

Reprod: https://github.com/brillout/esm-cjs-issue_react-image-gallery

• Following error was thrown by the onRenderHtml() hook defined at /renderer/+onRenderHtml.tsx Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
• Failed attempt to use ssr.optimizeDeps (see [SSR] Vite fails to process CJS npm packages vitejs/vite#14158 (comment)).
• CJS npm package.
• ssr.noExternal doesn't work, while https://github.com/cyco130/vite-plugin-cjs-interop works.
• Bun 1.0.28 isn't helping (exact same error).

[brillout]

Reprod: https://github.com/brillout/vike-lazyload-error-reproduction

• CJS npm package.
• ssr.noExternal doesn't work, while https://github.com/cyco130/vite-plugin-cjs-interop works.

[brillout]

React Native Web: #1637. This is the only one I couldn't manage to quickly fix (but maybe it's fixable by digging into the hook rule issue). I could workaround the server-side tranpsilation issues, but it then fails at a React hook issue. Reprod: #1637 (reply in thread).

This one is also interesting because it shows that using vite-plugin-cjs-interop with ssr.noExternal/ssr.optimizeDeps is far from trivial.