Failed to compile: File was processed with these loaders #187
Description
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?