xyflow: Reactflow bundling error in storybook

Describe the Bug

When I install reactflow (v11.3.2) and use it in a story, the storybook server fails to start with the following errors:

ERROR in ./node_modules/.pnpm/registry.npmjs.org+@reactflow+minimap@11.2.2_sfoxds7t5ydpegc3knd667wn6m/node_modules/@reactflow/minimap/dist/esm/index.js 41:31
Module parse failed: Unexpected token (41: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
|     const svg = useRef(null);
|     const { boundingRect, viewBB, nodes, rfId, nodeOrigin } = useStore(selector, shallow);
>     const elementWidth = style?.width ?? defaultWidth;
|     const elementHeight = style?.height ?? defaultHeight;
|     const nodeColorFunc = getAttrFunction(nodeColor);
...

ERROR in ./node_modules/.pnpm/registry.npmjs.org+@reactflow+controls@11.0.6_sfoxds7t5ydpegc3knd667wn6m/node_modules/@reactflow/controls/dist/esm/index.js 43:17
Module parse failed: Unexpected token (43:17)
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
|     const onZoomInHandler = () => {
|         zoomIn();
>         onZoomIn?.();
|     };
|     const onZoomOutHandler = () => {
...

ERROR in ./node_modules/.pnpm/registry.npmjs.org+@reactflow+core@11.3.1_sfoxds7t5ydpegc3knd667wn6m/node_modules/@reactflow/core/dist/esm/index.js 43:19
Module parse failed: Unexpected token (43:19)
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
|
| function Attribution({ proOptions, position = 'bottom-right' }) {
>     if (proOptions?.hideAttribution) {
|         return null;
|     }
...

ERROR in ./node_modules/.pnpm/registry.npmjs.org+@reactflow+node-toolbar@1.0.1_sfoxds7t5ydpegc3knd667wn6m/node_modules/@reactflow/node-toolbar/dist/esm/index.js 8:42
Module parse failed: Unexpected token (8:42)
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
| import { createPortal } from 'react-dom';
|
> const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
| function NodeToolbarPortal({ children }) {
|     const wrapperRef = useStore(selector);
...

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install React Flow
Create a simple flow
Install storybook
Create a story that renders the react component with the simple flow
Run the storybook server

Expected behavior

I expected storybook to be able to bundle reactflow dependencies in my story

Screenshots or Videos

2022-12-07 13_04_32-Git Bash

Platform

OS: Windows
Browser: Not Relevant
Version: 11.3.2

Additional context

Note that a similar issue has also been reported by others on stackoverflow here: https://stackoverflow.com/questions/74423572/importing-reactflow-v11-causes-error-module-parse-failed-unexpected-token

Also note that we’ve had our storybook server running for almost a year now (meaning various other libraries and stories have been created so far). This error occurred after we started using reactflow, and if we comment out the <ReactFlow> component, the storybook server compiles successfully.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 30 (4 by maintainers)

Most upvoted comments

I had the exact same problem when adding react-flow to an existing project that uses Webpack 4. This added webpack rule solved it for me:

      {
        test: /\.js$/,
        include: /node_modules[\\\/]@?reactflow/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },

Basically, I needed to make sure that react-flow was parsed by babel. For some reason, the babel config wasn’t being loaded from .babelrc so I had to add the preset options here.

AdamGerthel on Mar 9, 2023

It seems like updating d3 version to 7.8.2, solved the problem

FYI inorder to incorporate reactflow to my library project which uses webpack4, storybook 6.3.3 and didn’t required @storybook/preset-create-react-app

I just had to add a rule for transpile reactflow using babel-loader i believe // webpack-extend.js
  config.module.rules.unshift({
    test: /\.js$/,
    include: /node_modules[\\\/]@?reactflow/,
    use: {
      loader: "babel-loader"
    }
  });
 

On my case, similar to this response i fixed up mine with the specific babel-loader for reactflow on webpack 4:

{
    test: /\.js$/,
    include: [
        path.resolve(__dirname, 'src'),
        /node_modules[\/]@?reactflow/
    ],
    use: {
        loader: 'babel-loader',
        options: {
            presets: [['@babel/preset-env', { 'modules': false }], '@babel/preset-react'],
            plugins: [ "@babel/plugin-proposal-class-properties" ]
        },
    },
}

Khedrak on Jan 23, 2023

I had the exact same problem and managed to fix it.

During compilation, I think more modern JS features such as the Nullish Coalescing Operator and Optional Chaining cause a bit of a commotion.

There are Babel plugins for dealing with them though, so I installed them: npm install --save-dev @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator

Then I declared them in a babel.config.rc file:

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

Then in the .storybook/main.js file, I added the rule @avishwakarmaplex prescribed earlier under webpack.

So ultimately my storybook main file looks like this:

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  webpack: async (config) => {
    config.module.rules.unshift({
      test: /\.js$/,
      include: /node_modules[\\\/]@?reactflow/,
      use: {
        loader: 'babel-loader',
      }
    });

    return config;
  },
  framework: '@storybook/react',
  core: {
    builder: 'webpack4',
  }
};

I hope this helps.

timto7 on Feb 22, 2023