UI 4 incompatible with Next.JS

[McManning]

Failed to compile
./node_modules/@osuresearch/ui4/dist/form/Lookup/index.scss
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm

Also as an aside, bytes was needed for form/Upload/Input/index.js and missing from dependencies.

[McManning]

Yea looks like I missed one - https://github.com/osuresearch/ui/blob/main/src/form/Lookup/index.tsx#L20

Need to take an inventory of what other imports may still be lingering in there.

[helloLilyX]

[github-actions[bot]]

:tada: This issue has been resolved in version 4.9.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[McManning]

Unfortunately, this doesn't look to just be an imports issue. Since we have scripts with side effects, they're also getting executed incorrect on the serverside. E.g.

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:///home/chase/orapps/wwwroot/next-review/node_modules/@osuresearch/ui4/dist/internal/jQueryPluginChanges.js (4:1)
Module._compile
node:internal/modules/cjs/loader (1155:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1209:10)

I think for now I'm just going to go with doing a dynamic import in Next for anything that's dependent on UI 4. I thought wrapping the app as a whole with a custom NoSSR component would work but it doesn't seem like that's the case here when the packages also have side effects like the above.

[McManning]

Closing this as a non-issue since we've stopped using UI 4 with Next. Any use cases we had for it are tightly isolated to late imports.