Doesn't work with Vite 3

[brillout]

• Check if updating to the latest Preact version resolves the issue

Describe the bug

Preact doesn't work with Vite 3 (3.0.0-alpha.9).

To Reproduce

See https://github.com/brillout/preact-vite3.

CodeSandbox: https://codesandbox.io/s/github/brillout/preact-vite3

Expected behavior

Preact seems to inject a require statement which it shouldn't because Vite 3 is now ESM by default.

[JoviDeCroock]

This might be because of using the wrong entry in the export map, we only use import/export in our esm-bundles.

i.e.

• module file
• import file
• export maps

From the error message it looks like it's taking main or require of the export maps and then complains it doesn't have a .cjs extension.

I wonder if the issue resides in using the .mjs extension here

[brillout]

Thanks @JoviDeCroock for the answer.

The vite-plugin-ssr test suite tests a lot of integration, and only urql and preact are failing. That's why I'm leaning towards thinking it's a problem on preact's side.

The error, and grep require in dist/server/, are quite insightful.

[JoviDeCroock]

Yes, so I did run that and it looks like it's a transitive import issue when the jsx import is included so this issue could be located in the @preact/preset-vite repository.

This block of code generates the require I could find in your repro

var r = require("preact"), _ = 0;
function e(e2, o, n, t, l) {
  var u, f, i = {};
  for (f in o)
    f == "ref" ? u = o[f] : i[f] = o[f];
  var p = { type: e2, props: i, key: n, ref: u, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --_, __source: l, __self: t };
  if (typeof e2 == "function" && (u = e2.defaultProps))
    for (f in u)
      i[f] === void 0 && (i[f] = u[f]);
  return r.options.vnode && r.options.vnode(p), p;
}
exports.Fragment = r.Fragment, exports.jsx = e, exports.jsxs = e, exports.jsxDEV = e;
const jsx = void 0;
const jsxs = void 0;
const Fragment = void 0;
export { Fragment as F, jsx as a, jsxs as j };

It looks like the legacy import is used rather than the new one for reference, compare it to the main entry in the package.json here it's identical. To me this looks like the preact/jsx-runtime is being resolved to the require equivalent rather than the esm one, we aren't using type: module and our export-maps in the root are all pointing correctly 😅

[brillout]

Yes exactly that's the problematic require statement. I also tried to figure out why it's there but no clue 😅.

[JoviDeCroock]

As far as I can tell this is an issue with cjs-module-lexer and export * is missinterpreted by it, it does not see them as reexports. This was seen in urql as well urql-graphql/urql#2485

[JoviDeCroock]

Apologies that was accidental while mentioning this issue in the PR

[JoviDeCroock]

This might solve your issue as well @brillout #50