Unable to use @instructure/ui in NextJS project

[monbrey]

Background Information

Package Version(s): @instructure/ui 8.37.0

Browser: N/A, compile time issue

OS: Windows 11

Device: Dell Inspiron

Component: All components

Describe the Bug

All components in the package cannot compile when using tooling such as NextJS due to the manner in which the JSX pragma is set in the components.

The components are currently setting /** @jsx jsx */, which will throw the error "pragma cannot be set when runtime is automatic" in a NextJS environment.

The Emotion CSS docs mention this: https://emotion.sh/docs/css-prop#jsx-pragma

If you are using a zero-config tool with automatic detection of which runtime (classic vs. automatic) should be used and you are already using a React version that has the new JSX runtimes (hence runtime: 'automatic' being configured automatically for you) such as Create React App 4 then /** @jsx jsx / pragma might not work and you should use /* @jsxImportSource @emotion/react */ instead.

I'm unsure if making this switch would have a negative impact elsewhere, but performing this replacement myself resolved the issue locally.

Steps To Reproduce

1. Create a new next.js application: npm create-next-app@latest my-app
2. Install the @instructure/ui package
3. Add a component from the package to the page
4. Run npm run dev to attempt to start the server

Expected Behavior

The application compiles and runs

Screenshots

Additional Information

Current Workaround(s): Replace /** @jsx jsx */ with /** @jsxImportSource @emotion/react */ in all components.

Are you willing to submit a PR to fix?

• [X] Yes, I'm willing to submit a PR

Requested Priority: Low

[matyasf]

hi! Sorry for the late reply. I've tried to reproduce this issue but could not do so. I've created a nextJS app, added InstUI as a dependency and added some InstUI components to the index.tsx page:

import {Alert, Button} from "@instructure/ui";

export default function Home() {
  return (
    <>
      <main>
        <Button>test button</Button>
        <Alert>test alert</Alert>
      </main>
    </>
  )
}

my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "next": "13.4.10",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6",
    "@instructure/ui": "^8.38.1"
  }
}

This seems to work fine, also we have some internal apps using Next.js and InstUI that are working too. Perhaps you can share a codesandbox to reproduce?

[HerrTopi]

Hi! We were able to reproduce the bug finally. We don't have a solution for this just yet, but there is a workaround for new NextJS projects:

In the CLI prompts, you could choose to want "src" folder. With that config, everything works.

We'll try to fix the issue in the meantime

[Kosa103]

Hi! I'm making a NextJS 14 app with Instui elements and receive the exact same error as OP posted. I'm using the 'app' folder and I'm also using an 'src' folder. Please note that Next14 is using SWC instead of babel. Advices I've found mentioned modifying the .swcrc ( .babelrc for older NextJS ) file but I didn't succeed. Note: Downgrading to NextJS 13 makes the issue go away but it persists in NextJS 14. Thank you for the help!

Here is a very simple codesandbox example to the issue: https://codesandbox.io/p/devbox/next14-app-instui-test-rz7mfv?file=%2Fsrc%2Fapp%2Fpage-client.tsx

Here is the docs for modifying SWC config in case you need it: https://swc.rs/docs/configuration/swcrc

Package Version(s): @instructure/ui 8.50.0

Browser: N/A, build time issue

OS: Linux, Ubuntu 22.04

Device: Asus Vivobook

Component: All components

[HerrTopi]

Hi! We've released a test version to see if we could fix this problem.

Could you try to install this version? https://www.npmjs.com/package/@instructure/ui/v/8.53.3-pr-snapshot-1709124298948 npm i @instructure/[email protected]

When you import something, like a button, make sure you use the "es" version of the build like so: import { Button } from "@instructure/ui-buttons/es/index.js";

Please tell me if it fixes the problems for you and if so I can finalise the changes