Compilation error "JavaScript parsing error: Expected ';', got 'assert'"

[abenhamdine]

I try to migrate from storybook/vite to storybook with rsbuild but I have a compilation error :

cross-env NODE_OPTIONS=--max-old-space-size=8192 storybook dev -p 6006

info => Serving static files from ./.\public at /
info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
start   Compiling...
info Using tsconfig paths for react-docgen
error   Compile error: 
Failed to compile, check the errors for troubleshooting.
× Conflict: Multiple assets emit different content to the same filename iframe.html

  × 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 │
         ╰────
      
  help: 
        You may need an appropriate loader to handle this file type.

excerp of package.json :

"@rsbuild/core": "1.0.1-beta.1",
    "@rsbuild/plugin-eslint": "1.0.0",
    "@rsbuild/plugin-react": "1.0.1-beta.1",
    "@rsbuild/plugin-type-check": "1.0.1-beta.1",
    "@rsdoctor/rspack-plugin": "^0.3.7",
    "@storybook/addon-essentials": "8.2.2",
    "@storybook/addon-interactions": "8.2.2",
    "@storybook/addon-links": "8.2.2",
    "@storybook/addon-onboarding": "8.2.2",
    "@storybook/blocks": "8.2.2",
    "@storybook/react": "8.2.2",
    "@storybook/react-vite": "8.2.2",
    "@storybook/test": "8.2.2",
    "@storybook/test-runner": "0.19.0",
    "msw-storybook-addon": "2.0.3",
    "playwright": "1.45.1",
    "react-test-renderer": "18.3.1",
    "storybook": "8.2.2",
    "storybook-addon-manual-mocks": "1.0.4",
    "storybook-react-rsbuild": "0.0.7",
    "storybook-addon-remix-react-router": "3.0.0",
    "resolutions": {
       "@storybook/csf": "0.1.11"
    },

storybook/main.ts

import { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  stories: [
    "../src/**/*.stories.@(ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    {
      name: "storybook-addon-manual-mocks/vite",
      options: {
        mocksFolder: "mocks",
      }
    },
    'storybook-addon-remix-react-router',
  ],
  framework: {
    name: 'storybook-react-rsbuild',
    options: {}
  },
  rsbuildFinal: (config) => {
    // see https://github.com/rspack-contrib/storybook-rsbuild#customize-the-rsbuild-config
    // Customize the final Rsbuild config here
    return config;
  },
  staticDirs: ['../public'],
  docs: {
    defaultName: "Docs",
    docsMode: false,
    autodocs: false,
  },
}

export default config

rsbuild config :

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'
import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
import { pluginEslint } from '@rsbuild/plugin-eslint'

const shouldUseRsdoctor = process.env.RSDOCTOR === 'true'

export default defineConfig({
  server: {
    port: 3001,
  },
  html: {
    title: "Application paie",
  },
  source: {
    entry: {
      index: './src/index.tsx',
    }
  },
  output: {
    distPath: {
      root: 'build'
    },
    cleanDistPath: true
  },
  plugins: [
    /** désactivé car prend trop de mémoire, souvent OOM */
    pluginTypeCheck({ enable: false }),
    /** désactivé car prend presque 30s lors du build */
    pluginEslint({ enable: false }),
    pluginReact()
  ],
  tools: {
    rspack(config, { appendPlugins }) {
      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
      if (shouldUseRsdoctor) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // voir https://rsdoctor.dev/guide/usage/rule-config pour la configuration des règles
            linter: {
              //  When set to `'Error'`, all rules will be executed
              level: 'Error',
              extends: [],
              rules: {
                'default-import-check': 'on',
                'duplicate-package': 'on',
                'loader-performance-optimization': 'on',
                // par défaut, c'est ES5, ce qui est trop bas pour notre app
                // et on ne peut changer que pour ES6 (trop bas aussi) ou ES7+ (tout ce qui ES7 ou plus) donc aucun intéret à garder la règle
                'ecma-version-check': "off",
              },
            },
          })
        )
      }
      config.experiments = {
        ...(config.experiments ?? {}),
        // https://www.rspack.dev/config/experiments#experimentslazycompilation
        // désactivé car ne semble pas fonctionner correctement
        lazyCompilation: false
      }
      return config
    }
  }
})

[chenjiahan]

Rspack does not support the import attributes syntax yet, you can remove the assert { type: 'json'} and it should work.

Related issue: web-infra-dev/rspack#4358

[abenhamdine]

Thx for you quick answer, but I've checked carefully and actually I don't have this syntax in my code.

[fi3ework]

It might be introduced in third party dependency. I checked the code in storybook-rsbuild and did not find the code. You could search the assert syntax in your node_modules.

[abenhamdine]

Ah thx, gotcha I've found it
It's in the code of storybook-addon-remix-react-router
https://github.com/JesusTheHun/storybook-addon-remix-react-router/blob/e8b13193d2fe560ed76d64c274db8791a70cf7de/src/constants.ts#L4

[abenhamdine]

I don't think the code can be removed from the third party addon, see JesusTheHun/storybook-addon-remix-react-router#68

Do you think of any mean to transfrom this code with rsbuild to remove this assertion ?

[fi3ework]

Try compiling the storybook-addon-remix-react-router code in node_moduels with Rsbuild https://rsbuild.dev/config/source/include#compile-npm-packages. You could narrow the range to the file that contains assert.

[abenhamdine]

Thx a lot @fi3ework ! ❤️

Indeed, it works fine with the following configuration :

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