Failed to compile: File was processed with these loaders

[anisharya16]

I have installed the package using the docs and just using the component. I am getting below error in terminal:

./node_modules/react-d3-speedometer/dist/react-d3-speedometer.es.js 841:60
Module parse failed: Unexpected token (841:60)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|               n[l.message] = !0;
|               var h = s ? s() : '';
>               t('Failed ' + a + ' type: ' + l.message + (h ?? ''));
|             }
|           }
^C

My webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
};

.babelrc file:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

My package.json file:

{
  "name": "command-center",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@arction/lcjs": "^5.0.5",
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-typescript": "^7.16.7",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@jitsi/react-sdk": "^1.4.0",
    "@mui/icons-material": "^5.15.2",
    "@mui/lab": "^5.0.0-alpha.62",
    "@mui/material": "^5.15.2",
    "@mui/styled-engine": "^5.4.2",
    "@mui/styles": "^5.11.7",
    "@mui/x-date-pickers": "^5.0.0-beta.4",
    "@react-keycloak/web": "^3.4.0",
    "date-fns": "^2.28.0",
    "env-cmd": "^10.1.0",
    "keycloak-js": "^11.0.3",
    "node-sass": "^6.0.0",
    "react": "^17.0.1",
    "react-d3-speedometer": "^2.2.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "redux-persist": "^6.0.0",
    "redux-state-sync": "^3.1.4",
    "sockjs-client": "^1.6.1",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:staging": "env-cmd -f .env.staging react-scripts start",
    "start:prod": "env-cmd -f .env.production react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "test-coverage": "react-scripts test --coverage --watchAll=false",
    "lint": "eslint --fix . --ignore-path ./.gitignore",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "eject": "react-scripts eject"
  },
  "jest": {
    "collectCoverageFrom": [
      "**/*.{js,jsx,ts,tsx}",
      "!**/node_modules/**",
      "!**/vendor/**",
      "!src/index.jsx",
      "!**/chatWidget/**"
    ]
  },
  "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-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.2.5",
    "@testing-library/react-hooks": "^3.7.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/enzyme": "^3.10.11",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@types/react-router-dom": "^5.3.2",
    "@types/react-test-renderer": "^17.0.1",
    "@types/redux-mock-store": "^1.0.3",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.11.1",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "enzyme-to-json": "^3.6.2",
    "eslint": "^7.19.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prefer-arrow": "^1.2.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1",
    "react-datepicker": "^4.8.0",
    "react-test-renderer": "^18.0.0",
    "redux-mock-store": "^1.5.4",
    "ts-jest": "^26.5.6"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

What could be the issue?

[palerdot]

Not sure. Latest version works with React 18, but you are using v17. Maybe that is the issue?