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