jsxImportSource does not work with nextjs 12.0.8 and react 17

[daniellin215]

Hi, according to "https://theme-ui.com/guides/jsx-pragma#with-swc" I should be able to add "jsxImportSource": "theme-ui" to my tsconfig.json to configure JSX to use the automatic runtime (globally, for your entire app), and no longer need to use the custom pragma comments in your files. But after following the above I still get sx not found. I also tried (https://theme-ui.com/guides/jsx-pragma#using-nextjs) and (https://theme-ui.com/guides/jsx-pragma#using-typescript) above with no luck. Thanks!

[hasparus]

Hey @daniellin215, could you take a look at this CodeSandbox, I've just prepared for you:

https://codesandbox.io/s/theme-ui-simplest-nextjs-importsource-yhcbe?file=/pages/index.tsx

If looking at this doesn't help you, could you please provide a reproduction of your issue?

[daniellin215]

Hey @hasparus , thanks for the example. It looks like I have theme-ui and not @theme-ui/core in my package.json. After I uninstalled theme-ui and followed your setup, specifically the addition of "jsx": "preserve", "jsxImportSource": "@theme-ui/core" worked! (i did not have to have /** @jsxImportSource theme-ui */ at the beginning of each file that uses sx. However, without theme-ui, I am not able to import and use some components such as Box etc.

[hasparus]

Hey @daniellin215 theme-ui depends on @theme-ui/core, so you should have both in your node_modules.

theme-ui reexports JSX pragma from theme-ui core, so it "jsxImportSource": "theme-ui" should also work.

I forked the sandbox and changed @theme-ui/core to theme-ui for you so you can see it still works.

https://codesandbox.io/s/theme-ui-simplest-nextjs-importsource-forked-fm0qw?file=/pages/index.tsx

---

However, without theme-ui, I am not able to import and use some components such as Box etc.

• /core contains just the core functions and the basic context provider
• /components adds Box and the other guys
• /color-modes adds ColorModeProvider
• /mdx adds MDX handling
• theme-ui reexports everything in one package. It exports a ThemeProvider which is a composition of the ColorModeProvider, MDXProvider and the base context provider.