Craco react app: Missing class properties transform - javascript

I'm getting a Missing class properties transform. error for my CardData class, and I have no idea why, as I've installed the #babel/plugin-transform-classes.
//CardData.ts
import type RawCardRow from "#interfaces/RawCardRow";
import { InteractionType } from "#enums";
import IFrameValidator from "../IFrameValidator";
export default class CardData {
src: string;
title: string;
added?: Date;
sourceId: string;
author: string;
interaction: InteractionType;
validator!: IFrameValidator;
isActive!: boolean;
failed!: boolean;
constructor(row: RawCardRow) {
this.src = row.src;
this.title = row.title;
this.added = new Date(row.added);
this.sourceId = row.src;
this.author = row.author;
this.interaction =
InteractionType[row.interaction as keyof typeof InteractionType];
this.isActive = false;
this.validator = new IFrameValidator(this.src);
this.failed = false;
// this.error = undefined;
}
setActive(b: boolean): void {
this.isActive = b;
}
fail() {
this.failed = true;
}
}
craco.config.js:
const path = require("path");
const CracoAlias = require("craco-alias");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
type: "javascript/auto",
test: /\.mjs$/,
include: /node_modules/,
},
],
},
},
},
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.path.json",
},
},
],
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
babel: {
plugins: [
"glsl",
"#babel/plugin-transform-classes",
"transform-class-properties",
],
},
};
package.json
{
"name": "seisolo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#dnd-kit/core": "^4.0.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#react-three/drei": "^8.3.1",
"#react-three/postprocessing": "^2.1.2",
"#tailwindcss/forms": "^0.3.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/file-saver": "^2.0.3",
"#types/jest": "^26.0.15",
"#types/lodash.isequalwith": "^4.4.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.6",
"#types/react": "^17.0.0",
"#types/react-custom-scrollbars": "^4.0.8",
"#types/react-dom": "^17.0.0",
"#types/redux-logger": "^3.0.9",
"#types/three": "^0.134.0",
"#withvoid/melting-pot": "^1.6.0",
"classnames": "^2.3.1",
"create-react-class": "^15.7.0",
"crooks": "^1.0.23",
"drei": "^2.2.21",
"easy-peasy": "^5.0.3",
"esquery": "^1.4.0",
"evergreen-ui": "^6.4.0",
"file-saver": "^2.0.5",
"framer-motion": "^5.5.5",
"google-spreadsheet": "^3.1.15",
"interpolate-range": "^2.1.0",
"konva": "^8.2.2",
"leva": "^0.9.18",
"lodash": "^4.17.21",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"papaparse": "^5.3.1",
"prop-types": "^15.7.2",
"rc-slider": "^9.7.2",
"react": "^17.0.2",
"react-addons-transition-group": "^15.6.2",
"react-audio-player": "^0.17.0",
"react-beautiful-dnd": "^13.1.0",
"react-curveto": "^1.0.6",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.2",
"react-grid-layout": "^1.3.0",
"react-hanger": "^2.4.4",
"react-konva": "^17.0.2-5",
"react-lineto": "^3.3.0",
"react-player": "^2.9.0",
"react-radio-group": "^3.0.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-sound": "^1.2.0",
"react-soundplayer": "^1.0.5",
"react-stonecutter": "^0.3.10",
"react-three-fiber": "^6.0.13",
"react-three-gui": "^0.4.2",
"react-tiny-popover": "^7.0.1",
"reactjs-popup": "^2.0.5",
"redux-logger": "^3.0.6",
"sass": "4.14.1",
"svg-catmull-rom-spline": "^0.0.1",
"three": "^0.134.0",
"three-extend-material": "^1.0.0",
"three-obj-loader": "^1.1.3",
"typescript": "^4.1.2",
"use-asset": "^1.0.4",
"use-image": "^1.0.8",
"waveform-data": "^4.1.1",
"web-vitals": "^1.0.1"
},
"engines": {
"node": "14"
},
"scripts": {
"eject": "react-scripts eject",
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
"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-transform-classes": "^7.16.7",
"#types/google-spreadsheet": "^3.1.5",
"#types/react-audio-player": "^0.13.0",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-grid-layout": "^1.1.2",
"#types/react-sound": "^1.2.3",
"#types/react-stonecutter": "^0.3.1",
"#types/react-table": "^7.7.1",
"#types/webpack-env": "^1.16.2",
"#welldone-software/why-did-you-render": "^6.2.0",
"autoprefixer": "^9",
"babel-plugin-glsl": "^1.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"better-docs": "^2.3.2",
"craco-alias": "^3.0.1",
"eslint-config-xo-react": "^0.25.0",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-only-warn": "^1.0.2",
"eslint-plugin-sonarjs": "^0.9.1",
"eslint-plugin-unicorn": "^34.0.1",
"file-loader": "^6.2.0",
"glslify": "^7.1.1",
"jsdoc": "^3.6.7",
"jsdoc-plugin-typescript": "^2.0.6",
"jsdoc-to-markdown": "^7.0.1",
"postcss": "^7",
"react-loader-spinner": "^4.0.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
I've tried restarting the dev server and reinstall my packages.

Related

Module parse failed: Unexpected token You may need an appropriate loader to handle this file type. #splinetool/runtime

I am using a react portfolio template. I am new to react and webpack. I am trying to use Spline to add a 3D model to my page, but I'm getting the following error.
./node_modules/#splinetool/runtime/build/runtime.js 19847:16
Module parse failed: Unexpected token (19847:16)
You may need an appropriate loader to handle this file type.
| function fI(r, e) {
| var t = typeof r; > return e = e ?? hI, !!e && (t == "number" || t != "symbol" && dI.test(r)) && r > -1 && r % 1 == 0 && r < e;
| }
|
I have also installed react-script package and typescript which are required for spline to work.
My package.json file:
"name": "portfolio",
"version": "0.1.0",
"private": true,
"homepage": "/",
"basename": "/",
"dependencies": {
"#babel/core": "7.4.3",
"#splinetool/react-spline": "^2.2.1",
"#splinetool/runtime": "^0.9.73",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"babel-eslint": "10.0.1",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^9.1.2",
"bootstrap": "^4.5.3",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "^1.7.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.7",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.14.0",
"react-accessible-accordion": "^3.3.3",
"react-animate-on-scroll": "^2.1.5",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.4.0",
"react-countup": "^4.3.3",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-icons": "^3.11.0",
"react-iframe": "^1.8.0",
"react-image-lightbox": "^5.1.1",
"react-modal-video": "^1.2.6",
"react-parallax": "^3.1.2",
"react-particles-js": "^2.7.1",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-scroll-up": "^1.3.5",
"react-scrollspy": "^3.4.3",
"react-slick": "^0.24.0",
"react-tabs": "^3.1.1",
"react-text-loop": "^2.3.0",
"react-tilt": "^0.1.4",
"react-video-tag": "0.0.10",
"react-visibility-sensor": "^5.1.1",
"resolve": "1.10.0",
"sass-loader": "^7.3.1",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-pnp": "1.1.2",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"#babel/runtime": "^7.18.6",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
}
Part of my React code:
class SliderOne extends Component {
render() {
return (
<div className="slider-activation">
<div className="inner">
<Spline scene="https://prod.spline.design/zijR8dif6Kg3gTyC/scene.splinecode" />
</div>
</div>```
I had the same problem, my version of node js was in 12.x.x, I changed to 16.x.x and everything works

Heap Out of Memory in React Application

Heap Out of Memory error while starting the application. I have listed my package.json file content which might be needed for proper detailing. Although I set max_old_space_size to 4096, it still provides me the same error. My Pc configuration is 4GB RAM and I5 intel processor. Is it due to my pc configuration or memory leaks in the code. Please elaborate the possible fix for the issue. I face this issue when I use sass in my dev dependencies.
"name": "superadmin-panel",
"version": "0.1.0",
"private": true,
"license": "MIT",
"dependencies": {
"#ant-design/icons": "4.6.2",
"#auth0/auth0-react": "^1.4.0",
"#david.kucsai/react-pdf-table": "^0.4.1",
"#react-pdf/renderer": "^2.1.1",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.0",
"antd-img-crop": "^3.14.1",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"bootstrap-scss": "^4.6.0",
"chart.js": "^3.0.2",
"chartist": "^0.11.4",
"connected-react-router": "^6.9.1",
"draft-convert": "^2.1.11",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"emoji-mart": "^3.0.1",
"feather-icons": "^4.28.0",
"firebase": "^8.3.3",
"html-to-draftjs": "^1.5.0",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"node-sass": "npm:sass#^1.52.3",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.5.2",
"react-bootstrap-typeahead": "^5.1.4",
"react-chartist": "^0.14.4",
"react-ckeditor-component": "^1.1.0",
"react-clock": "^3.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-countdown": "^2.3.1",
"react-countup": "^4.3.3",
"react-data-table-component": "^6.11.7",
"react-datepicker": "^3.7.0",
"react-draft-wysiwyg": "^1.14.5",
"react-dropzone-uploader": "^2.11.0",
"react-feather": "^2.0.9",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-image-crop": "^8.6.6",
"react-image-lightbox": "^5.1.1",
"react-input-range": "^1.3.0",
"react-jwt": "^1.1.2",
"react-moment": "^1.1.1",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-slugify": "^2.1.0",
"react-spinners": "^0.11.0",
"react-switch-lang": "^1.0.2",
"react-times": "^3.1.12",
"react-toastify": "^7.0.3",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.9.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"sweetalert2": "^10.16.0",
"swr": "^1.2.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md}' --config ./src/.prettierrc"
},
"resolutions": {
"react-dev-utils": "^10.0.0"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"jsx-a11y"
],
"rules": {
"no-whitespace-before-property": "off"
},
"overrides": [
{
"files": [
"*-index.js"
],
"rules": {
"no-unused-expressions": "off"
}
}
],
"reportUnusedDisableDirectives": true,
"noInlineConfig": true
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"env-cmd": "^10.1.0",
"rc-tween-one": "^3.0.6",
"react-app-rewired": "^2.1.8",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.52.3",
"typescript": "^4.2.3"
},
"husky": {
"hooks": {
"pre-commit": "npx run format",
"pre-push": "npx run format"
}
},
"engines": {
"npm": ">=6.0.0",
"node": ">=14.0.0"
}
}

Incomplete build artifact generation using ExportStatic

I've had this problem for a while, I use the npm run-script build command to build the project and generate the artifact. The project is in React, and depends on umi.
umirc.js:
// ref: http://umijs.org/config/
import webpackConfig from './plugin.config.js'
export default {
exportStatic: {},
chainWebpack: webpackConfig,
sass: {},
treeShaking: true,
theme: {
'primary-color': '#1976D2',
'text-color': ' rgba(0, 0, 0, 0.85)',
},
plugins: [
// ref: http://umijs.org/plugin/umi-plugin-react.html
[
'umi-plugin-react',
{
antd: true,
dva: false,
title: 'my-app',
dll: true,
locale: {
enable: true,
default: 'pt-BR',
},
routes: {
exclude: [
/tabs\//,
/modals\//,
/components\//,
/context\//,
/utils\//,
/enums/,
// modules
///Assets\//,
/ComponentTest/,
///Contract\//,
///Notification\//,
///InvoiceManagement\//,
/financial\//,
///Licensing\//,
///Log\//,
///MaterialRequest\//,
/modalsExamples\//,
///Network\//,
///OccurrenceRoutine\//,
/pdfExamples\//,
///Permissions\//,
///Registration\//,
///Services\//,
// /Schedule\//,
///Purchase\//,
///Person\//,
// /Region\//,
///ServiceOrder\//,
///DocumentGenerator\//,
],
},
// dynamicImport: {},
},
],
],
}
package.json:
{
"private": true,
"scripts": {
"predevelop": "tailwind build ./src/tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"prebuild": "tailwind build ./src/tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"develop": "umi dev",
"build": "umi build",
"test": "umi test --coverage --watchAll=true",
"test:watch": "jest --watch",
"lint-staged": "lint-staged",
"lint": "eslint --ext .jsx --ext .js src --fix"
},
"dependencies": {
"#ant-design/compatible": "^1.0.2",
"#ant-design/icons": "^4.4.0",
"#antv/data-set": "^0.10.2",
"#david.kucsai/react-pdf-table": "^0.1.1",
"#fnando/cpf": "^0.1.1",
"#khanacademy/react-multi-select": "^0.3.3",
"#react-mock/localstorage": "^0.1.2",
"#react-pdf/renderer": "^1.6.8",
"#softin/person": "^1.0.8",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^9.4.0",
"#use-it/interval": "^0.1.3",
"antd": "^4.18.8",
"axios": "^0.26.0",
"axios-mock-adapter": "^1.17.0",
"bizcharts": "^3.5.9",
"constate": "^2.0.0",
"draftjs-to-html": "^0.9.1",
"ignore-case": "^0.1.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^3.0.2",
"leaflet": "^1.6.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"pdfmake": "^0.1.70",
"prop-types": "^15.7.2",
"query-string": "^6.13.8",
"randomcolor": "^0.6.2",
"rc-tween-one": "^2.6.8",
"react": "^16.13.1",
"react-big-calendar": "^0.23.0",
"react-data-export": "^0.5.0",
"react-dnd": "latest",
"react-dnd-html5-backend": "latest",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-drag-listview": "^0.1.8",
"react-input-mask": "^2.0.4",
"react-leaflet": "^2.6.1",
"react-number-format": "^4.4.4",
"react-responsive": "^8.2.0",
"react-router-breadcrumbs-hoc": "^3.3.1",
"react-select": "^3.2.0",
"react-sortable-tree": "^2.7.1",
"react-sortable-tree-theme-full-node-drag": "^1.1.0",
"reqwest": "^2.0.5",
"tailwindcss": "^1.1.4",
"umi": "^2.13.17",
"umi-plugin-react": "^1.15.2",
"wait-for-expect": "^3.0.1",
"with-wrapper": "^1.0.1",
"xlsx": "^0.18.2"
},
"devDependencies": {
"#testing-library/user-event": "^13.1.9",
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-config-umi": "^1.6.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jest": "^23.6.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^2.3.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"react-test-renderer": "^16.12.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"engines": {
"node": ">=8.0.0"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"bit": {
"env": {},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm"
}
}
In umirc.js you get the exportStatic where they are also generated in html file formats in each of the folders, there are several subprojects, but it is generating part of it, each subproject is in the file routes, I need to generate it completely. Could anyone help me with this?

Webpack - React: You may need an appropriate loader to handle this file type

I built the NPM package based on components written in React and Typescript.
Export that package as npm
Install package into another React with TS repo
Result: Error appear:
Failed to compile.
./node_modules/#nikolatrajkovic123/ec-general-section-form/HubSectionPack.tsx
10:5 Module parse failed: Unexpected token (10:5) 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 | import
'./package-styles.scss'; |
type HubSectionPackProps = { | sectionName: SectionName; | // eslint-disable-next-line
Babel
{
"presets": ["#babel/preset-env", "#babel/preset-react", "env", "react"],
"plugins": ["transform-class-properties"]
}
Webpack:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides',
),
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss'],
},
plugins: [new webpack.CleanPlugin()],
output: {
filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist'),
},
};
Package.json of the package:
{
"name": "#nikolatrajkovic123/hub-section-form",
"version": "1.3.8",
"description": "Enrollment / Hub section form",
"main": "./index.ts",
"module": "./dist/index.es.js",
"types": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/Bestowinc/enrollment-client.git"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"author": "Direct Team",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#bestowinc/bestow-logger": "1.0.26",
"#bestowinc/enroll-sdk-core": "^0.9.40",
"#bestowinc/kindred-ds": "^0.6.2",
"#hookform/resolvers": "^2.7.1",
"#sentry/minimal": "^6.14.1",
"#sentry/react": "^6.3.6",
"#sentry/tracing": "^6.3.6",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^12.1.2",
"#tippyjs/react": "^4.2.5",
"#types/react-slider": "^1.3.1",
"#types/uuid": "^8.3.1",
"#xstate/inspect": "^0.4.1",
"#xstate/react": "^1.3.1",
"auth0-js": "^9.16.4",
"autoprefixer": "^9",
"cleave.js": "^1.6.0",
"fast-glob": "^3.2.7",
"file-loader": "^6.2.0",
"ismobilejs": "^1.1.1",
"jest": "^26.6.3",
"jwt-decode": "^3.1.2",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"lodash.noop": "^3.0.1",
"lodash.unset": "^4.5.2",
"path": "^0.12.7",
"postcss": "^8.3.11",
"postcss-loader": "^4.2.0",
"postcss-scss": "^3.0.4",
"react-hook-form": "^7.15.3",
"react-router-dom": "^5.2.0",
"react-slider": "^1.3.1",
"sass": "^1.32.7",
"styled-components": "^5.3.2",
"styled-system": "^5.1.5",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"tippy.js": "^6.3.1",
"tsconfig": "^7.0.0",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"xstate": "^4.17.0",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-flow": "^7.16.0",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.16.0",
"#bestowinc/xray-test-util": "^1.1.4",
"#craco/craco": "^6.1.2",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^11.1.1",
"#rollup/plugin-replace": "^3.0.0",
"#rollup/plugin-url": "^6.1.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#types/auth0-js": "^9.14.2",
"#types/chance": "^1.1.1",
"#types/cleave.js": "^1.4.4",
"#types/history": "4.7.9",
"#types/jest": "^26.0.19",
"#types/lodash.get": "^4.4.6",
"#types/lodash.merge": "^4.6.6",
"#types/lodash.noop": "^3.0.6",
"#types/lodash.pick": "^4.4.6",
"#types/node": "^12.19.9",
"#types/react": "^16.14.2",
"#types/react-dom": "^17.0.7",
"#types/react-router-dom": "^5.1.7",
"#types/react-slider": "^1.3.1",
"#types/segment-analytics": "^0.0.34",
"#types/styled-components": "^5.1.15",
"#types/styled-system": "^5.1.13",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "^4.15.0",
"#typescript-eslint/parser": "^4.15.0",
"babel-loader": "8.1.0",
"babel-plugin-styled-components": "^1.13.3",
"chance": "^1.1.7",
"circle-github-bot": "^2.1.0",
"css-loader": "^5.0.2",
"cypress": "9.0.0",
"cypress-terminal-report": "^3.3.4",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"firebase-tools": "^9.10.2",
"husky": "^6.0.0",
"jsonwebtoken": "^8.5.1",
"luxon": "^1.26.0",
"mini-css-extract-plugin": "^1.3.6",
"neat-csv": "^6.0.1",
"pdf-parse": "^1.1.1",
"prettier": "2.2.1",
"progress-bar-webpack-plugin": "^2.1.0",
"react-scripts": "4.0.1",
"rollup": "^2.38.4",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^3.0.1",
"rollup-plugin-url-resolve": "^0.2.0",
"sass-loader": "10.1.1",
"sinon": "^9.2.4",
"source-map-explorer": "^2.5.2",
"style-loader": "^2.0.0",
"typescript": "4.2.2"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"resolutions": {
"tslib": "2.3.1"
},
"external": [
"react",
"react-dom"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -c --watch",
"build": "rollup -c"
},
"bugs": {
"url": "https://github.com/issues"
},
"homepage": "https://github.com/readme"
}

How to resolve eslient token error that is not further specified?

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-free": "^5.13.0",
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.28",
"#types/react": "^16.9.21",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.
Are you trying to use class or functional components, you have some errors in your code.
Class components should look like this:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
Functional components should look like this:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}

Categories