Bug: Failing to build run storybook when importing RJSF

[jarrednorrisdev]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5..0.0-beta.12

Current Behavior

IN 5.0 Beta 12 (in beta 11 i do not encounter this error)
Upon running storybook within my react component library using RJSF and MUI...
If I include the following line in my component

import { withTheme } from '@rjsf/core';

and npm run storybook

I get the following error

ERROR in ./node_modules/@rjsf/core/dist/core.esm.js 808:31
Module parse failed: Unexpected token (808:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders  
|     // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
|     const schemaWithEnumNames = schema;
>     const enums = schema.enum ?? [true, false];
|     if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(v => typeof v === "boolean")) {
|       enumOptions = [{

Expected Behavior

Storybook should be able to compile the module and run without error

Steps To Reproduce

Package.json

{
  "name": "...",
  "type": "module",
  "version": "0.0.5",
  "description": "...",
  "main": "./dist/index.js",
  "scripts": {
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "build-lib": "rollup -c"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@emotion/babel-plugin": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.13",
    "@rollup/plugin-babel": "^6.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-commonjs": "23.0.2",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-webpack4": "^6.5.13",
    "@storybook/manager-webpack4": "^6.5.13",
    "@storybook/react": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@types/jest": "^29.2.2",
    "@rjsf/core": "^5.0.0-beta.12",
    "@rjsf/utils": "^5.0.0-beta.12",
    "@rjsf/validator-ajv8": "^5.0.0-beta.12",
    "@rjsf/mui": "^5.0.0-beta.12",
    "babel-jest": "^29.3.1",
    "babel-loader": "^8.3.0",
    "eslint": "^8.27.0",
    "eslint-plugin-jest": "^27.1.4",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-storybook": "^0.6.7",
    "jest": "^29.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.2.5",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": ["@emotion"]
}

storybook/main.js

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  framework: "@storybook/react",
  babelModeV7: true,
}

Environment

- OS: Windows 11 22H2
- Node: v16.18.0
- npm: 8.19.2

Anything else?

Hopefully this gives enough info, if more is needed I can provide

[tscanlin]

This was happening for me too. I worked around it at least temporarily by running this in a postinstall script:

"fix-install-3": "file1=./node_modules/@rjsf/core/dist/core.esm.js && sed -i.bak 's/??/||/' $file1",

[nickgros]

It seems like some part of your environment doesn't know how to handle that ES2020 feature, and your toolchain isn't transpiling your ESM dependencies to prevent that issue from happening. There's probably a cleaner configuration fix that you (or the Storybook maintainers) could apply, but I don't really know where to start there.

In #3304, we'd publish ES5-compatible code, which should be good enough to fix this for you, assuming RJSF is the only library not playing nice here.