Incompatibility with rsbuild caused by Import attributes syntax

[abenhamdine]

Describe the bug

Rsbuild (based on rspack) is an incredibly performant builder : https://github.com/web-infra-dev/rsbuild It's more and more popular

There's an integration with storybook : https://github.com/rspack-contrib/storybook-rsbuild

Unfortunately, rspack does not support syntax Import attributes see https://github.com/web-infra-dev/rspack/issues/4358

and there's one here -> https://github.com/JesusTheHun/storybook-addon-remix-react-router/blob/e8b13193d2fe560ed76d64c274db8791a70cf7de/src/constants.ts#L2

thus using storybook-addon-remix-react-router causes the following compilation error with rsbuild :

  × JavaScript parsing error: Expected ';', got 'assert'
         ╭─[1:1]
       1 │ import { makeDecorator, addons } from '@storybook/preview-api';
       2 │ import P, { useState, useMemo, useCallback, useRef } from 'react';
       3 │ import de from '../package.json' assert { type: 'json' };
         ·                                  ──────
       4 │ import { createMemoryRouter, RouterProvider, UNSAFE_RouteContext, useLocation, useParams, useSearchParams, useNavigationType } from 'react-router-dom';
       5 │
         ╰────

I understand it's more an issue from the rsbuild side, but I wonder if this syntax is really necessary and if you could remove it ?

An imported thing to know is this syntax is only supported in V8-based engines, and its removal from the web is being investigated by tc39.

To Reproduce Describe all the steps required to reproduce the issue.

see https://github.com/rspack-contrib/storybook-rsbuild/issues/42

Additional context Add any other context about the problem here.

Environment Share the output of the following command :

Storybook Environment Info:

System: OS: Windows 11 10.0.22631 CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics Binaries: Node: 18.18.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD <----- active npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (123.0.2420.65) npmPackages: @storybook/addon-essentials: 8.2.2 => 8.2.2 @storybook/addon-interactions: 8.2.2 => 8.2.2 @storybook/addon-links: 8.2.2 => 8.2.2 @storybook/addon-onboarding: 8.2.2 => 8.2.2 @storybook/blocks: 8.2.2 => 8.2.2 @storybook/react: 8.2.2 => 8.2.2 @storybook/react-vite: 8.2.2 => 8.2.2 @storybook/test: 8.2.2 => 8.2.2 @storybook/test-runner: 0.19.0 => 0.19.0 chromatic: 11.5.4 => 11.5.4 eslint-plugin-storybook: 0.8.0 => 0.8.0 msw-storybook-addon: 2.0.3 => 2.0.3 storybook: 8.2.2 => 8.2.2 storybook-addon-manual-mocks: 1.0.4 => 1.0.4 storybook-addon-remix-react-router: 3.0.0 => 3.0.0 storybook-builder-rsbuild: 0.0.7 => 0.0.7 storybook-react-rsbuild: 0.0.7 => 0.0.7

[abenhamdine]

Ah I've just seen https://github.com/JesusTheHun/storybook-addon-remix-react-router/pull/55 so I guess it's not so simple to remove it...

[JesusTheHun]

@abenhamdine you guessed right, it's not so simple to remove it. Also, that's the path forward with javascript, so I don't plan going back on this. I'm going to close this as there is nothing I plan to do, and you can re-open it if you have some new information.

[abenhamdine]

I understand, no problem, thx for your reply !

[abenhamdine]

For future readers : a workaround is to compile this addon with rsbuild, with the following config :

rsbuildFinal: (config) => {
    return mergeRsbuildConfig(config, {
      source: {
        include: [
          /node_modules[\\/]storybook-addon-remix-react-router[\\/]dist[\\/]index.js/
        ]
      }
    })
  },