Disable linter only in development mode not when try to commit changes - javascript

I have this code which is obviously failing by the linter
console.log('asd', {asd:'asd'});
Line 76:23: Replace `asd:'asd'` with `·asd:·'asd'·` prettier/prettier
and the thing is that this error is happening when I ran yarn start on every change. I know how to solve this lint error but I want the linter to work only when changes are tried to being commited which this is already working with Husky, not when I run yarn start and making development/debug/code review changes.
This is my package.json
{
"name": "#advisorycloud/golden-gate-web-users",
"version": "0.1.0",
"private": true,
"dependencies": {
"#advisorycloud/react-ui-components": "1.1.37",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.2",
"aws-amplify": "^3.3.11",
"formik": "^2.1.7",
"formik-material-ui": "^3.0.0",
"i18next": "^19.6.3",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.0.21",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.7.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"webfontloader": "^1.6.28",
"yup": "^0.29.3"
},
"scripts": {
"start": "yarn translate && react-scripts start",
"build": "yarn translate && react-scripts build",
"test-menu": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit --watchAll=false --env jest-environment-jsdom-fourteen",
"tdd": "react-scripts test --env jsdom-fourteen",
"eject": "react-scripts eject",
"eslint": "eslint ./src",
"cy": "cypress open",
"cy:run": "cypress run",
"cy:noapp:tests": "start-server-and-test start http://localhost:3000 cy:run && yarn test",
"cy:merge": "junit-merge --dir ./__cytests__ --out ./__cymerge__/cypressresults.xml",
"tests:merge:allreports": "junit-merge --out ./__finalreport__/finalreport.xml ./__jest-junit-reports__/junit.xml ./__cymerge__/cypressresults.xml",
"clear:reports": "rm -r ./__cymerge__/* && rm -r ./__cytests__/* && rm -r ./__finalreport__/* && rm -r ./__jest-junit-reports__/* || true ",
"full:test": "yarn clear:reports && yarn cy:noapp:tests && yarn cy:merge && yarn tests:merge:allreports",
"translate": "npx translate --source ."
},
"eslintConfig": {
"extends": "react-app"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": "./__jest-junit-reports__",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{title}",
"titleTemplate": "{classname}-{title}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "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": {
"#advisorycloud/translation": "^1.1.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^10.4.9",
"#testing-library/user-event": "^12.1.3",
"cypress": "^5.2.0",
"eslint": "^7.13.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.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.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": ">=4",
"jest-junit": "^11.1.0",
"junit-merge": "^2.0.0",
"lint-staged": ">=10",
"prettier": "^2.0.5",
"react-scripts": "^3.4.3",
"start-server-and-test": "^1.11.4"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && yarn test"
}
},
"lint-staged": {
"*.js": "eslint --cache",
"*.jsx": "eslint --cache"
}
}
and this is my linter configuration
{
"env": {
"browser": true,
"es2020": true,
"commonjs": true,
"node": true,
"jest": true
},
"extends": ["airbnb", "prettier", "plugin:cypress/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react", "jsx-a11y", "import", "prettier", "jest", "cypress"],
"rules": {
"prettier/prettier": ["error"],
"linebreak-style": ["error", "unix"],
"react/jsx-filename-extension": [
2,
{
"extensions": ["index.js", ".jsx"]
}
],
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0,
"import/prefer-default-export": 0,
"jest/no-disabled-tests": 0,
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.js",
"**/*.test.jsx",
"**/*.spec.js",
"**/*.spec.jsx",
"**/setupTests.js"
]
}
],
"cypress/no-unnecessary-waiting": 0
}
}
Sorry for my english and anticipated thanks

Related

Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):

