xyflow: Can't reexport the named export 'ReactFlow' from non EcmaScript module (only default export is available)

Describe the Bug

The below issue arises because we are first exporting everything from export * from '@reactflow/core'; once and then export { ReactFlow as default } from '@reactflow/core'; in the very next line making ReactFlow to be imported twice and exported twice.

./node_modules/reactflow/dist/esm/index.mjs
Can't reexport the named export 'ReactFlow' from non EcmaScript module (only default export is available)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install reactflow.
Import it in any package.
Make it executable either by attaching the component/screen using ReactFlow from reactflow with a route or by using inside any other component that comes in the execution/usage flow.
You should see the following error in console/terminal on running the application. Image:

Expected behavior

The expected behaviour is that reactflow package install and usage should not raise errors.

Screenshots or Videos

Platform

OS: Windows
Browser: Chrome
Version: 115.0.5790.171 (Official Build) (64-bit)

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 16 (5 by maintainers)

Most upvoted comments

I am able to make it compile with

{
    test: /node_modules[\/\\]@?reactflow[\/\\].*.mjs$/,
    type: "javascript/auto",
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', "@babel/preset-react"],
        plugins: [
          "@babel/plugin-proposal-optional-chaining",
          "@babel/plugin-proposal-nullish-coalescing-operator",
        ]
      }
    }
}

However ReactFlow seems to work in read-only mode. Nodes & edges show up but can not interact (zoom, move, connect…) them

same problem with me, and I have resolved it with your case, thx

imyuxh on Aug 15, 2023

I am able to make it compile with

{
    test: /node_modules[\/\\]@?reactflow[\/\\].*.mjs$/,
    type: "javascript/auto",
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', "@babel/preset-react"],
        plugins: [
          "@babel/plugin-proposal-optional-chaining",
          "@babel/plugin-proposal-nullish-coalescing-operator",
        ]
      }
    }
}

However ReactFlow seems to work in read-only mode. Nodes & edges show up but can not interact (zoom, move, connect…) them

(edited: sorry, ReactFlow works well, the non-interact error is from my own project code)

thanhbm-teko on Aug 15, 2023

Its a react project with react v17.0.1, webpack v4.x

Vite dev server works fine

nv08 on Aug 11, 2023