You may need an appropriate loader to handle this file type. plotly react-chart-editor examples custom

54 views Asked by At

https://github.com/plotly/react-chart-editor/tree/master/examples/custom
Error while running locally for the above open source.

Error Screen (https://i.stack.imgur.com/eoWbf.png)

Failed to compile.

./node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js
Module parse failed: Unexpected token (252:6)
You may need an appropriate loader to handle this file type.
| const visualOffsets = getVisualOffsets(element);

| rect = {
| ...clippingAncestor,
| x: clippingAncestor.x - visualOffsets.x,
| y: clippingAncestor.y - visualOffsets.y

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 엔트리 포인트 설정
  output: {
    filename: 'bundle.js', // 번들된 파일의 이름
    path: path.resolve(__dirname, 'dist'), // 번들된 파일의 경로
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
              presets: [ '@babel/preset-env', '@babel/preset-react' ]
          }
        },
      }, {
        test: /\.css$/,
          use: [{
                  loader: 'style-loader'
              },
              {
                  loader: 'css-loader'
              }
          ]
      },
    ],
  }
};

package.json

{
  "name": "custom",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "plotly.js": "^1.35.0",
    "react": "^16.2.0",
    "react-chart-editor": "latest",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/preset-env": "^7.23.8",
    "babel-loader": "^8.3.0",
    "babel-plugin-react-native-web": "^0.19.10",
    "css-loader": "^6.9.0",
    "ts-loader": "^9.5.1",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

.babelrc

{
    "presets": ["@babel/preset-env"]
}

webpack version

System:
OS: Windows 10 10.0.19045
CPU: (20) ia32 12th Gen Intel(R) Core(TM) i7-12700
Memory: 7.10 GB / 15.75 GB
Binaries:
Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (120.0.2210.121)
Internet Explorer: 11.0.19041.3636
Packages:
babel-loader: ^8.3.0 => 8.3.0
css-loader: ^6.9.0 => 6.9.0
ts-loader: ^9.5.1 => 9.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Code executed to resolve error

npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader@8
npm install --save-dev babel-plugin-react-native-web
npm install --save-dev css-loader ts-loader
npm install --save-dev babel-plugin-react-native-web
npm audit fix

0

There are 0 answers