Блог

Поэтому я разветвил проект, чтобы добавить некоторые дополнительные функции, которых у него не было. У меня есть ссылка на мою вилку github в файле package.json, я удалил и обновил свои node_модули, а также удалил файлы.json с блокировкой пакетов.

Когда я запускаю команду npm запустить сборку, я получаю это сообщение.

Код, за исключением приведенного ниже, взят из пакета react-d3-graph.

 Failed to compile.

./node_modules/react-d3-graph/src/components/graph/Graph.jsx
SyntaxError: C:my-appnode_modulesreact-d3-graphsrccomponentsgraphGraph.jsx: 
Support for the experimental syntax 'jsx' isn't currently enabled (643:7):

  641 |
  642 |     return (
> 643 |       <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
      |       ^
  644 |         <svg name={`svg-container-${this.state.id}`} 
style={svgStyle} onClick={this.onClickGraph}>
  645 |           {defs}
  646 |           <g id={`${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`}
 {...containerProps}>

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd)
 to the 'plugins' section of your Babel config to enable transformation.
 

Я не совсем понимаю, почему он еще не включен.
Я также изменил свой webpack.config.js чтобы эта строка находилась в строке 468. Я также заметил, что в файле конфигурации есть babelrc: false, файл конфигурации:false, но я не уверен, для чего они предназначены.

 test: /.(js|mjs|jsx)$/,
 

Это мой файл .babelrc

 {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-react-jsx"
  ]
}
 

Вот моя посылка.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "main": "./build/index.js",
  "private": true,
  "dependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/plugin-proposal-optional-chaining": "7.6.0",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/preset-react": "7.9.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "csvtojson": "^2.0.10",
    "d3": "^5.5.0",
    "d3-selection": "^2.0.0",
    "papaparse": "^5.3.0",
    "react": "^16.4.1",
    "react-data-table-component": "^7.0.0-alpha-5",
    "react-dom": "^17.0.1",
    "react-file-reader": "^1.1.4",
    "react-request": "^3.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.2",
    "react-scroll-wheel-handler": "^2.0.1",
    "styled-components": "^5.2.1",
    "use-neo4j": "^0.3.5",
    "web-vitals": "^1.0.1",
    "webpack": "^4.44.2",
    "write-json-file": "^4.3.0",
    "xlsx": "^0.16.9",
    "xtypejs": "^0.7.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "api": "npx json-server --watch .\src\components\limit.json --port 8000"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
    "@babel/plugin-transform-react-jsx": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "axios": "^0.21.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "d3-drag": "^2.0.0",
    "d3-force": "^2.1.1",
    "d3-zoom": "^2.0.0",
    "react-d3-graph": "github:coolbrett/react-d3-graph",
    "react-modal": "^3.14.3",
    "react-router-scroll": "^0.4.4",
    "react-use": "^17.2.4"
  }
}