v11 build errors

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

1. Remove react-flow-renderer
2. Add reactflow
3. Change import package names
4. 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

[Bartel-C8]

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).

[cgross]

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