I'm getting this error every time I run npm run build

Failed to compile.

./node_modules/react-d3-graph/src/components/graph/Graph.jsx 698:6
Module parse failed: Unexpected token (698:6)
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
|
|     return (
>       <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
|         <svg name={`svg-container-${this.state.id}`} style={svgStyle} onClick={this.onClickGraph}>
|           {defs}

This is inside my forked repo of a JSX file Graph.jsx in the return. From what I can tell after doing hours of research, I'd added JSX to test in webpack.config.js so it has .(js|jsx). I've thought about adding other plugins or presets as well, but nothing I do seems to work. This is my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "main": "./build/index.js",
  "private": true,
  "dependencies": {
    "@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",
    "html-webpack-root-plugin": "^0.10.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",
    "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/core": "^7.16.0",
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
    "@babel/plugin-syntax-jsx": "^7.16.0",
    "@babel/plugin-transform-react-jsx": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "chart.js": "^3.5.1",
    "html-webpack-plugin": "^5.5.0",
    "react-chartjs-2": "^3.0.5",
    "react-charts": "^2.0.0-beta.7",
    "react-d3-graph": "github:<username>/react-d3-graph",
    "react-modal": "^3.14.3",
    "react-router-scroll": "^0.4.4",
    "react-use": "^17.2.4",
    "webpack": "^4.46.0",
    "webpack-bundle-analyzer": "^4.5.0"
  }
}

Here is my webpack.config.js

const webpack = require("webpack");
module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './client/client.js'
    ],
    output: {
        path: require('path').resolve('./dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    loader:
        'babel-loader',
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        "@babel/plugin-syntax-jsx",
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            }
        ]
    }
};

I've got no idea why an HTML tag is throwing the error really. This is my .babelrc

{
  "presets": [
    [ "@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": [
          "last 2 Chrome versions",
          "last 2 Firefox versions",
          "last 2 Safari versions",
          "last 2 iOS versions",
          "last 1 Android version",
          "last 1 ChromeAndroid version",
          "ie 11"
        ]
      }
    } ],
    "@babel/preset-react"
  ],
  "plugins": [ "@babel/plugin-proposal-class-properties" ]
}

I've obviously downloaded babel-loader and added it to my webpack.config.js file, but even that doesn't help.

CodePudding user response：

Webpack is a bundler which will utilize/invoke several other things in order to bundle your code. In order to do that that you need loaders for most things you're using in webpack. If you have css then you need a css loader, which is what webpack will use to transpile and bundle that css. If you have javascript, especially newer es6 or jsx, then webpack won't understand it, you have to provide it with some loader that can actually interpret and understand that code. The most common ones used are babel loader and ts-loader for typescript.

What's happening currently in your code is that webpack finds the file and loads it, but then has no idea what it's saying. You have to install either babel or ts-loader or both, then you have to add it to webpack's loaders section in the configuration and then webpack will invoke those to transpile your code and bundle it.

CodePudding user response：

I ended up not figuring out why the loader wasn't registering, instead, I just downloaded the repo as a gzip, extracted it, put it in my my-app/src folder, and changed some of the packages and it was good to go.