Here is the package.json from my project, I've ran npm install.
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.20.2",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"antd": "^4.8.1",
"axios": "^0.19.2",
"babel-preset-react-app": "^9.1.2",
"connected-react-router": "^6.8.0",
"craco-less": "^2.0.0",
"i18next": "^19.7.0",
"react": "^16.14.0",
"react-dom": "^16.13.1",
"react-i18next": "^11.7.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
"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-loader": "^8.1.0",
"less-loader": "^11.1.0"
}
}
after ran npm start, I've got this error
Compiled with problems:X
ERROR in ./src/index.less (./node_modules/css-loader/dist/cjs.js??> > ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/craco-less/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/index.less)
Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):
// ================================================================
.table-size(~'middle', #table-padding-vertical-md, #table-padding-horizontal-md, #table-font-size-md);
^
Operation on an invalid type
Error in /Users/user/audien/node_modules/antd/lib/table/style/size.less (line 53, column 0)
I've tried to lower less-loader to version 5.0.0, but it still doesn't work.
Set math as always in your less options
math: 'always'
In your craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
math: 'always',
modifyVars: { '#primary-color': '#6b75e3' },
javascriptEnabled: true,
},
},
},
},
],
};

Module not found error even when overriding webpack config

When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"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"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};

I can't import testing-library/react in my project

I am trying to write tests using #testing-library/react in my create-react-app with Typescript, but for some reason the module does not seem to import:
Even my editor complains:
The error reads:
Could not find a declaration file for module '#testing-library/react'. '/home/dbugger/projects/foo/node_modules/#testing-library/react/dist/index.js' implicitly has an 'any' type.
Why is this happening?
Configuration files
This is my tsconfig.json file:
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"noUnusedLocals": false
},
"include": [
"src"
]
}
my jest.config.js
module.exports = {
testMatch: ['**/__tests__/**/*.(spec|test|feature).(js|ts|tsx)'],
testTimeout: 30000,
transform: {
'^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
},
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
testEnvironment: 'jest-environment-jsdom',
testPathIgnorePatterns: ['src/styles/'],
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/__mocks__/fileMock.js',
'\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
},
};
and my package.json:
{
"name": "abf_frontend",
"version": "2.0.0",
"private": true,
"dependencies": {
"#date-io/moment": "^1.3.13",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.3.0",
"#material-ui/pickers": "^3.3.10",
"#mui/material": "^5.2.7",
"#nordlb-ui/nukular": "3.9.2",
"#reduxjs/toolkit": "^1.7.1",
"chart.js": "^2.9.3",
"classnames": "^2.2.6",
"env-cmd": "^10.1.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-react": "^7.28.0",
"history": "^4.10.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"oidc-client": "^1.10.1",
"ramda": "0.28.0",
"react": "^17.0.1",
"react-chartjs-2": "^2.10.0",
"react-dom": "^17.0.1",
"react-download-link": "^2.3.0",
"react-hook-form": "^6.0.2",
"react-redux": "^7.2.0",
"react-resize-detector": "^6.7.7",
"react-router-dom": "^5.3.0",
"react-scripts": "3.4.1",
"react-select": "^4.3.0",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "1.1.3",
"redux-saga-test-plan": "^4.0.4",
"shortid": "^2.2.16",
"typed-redux-saga": "1.3.1"
},
"peerDependencies": {
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/plugin-syntax-jsx": "^7.16.7",
"#babel/preset-typescript": "7.16.7",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^26.0.0",
"#types/lodash": "^4.14.178",
"#types/node": "^14.18.5",
"#types/node-sass": "^4.11.1",
"#types/ramda": "0.27.64",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.0",
"#types/react-redux": "^7.1.21",
"#types/react-resize-detector": "^5.0.0",
"#types/react-router-dom": "^5.1.5",
"#types/react-select": "^4.0.15",
"#types/reapop": "^1.1.5",
"#types/testing-library__jest-dom": "^5.9.1",
"#types/testing-library__react": "^10.0.1",
"babel-jest": "27.0.6",
"babel-preset-react-app": "^10.0.1",
"cypress": "^9.4.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"jest": "27.0.6",
"jest-dom": "4.0.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"ts-jest": "^27.1.4",
"typescript": "^4.5.4",
"watch": "1.0.2"
},
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"build": "react-scripts build",
"build:test": "env-cmd -f .env.azure-test react-scripts build",
"build:dev": "env-cmd -f .env.azure-dev react-scripts build",
"build:qa": "env-cmd -f .env.azure-qa react-scripts build",
"build:prep-external": "env-cmd -f .env.prep-external react-scripts build",
"build:prep-internal": "env-cmd -f .env.prep-internal react-scripts build",
"build:prod-external": "env-cmd -f .env.prod-external react-scripts build",
"build:prod-internal": "env-cmd -f .env.prod-internal react-scripts build",
"test": "jest --watch",
"eject": "react-scripts eject",
"cypress": "cypress open"
},
"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"
]
}
}

