xyflow: v11 build errors webpack4

Describe the Bug

I’ve just had a go at upgrading to v11 from v10 - I’m seeing 3 build errors. Current react version is 17.0.2, which you’ve indicated should be compatible? I don’t think I should be having to add new loaders no?

✖ ｢wdm｣:
ERROR in /node_modules/@reactflow/core/dist/esm/index.js 16:19
Module parse failed: Unexpected token (16: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/@reactflow/minimap/dist/esm/index.js 36:31
Module parse failed: Unexpected token (36: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
| function MiniMap({ style, className, nodeStrokeColor = '#555', nodeColor = '#fff', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, maskColor = 'rgb(240, 242, 243, 0.7)', position = 'bottom-right', }) {
|     const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
>     const elementWidth = style?.width ?? defaultWidth;
|     const elementHeight = style?.height ?? defaultHeight;
|     const nodeColorFunc = getAttrFunction(nodeColor);

ERROR in /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 = () => {
ℹ ｢wdm｣: Failed to compile.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Remove react-flow-renderer
Add reactflow
Change import package names
Rebuild

Expected behavior

I expected my application to build as before

Screenshots or Videos

No response

Platform

OS: Linux
Browser: Chrome - n/a

Additional context

No response

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 26 (9 by maintainers)

Most upvoted comments

For the ones using electron-webpack (using webpack 4, but obscuring config (which should make it easier, most of the time) some fixing code:

In your webpack.renderer.additions.js file:

const path = require("path")

module.exports = (config) => {
  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    include: path.resolve(__dirname, "node_modules/@reactflow"),
    use: {
      loader: 'babel-loader',
      options: { presets: ['@babel/preset-env'] } // Presets used for env setup
    }
  });
}

The trick above is that all node_modules are excluded by default in the (inaccessible) config. But to explicitly include @reactflow here in the rule.

If you don’t have a webpack.renderer.additions.js yet, create it and enable it in your package.json:

...
  "electronWebpack": {
   "renderer": {
     "webpackConfig": "webpack.renderer.additions.js"
   }
  },
 ...

In general, also for @cgross : Maybe adding an include rule is easier? include: path.resolve(__dirname, "node_modules/@reactflow")

As the regex does not work that great apparently on Windows… Maybe you could try (untested): exclude: /node_modules(?![\/\\]@reactflow)/ instead of exclude: /node_modules(?!\/@reactflow)/ to match both backward and forward slashes (for Windows).

Bartel-C8 on Oct 5, 2022

If you are using webpack 4, you need to install

npm i --save-dev babel-loader@8.2.5 @babel/preset-env @babel/preset-react @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator

and configure the loader like this:

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

in order to transpile reactflow correctly. With webpack 5 there shouldn’t be any issues.

moklick on Jul 4, 2023

Will webpack v5 automatically resolve this issue?

sumengwang on May 31, 2023

Thanks @Bartel-C8. I was able to get around it by padding the necessary babel plugins to process reactflow rather than excluding it.

cgross on Oct 7, 2022