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 web-infra-dev/rspack#4358

and there's one here ->

storybook-addon-remix-react-router/src/constants.ts

Line 2 in e8b1319

import packageJson from '../package.json' assert { type: 'json' };

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 rspack-contrib/storybook-rsbuild#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 #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/
        ]
      }
    })
  },