SSG build fails with SyntaxError when processing library with css import

[warmshadow]

Hey, started playing around with the plugin. I got a really minimal setup right now, one index.page.jsx and ssr({ prerender: true }) set inside vite config. My project uses library that imports css styles from react toastify. Build without plugin works as expected, but trying to build pre-rendered pages with plugin results in this error:

/myProject/node_modules/myLibrary/node_modules/react-toastify/dist/ReactToastify.css:1
:root {
^

SyntaxError: Unexpected token ':'
    at Object.compileFunction (node:vm:360:18)
    .....

Any idea what am I missing here?

[brillout]

What's the full stack trace?

[brillout]

Actually, the best would be a minimal reproduction. I'll have a look at it (there are several possible solution but I'd like to provide the most sensible one.)

[warmshadow]

No, that import statement is in my own custom library (myLibrary) that is a dependency to my vite project

[brillout]

If you add react-toastify to a VPS boilerplate/example, do you get the same error?

[warmshadow]

Ok I solved part of it, but found couple new issues.
As I mentioned it's not a problem with react-toastify itself, it just only happens that it was that specific import in my situation.

First of all this was an oversight on my end as my custom npm package was built only in CommonJS and had no ESM build files. As it worked in other projects and scenarios I didn't think about it right away.

I did a fresh test with VPS boilerplate project and to achieve successful pre-rendering of pages either one of two solutions work:

• Building ESM version of my library
  OR
• Workaround by adding ssr: { noExternal: ["myLibrary"]} to vite.config.ts

BUT. It only works work for pre-rendering pages.
If i want to run it as SSR it doesn't work, here are couple scenarios:

1. If my package is only CommonJS and I add ssr: { noExternal: ["myLibrary"]} then when I run server it works until I visit a page which imports from myLibrary - I get ReferenceError: require is not defined at /node_modules/myLibrary/dist/index.js:1:740.
2. Then after building my package as ESM code, when I run the server again and visit the same page, I get error from library's deeper 'react-is' dependency - ReferenceError: module is not defined at .../react-is/index.js:6:3. And here it doesn't matter if I add myLibrary to noExternal or not.

I'm not sure if I should continue here as it's probably a bit out of scope for this discussion, as it's a different problem. We can move to other discussion if needed. Though my question is - why do you think pre-rendering works fine with this setup and SSR server doesn't handle it? What should be done to fix it, as this time the package related to a problem is out of my reach?

[brillout]

There isn't a silver bullet here and in my experience the best is to actually dig and understand what's going on.

ESM/CJS compat is a mess and I'm afraid there isn't much VPS can do to help (although I've a couple of tricks in mind to make VPS workaround/alleviate the compat messiness a bit.)