compilerOptions/jsxImportSource not parsed by nextjs framework

[rmarquois]

Summary

I'm working on creation of a Design System based on universal React Native components. I'm using NativeWind (V4) to style my components in the Tailwind CSS way. It's ok and it's work really well in an Next JS app (using next/expo-adapter) and in an Expo app.

I tried to create a Storybook app to preview my components. Init has been done using storybook nextjs framework with the following config in main.ts :

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {
  framework: {
    name: '@storybook/nextjs',
    options: {
      builder: {
        useSWC: true, // force SWC build
      }
    },
  },
  swc: (config) => { // set a custom swc config
    return {
      ...config,
      jsc: {
        transform: {
          react: {
            runtime: 'automatic',
            importSource: 'nativewind',
          },
        },
      },
    }
  },
  stories: [
    '../stories/**/*.mdx',
    '../../../packages/ui/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-styling-webpack',
    '@storybook/addon-themes',
    '@storybook/addon-react-native-web'
  ],
  docs: {
    autodocs: true,
  },
}

export default config

NativeWind V4 requires the following configuration to get it works :

The JSX runtime is changed to 'automatic' and jsxImportSource set to 'nativewind'

I tried two things :

• set compilerOptions.jsxImportSource = "nativewind" in my tsconfig.json
• force SWC build and set a custom swc config (see in main.ts earlier)

It doesn't work at all. So I decided to go inside the @storybook/nextjs and I saw that swc loader does not read custom swc config.

I created a patch and It's work but I think it's very ugly.

I added this in loader.ts :

swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
bundleTarget: 'default',
+ swc: await options.presets.apply("swc", {}, options)

And this in next-swc-loader-patch.ts :

  swcCacheDir,
  serverComponents,
  isReactServerLayer,
+ swc
} = loaderOptions;

...

const programmaticOptions = {
  ...swcOptions,
+ ...swc,
  filename,

I need help to try to understand if there is a bug in Storybook or if I made mistakes in my config.
Thanks.

Additional information

No response

Create a reproduction

No response

[valentinpalkovic]

Hi @rmarquois

Thank you for opening this discussion.

Custom swc options are indeed currently not passed in into the Next.js loader. Can you point me to the Next.js documentation where you can pass in custom SWC options to Next.js? I am bit confused, because I can't find your recommended settings on https://docs.expo.dev/guides/using-nextjs/. Does the expo adapter configure everything under the hood? Could you give me some further context?

[rmarquois]

Hi @valentinpalkovic and thank for your response.

Actually I need to set jsxImportSource to "nativewind" using TypeScript tsconfig.json to compile the project in the Next.js way and set style with NativeWind (see here).

Configuration works in a isolated Next.js project but not with Storybook.

While browsing the Storybook documentation, I saw that we can force SWC compilation and set a custom config (see here). I thought that it was the only way to put my NativeWind config but maybe I'm wrong.

[valentinpalkovic]

I have found the issue! We are not passing any ts or jsconfig into the swc loader. I try to fix this asap. I will let you know as soon as this is fixed.

[valentinpalkovic]

I have created a PR to fix this! #25203

[rmarquois]

Thanks !

[valentinpalkovic]

The PR is merged and will be part of the next 8.0.0 alpha release