No flow in sight since v11 migration

[ggnu11]

What platform were you using when you found the bug?

• React Flow / Svelte Flow version: 11.11.3
• Browser and version: chrome
• OS and version:

react : "^17.0.2" react-scripts : "4.0.3", webpack "4.44.2" "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "babel-loader": "8.1.0",

Live code example

No response

Describe the Bug

A bug caused by upgrading from v10 to v11.

ReactFlow flow is not showing after changing 10 version of react-flow-render to 11 version

Steps to reproduce the bug or issue

https://codesandbox.io/p/sandbox/reactflow-9h9mfz?file=%2Fsrc%2Fcomponents%2FActionNode.tsx%3A1%2C44

Screenshots or Videos

Additional context

No response

[moklick]

Are you importing the styles https://reactflow.dev/learn/troubleshooting/migrate-to-v11#2-importing-css-is-mandatory?

[ggnu11]

No, I don't have a separate css like code sandbox Additionally, when I tried to check by running vscode, the token error occurred again. The webpack is as follows, but it worked last week, but it's strange that it suddenly doesn't work. Is the webpack configuration working well?

 webpack: {
      configure: (webpackConfig, { env, paths }) => {
        webpackConfig.module.rules.unshift(
          {
            test: /\.svg$/,
            use: [
              {
                loader: '@svgr/webpack',
                options: {
                  svgoConfig: {
                    plugins: [
                      {
                        removeViewBox: false,
                      },
                    ],
                  },
                },
              },
            ],
          },
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
          },
          {
            test: /node_modules[\/\\]@?reactflow[\/\\].*.mjs$/,
            include: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env', '@babel/preset-react'],
                  plugins: [
                    '@babel/plugin-proposal-optional-chaining',
                    '@babel/plugin-proposal-nullish-coalescing-operator',
                  ],
                },
              },
            ],
          }
        );
        return webpackConfig;
      },

[bcakmakoglu]

No, I don't have a separate css like code sandbox

You need to import the required styles. It's not an optional step.

[ggnu11]

Is it correct that I wrote the webpack setting without any problems? I added it according to the contents of the issue

Module parse failed: Unexpected token (44:38)
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 getPointerPosition = useGetPointerPosition();
|     const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
>     const controlPosition = position ?? defaultPosition;
|     useEffect(() => {
|         if (!resizeControlRef.current || !id) {

A token error is occurring just like before

reactflow : 11.11.3 webpack : 4.2.2 "react-scripts": "4.0.3", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "babel-loader": "8.1.0",

During the compilation process, the error occurred again and I can't see the screen. I'll try to correct the error and apply the style

I tried to upload the react-scripts version, but due to the time relationship, I am going to apply v11 first with the web pack 4 version

[bcakmakoglu]

The webpack config should include something 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",
      ]
    }
  }
}

yours has the file-ending mjs for some reason?

[ggnu11]

I used the mjs extension because I thought the reactflow was an extension of the JavaScript file using the ES6 module. Thanks to this, it was executed normally.

As you said, I added import 'reactflow/dist/base.css'; but the screen blinks a few times and then disappears. Previously, I made and used a reactflow style for 'import'./styles.css' like a code sandbox.

I've tried adding styles, but Nodes and edges are drawn on the screen for a while and then it doesn't show

import { Handle, Position } from 'reactflow';
import { Handle, Position } from 'reactflow';
import { MarkerType } from 'reactflow';

import './styles.css';  // before
import 'reactflow/dist/base.css'; //after

https://codesandbox.io/p/sandbox/reactflow-9h9mfz?file=%2Fsrc%2Fcomponents%2FCallFlow.tsx%3A19%2C1-19%2C23

[moklick]

@choiyounghun0712 please don't ask a question twice . I will close the discussion you opened https://github.com/xyflow/xyflow/discussions/4365

The codesandbox is working for me. There are just some styles missing for setting the height:

body,
html,
#root,
.App {
  height: 100%;
}

[ggnu11]

I'll look for the cause. Thank you