VSCode EsLint Extension Does Not Lint in JS Files in a Mixed Next.JS Project, but next lint and Husky Work

For context, our project is a Next.JS project with mostly JavaScript files, and a few scattering of random TypeScript Files, mostly in our API folder. Recently we set up Husky to pre-commit our git commits, and some of the settings changed and while next lint correctly lints, and our Husky settings work with both types of files, the VSCode extension for EsLint no longer works on JavaScript files. While removing plugin:#typescript-eslint/recommended fixes that issue, next lint and husky then fails with TS files.
eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:#next/next/recommended",
"plugin:import/recommended",
"prettier",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"typescript": {}
}
},
"plugins": ["react", "prettier"],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": "off",
"react/display-name": "off",
"no-unused-vars": 2,
"no-undef": 2,
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "next/*",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next/*"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"globals": {
"React": "writable"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
package.json:
{
"name": "our-organization",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev && next export",
"build": "next build",
"start": "NODE_ENV=production next start -p 8080",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "jest --json --outputFile=./test-results/report.json",
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"next lint .",
"prettier --write ."
]
},
"dependencies": {
"#analytics/google-analytics": "^0.5.2",
"#apollo/client": "^3.4.15",
"#contentful/rich-text-plain-text-renderer": "^15.6.2",
"#contentful/rich-text-react-renderer": "^15.3.6",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.48",
"#mui/material": "^5.0.3",
"#mui/styles": "^5.0.1",
"#mui/x-data-grid": "^5.0.1",
"#testing-library/user-event": "^13.2.1",
"algoliasearch": "^4.10.5",
"analytics": "^0.7.14",
"apollo-link-rest": "^0.8.0-beta.0",
"bad-words": "^3.0.4",
"contentful": "^9.0.0",
"date-fns": "^2.25.0",
"dateformat": "^4.5.1",
"formik": "^2.2.9",
"graphql": "^15.6.0",
"graphql-anywhere": "^4.2.7",
"javascript-time-ago": "^2.3.8",
"next": "^11.1.2",
"next-instantsearch": "^0.3.15",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-iframe": "^1.8.0",
"react-instantsearch-dom": "^6.22.0",
"react-markdown": "^7.0.1",
"react-player": "^2.9.0",
"react-scripts": "^5.0.0",
"react-share": "^4.4.0",
"react-show-more-text": "^1.5.0",
"react-to-print": "^2.13.0",
"serverless-mysql": "^1.5.4",
"sharethis-reactjs": "^1.6.0",
"swr": "^1.0.1",
"universal-cookie": "^4.0.4",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-proposal-export-default-from": "^7.14.5",
"#next/eslint-plugin-next": "^11.1.2",
"#storybook/addon-actions": "^6.3.10",
"#storybook/addon-essentials": "^6.3.10",
"#storybook/addon-jest": "^6.3.10",
"#storybook/addon-links": "^6.3.10",
"#storybook/react": "^6.3.10",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#typescript-eslint/eslint-plugin": "^5.11.0",
"babel-jest": "^27.2.0",
"babel-loader": "^8.2.2",
"babel-plugin-react-require": "^3.1.3",
"eslint": "^7.32.0",
"eslint-config-next": "^12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"husky": "^7.0.4",
"jest": "^27.2.0",
"jest-html-reporters": "^2.1.6",
"jest-transform-graphql": "^2.1.0",
"lint-staged": "^12.1.2",
"prettier": "^2.4.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.4.3"
},
"engines": {
"node": ">=14.17.0",
"npm": ">=6.0.0"
}
}
I have found no good resources on addressing this issue for mixed projects like this. I do not know why we have typescript files as they were added before I joined.
This eslint file is missing the typescript parser:
"parser": "#typescript-eslint/parser",

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```
Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel
I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files

Categories