require is not defined error when using cjs dependency in page server files

[gryphonmyers]

Reproduction Steps

1. Ensure using vite-plugin-ssr@version 0.1.0-beta.21 with [email protected]
2. import any cjs dependency using require statements into a *.page.server.js file. E.g.:

// my-page.page.server.js
import { foo } from './bar';

export async function addContextProps() {}
export function setPageProps() {}

// bar.js
const baz = require('./baz')
exports.foo = baz

// baz.js
module.exports = 'foo';

3. Run dev server and visit page
4. Observe that Vite throws an error:

[vite] Error when evaluating SSR module /pages/bar.js:
  ReferenceError: require is not defined

Expected Results:
Commonjs dependencies should be transpiled to ES per Vite documentation and supported without throwing errors.

Notes:

• This may be entirely a Vite bug.
• This appears to be a regression since [email protected] and/or [email protected]

[gryphonmyers]

I can confirm updating vite to 2.1.3 while leaving vite-plugin-ssr at 0.1.0-beta.19 also yields this error

[brillout]

See vitejs/vite#2579.

Is using ES modules instead an option for you?

[gryphonmyers]

The exports is not defined error seems different. I was getting that one too and was able to work around by placing a exports = module.exports statement in my application. I was also getting that error with vite 2.1.2, which the author of the bug report was also using. This require is not defined error is more elusive and seems specific to vite 2.1.3. It doesn't have any workaround I can find, so for now I've reverted. I also can't find other people complaining about this on the vite issues, which is why I wondered if it might have something to do with the way page files are being loaded? I don't know if there is special handling in place that may have suffered from a Vite change in the last patch

[gryphonmyers]

Is using ES modules instead an option for you?

I mean, for this dependency, maybe, since it's one I control. But there are all kind of CJS packages on the npm registry that seem to be rendered unusable by this. If you're fairly confident it's not due to a problem with your plugin I can chase down a minimal repro to flag in the vite repo

[brillout]

packages on the npm registry that seem to be rendered unusable by this.

Not necessarily: Vite treats user-land code differently than node_modules code.

confident it's not due to a problem with your plugin

Yes I am; syntatic stuff is handled by Vite and vite-plugin-ssr doesn't do anything here.

chase down a minimal repro to flag in the vite repo

That would be great. You can start off https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue.

seems specific to vite 2.1.3

In case you want to dig deeper: vitejs/vite@v2.1.2...v2.1.3.

[gryphonmyers]

As far as I can tell, this is resolved in [email protected]