I am trying to get eslint to format my .ts files. .tsx works fine but for some reason .ts does not.
my eslinrc
{
// "extends": "airbnb"
"extends": ["airbnb-typescript", "plugin:jsx-a11y/recommended", "prettier"],
"env": {
"browser": true
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},
"plugins": ["prettier"],
"rules": {
"react/jsx-one-expression-per-line": 0,
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0,
"import/prefer-default-export": 0,
"#typescript-eslint/no-unused-vars": 0,
"#typescript-eslint/no-use-before-define": 0,
"no-unneeded-ternary": 0,
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"react/destructuring-assignment": 0
},
"parserOptions": {
"project": ["./tsconfig.json"]
}
}
tsconfig:
{
"compilerOptions": {
"target": "es5",
"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-jsx",
"baseUrl": "src",
"noFallthroughCasesInSwitch": true,
"strictFunctionTypes": false
},
"include": ["src"]
}
poackage.json:
{
"name": "frontend-fe",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.14.5",
"#types/prop-types": "^15.7.4",
"#types/react-router": "^5.1.16",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"core-js": "^3.16.0",
"dotenv": "^10.0.0",
"embla-carousel": "^4.5.3",
"history": "^4.10.1",
"i18next": "^20.3.5",
"i18next-parser": "^4.3.0",
"loglevel": "^1.7.1",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-combine-reducers": "^1.1.1",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-i18next": "^11.11.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"styled-components": "^5.3.0"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.14.9",
"#rollup/plugin-babel": "^5.3.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#types/node": "16.4.12",
"#types/react": "^17.0.15",
"#types/react-combine-reducers": "^1.0.0",
"#types/react-dom": "^17.0.9",
"#types/react-router-dom": "^5.1.8",
"#types/styled-components": "^5.1.12",
"#typescript-eslint/parser": "^4.29.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.1",
"lint-staged": "^11.1.1",
"prettier": "^2.3.2",
"typescript": "^4.3.5"
},
"resolutions": {
"styled-components": "^5"
},
"scripts": {
"start": "react-scripts start",
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"lint": "eslint ./src/*.{ts,tsx} ./src/**/*.{ts,tsx} --max-warnings 0",
"generate:translations": "i18next 'src/**/*.{ts,tsx}' --config './i18next-parser.config.js'",
"checkUpdate": "npm-check-updates",
"updateConfig": "ncu-u"
},
"lint-staged": {
"src/**/!(*test).{js,jsx,ts,tsx,json}": [
"prettier --write",
"eslint --max-warnings 0",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "sh commit-message.sh"
}
},
"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/index.tsx",
"!src/*.d.ts",
"!<rootDir>/node_modules/",
"!<rootDir>/path/to/dir/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
}
}
}
pressing ctrl +s in vs-code inside of a .ts file and not formatting occurs.
what am I missing?
EDIT: vscode formatt-settings:
{
"window.zoomLevel": -1,
"typescript.updateImportsOnFileMove.enabled": "never",
"breadcrumbs.enabled": true,
"editor.tabSize": 2,
"editor.fastScrollSensitivity": 15,
"editor.mouseWheelScrollSensitivity": 5,
"diffEditor.ignoreTrimWhitespace": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[git-rebase]": {
"workbench.editor.restoreViewState": false
},
"explorer.confirmDelete": false,
"files.autoSave": "afterDelay",
"editor.formatOnSave": true,
"editor.fontWeight": null
}
Seems like your global Vscode settings contain rule, that override global defaultFormatter for typescript language.
Declare explicitly
"[typescript]": {
// override if setted per-language
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Important note: If you have Vscode with version at least November 2021 (version 1.63) multiple language declaration style currently have lower priority than single style.
For example "[javascript][typescript]" not override "[typescript]"
Ensure that eslint.format.enable is set to true in your Visual Studio Code settings.json file.
Related
I am using angular 15, where on console I am seeing this error of Uncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:7:1)
This is my tsconfig.json file code
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": false,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
],
"paths": {
"#core/*": [ "src/app/core/*" ],
"#shared/*": [ "src/app/shared/*" ],
"#environments/*": [ "src/environments/*"],
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
package.json -
{
"name": "test",
"version": "0.0.0",
"type": "module",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^15.0.0",
"#angular/cdk": "^15.0.3",
"#angular/common": "^15.0.0",
"#angular/compiler": "^15.0.0",
"#angular/core": "^15.0.0",
"#angular/forms": "^15.0.0",
"#angular/platform-browser": "^15.0.0",
"#angular/platform-browser-dynamic": "^15.0.0",
"#angular/router": "^15.0.0",
"chart.js": "^4.2.0",
"primeflex": "^3.3.0",
"primeicons": "^6.0.1",
"primeng": "^15.0.0-rc.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "^15.0.1",
"#angular/cli": "~15.0.1",
"#angular/compiler-cli": "^15.0.0",
"#types/jasmine": "~4.3.0",
"autoprefixer": "^10.4.13",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
"typescript": "~4.8.2"
}
}
node version - v18.12.1
npm version - 8.19.2
please help me to reach a working solution.
I have tried -
1- add "type": "module" in package.json - not working
2- tsconfig.json added "target": "esnext","module": "commonjs", - not working
3- npm i ts-node --save-dev - not working
I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "#kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/#kubevious/entity-meta/public,./node_modules/#kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian#gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-framework": "^1.0.59",
"#types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"#storybook/addon-actions": "6.5.7",
"#storybook/addon-essentials": "6.5.7",
"#storybook/addon-links": "6.5.7",
"#storybook/react": "6.5.7",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "12.1.5",
"#types/jest": "26.0.24",
"#types/js-yaml": "^4.0.0",
"#types/node": "^14.6.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "5.27.1",
"#typescript-eslint/parser": "5.27.1",
"#babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"#rollup/plugin-babel": "5.3.1",
"#rollup/plugin-commonjs": "22.0.0",
"#rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"#storybook/preset-scss": "1.0.3",
"#types/react-router-dom": "5.3.3",
"#testing-library/dom": "8.13.0",
"#testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"#kubevious/ui-framework": "^1.0.59",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}
I am very fresh as per testing. Some time ago I have configured some tests for purely TS React project. Now, I would like to do the same for React project with mixed JS and TS content. FYI, it is in the course of being rewritten to TS, but it will take some time.
Below is my jest.config.ts file content.
import type { Config } from '#jest/types';
const config: Config.InitialOptions = {
roots: ['<rootDir>/test', '<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.css$': '<rootDir>/jest-config/style-mock.js',
},
setupFilesAfterEnv: ['#testing-library/jest-dom/extend-expect'],
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
testEnvironment: 'jsdom',
collectCoverage: false,
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
moduleNameMapper: {
'^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
},
};
export default config;
When firing first test, I have observed that it breaks on .js files. Precisely, the error text is '
SyntaxError: Unexpected token 'export
' And it pointed on certain file import declaration. When I rewrote temporarily this file content to TS faking it with anys etc.it accepted the file but broke on the next js. How should I modify the config to work well with such the mixture?
Below is also tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"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-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
and package.json
{
"name": "google_books_finder",
"homepage": "http://kiszuriwalilibori.github.io/books",
"version": "1.4.2",
"private": true,
"dependencies": {
"#babel/plugin-proposal-private-methods": "^7.10.4",
"#babel/runtime-corejs3": "^7.11.2",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#reduxjs/toolkit": "^1.7.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.0.4",
"#testing-library/user-event": "^12.1.7",
"#types/jest": "^27.0.2",
"#types/node": "^16.11.6",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"axios": "^0.23.0",
"comlink": "^4.3.0",
"dotenv": "^8.2.0",
"es6-promise": "^4.2.8",
"es6-symbol": "^3.1.3",
"eslint-plugin-jest-dom": "^4.0.1",
"eslint-plugin-testing-library": "^5.0.3",
"formik": "^2.2.9",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.7",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.6",
"react-dom": "^17.0.2",
"react-hook-form": "^7.19.5",
"react-query": "^3.27.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^5.0.0",
"redux": "^4.1.1",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"throttle-debounce": "^2.3.0",
"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"typescript": "^4.4.4",
"use-debounce": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watchAll",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"#babel/preset-stage-3": "^7.8.3",
"#types/lodash": "^4.14.176",
"#types/react-router-dom": "^5.3.2",
"babel-plugin-styled-components": "^1.11.1",
"gh-pages": "^3.2.3"
},
"eslintConfig": {
"extends": "react-app"
},
"plugins": [
"babel-plugin-styled-components",
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 11"
]
}
}
I created a simple app a few weeks ago using create-react-app almost immediately I started getting this error in VSCode about it not being happy about something Babel related...which I ignored. My app works, I'm able to build and deploy to Heroku. And ESLint is also working. But the error keeps popping up in VSCode which has lead me down this rabbit hole of Babel and ESLint nightmares.
The error I was getting was regarding babel-eslint which I actually didn't have installed despite it being the parser named in my .eslintrc.json config. This is what my package.json file looked like prior to me making any changes:
{
"name": "new-rails-react-project",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
And this is what my .eslintrc.json file looked like:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true }
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Since babel-eslint is deprecated I added #babel/eslint-parser and cannot for the life of me figure out how to make this work. Here are my current related config files:
package.json
"name": "ne-campground-reviews",
"private": true,
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.5",
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"lightbox2": "^2.11.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/eslint-plugin": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks", "#babel"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true },
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
And this is babel.config.js although I don't know if this file is still needed and/or configured correctly
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'#babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'#babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
This error is what's currently popping up on things like import and module
Parsing error: Cannot find module '#babel/preset-react'
Require stack:
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/plugins.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/index.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/index.js
on node 12, the transpiled js looks like so:
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.........
on node 14 it looks like this:
(()=>{var e={1910:e=>{"use strict";e.exports={i8:"1.7.6"}},1427:e=>{"use strict";e.exports=JSON.parse('{"services":{"dynamodb":{"operations":{"batchGetItem":{"request_descriptors":{"RequestItems":{"get_keys":true,"rename_to":"table_names"}},"response_parameters":["ConsumedCapacity"]},"batchWriteItem":{"request_descriptors":{"RequestItems":{"get_keys":true,"rename_to":"table_names"}},
I have absolutely no idea what this is...
my tsconfig.json looks like:
{
"compilerOptions": {
// Don't emit; allow Babel to transform files.
"noEmit": true,
"target":"ES2018",
"module": "commonjs",
"lib": ["es2016", "es2017.object", "es2017.string"],
"declaration": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": false,
"inlineSourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"strictPropertyInitialization":false,
"outDir": "js",
"resolveJsonModule": true
},
"exclude": ["cdk.out", "__tests__", "lib/authorizer/*"],
"include": ["lib/**/*"]
}
and my babel config looks like:
module.exports = {
presets: [
['#babel/preset-typescript'],
['#babel/preset-env',
{
targets: {
node: '14'
}
}]
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-optional-chaining'
]
};
and my package.json:
{
"name": "swa-cdk-app",
"version": "0.1.0",
"bin": {
"swa-cdk-app": "bin/swa-cdk-app.js"
},
"scripts": {
"build": "tsc --build && webpack --mode production",
"watch": "tsc -w",
"cdk": "cdk",
"lint": "eslint \"./**/*.ts\" -f codeframe -c .eslintrc.js --fix",
"synth": "cdk synth",
"deploy": "cdk deploy --role-arn arn:aws:iam::${bamboo_sts_accountId}:role/cloud-services/pipeline-elevated-access --require-approval never",
"start": "cdk synth --no-staging > template.yml && sam local start-api",
"test": "source $HOME/.nvm/nvm.sh; nvm use && tsc && jest --coverage --testResultsProcessor jest-sonar-reporter"
},
"engines": {
"node": "14"
},
"devDependencies": {
"#aws-cdk/assert": "1.89.0",
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.10",
"#babel/preset-typescript": "^7.13.0",
"#pact-foundation/pact": "^9.15.0",
"#serverless/event-mocks": "^1.1.1",
"#types/jest": "^26.0.15",
"#types/jest-when": "^2.7.2",
"#types/lodash": "^4.14.164",
"#types/node": "^14.14.6",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "^4.6.1",
"#typescript-eslint/parser": "^4.6.1",
"aws-cdk": "1.89.0",
"aws-sdk-mock": "^5.0.0",
"axios-mock-adapter": "^1.19.0",
"eslint": "^7.12.1",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-prettier": "^3.1.4",
"husky": "^4.3.0",
"jest": "^26.6.2",
"jest-extended": "^0.11.2",
"jest-html-reporter": "^3.3.0",
"jest-junit": "^12.0.0",
"jest-when": "^3.0.1",
"mocked-env": "^1.3.2",
"prettier": "^2.1.2",
"sinon": "^9.2.1",
"ts-jest": "^26.5.1",
"ts-node": "^9.1.1",
"typescript": "^3.9.7",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"fork-ts-checker-webpack-plugin": "6.1.0",
"readdirp": "2.2.1",
"zip-webpack-plugin": "^3.0.0",
"babel-loader": "^8.2.2"
},
"dependencies": {
"#aws-cdk/aws-apigateway": "1.89.0",
"#aws-cdk/aws-dynamodb": "1.89.0",
"#aws-cdk/aws-ec2": "1.89.0",
"#aws-cdk/aws-iam": "1.89.0",
"#aws-cdk/aws-kms": "1.89.0",
"#aws-cdk/aws-lambda": "1.89.0",
"#aws-cdk/aws-lambda-event-sources": "1.89.0",
"#aws-cdk/aws-sns": "1.89.0",
"#aws-cdk/aws-sns-subscriptions": "1.89.0",
"#aws-cdk/aws-sqs": "1.89.0",
"#aws-cdk/aws-stepfunctions": "1.89.0",
"#aws-cdk/aws-stepfunctions-tasks": "1.89.0",
"#aws-cdk/core": "1.89.0",
"#aws-cdk/region-info": "1.89.0",
"#types/aws-lambda": "^8.10.64",
"#types/bunyan": "^1.8.6",
"aws-sdk": "^2.784.0",
"aws-xray-sdk": "^3.2.0",
"axios": "^0.21.0",
"axios-oauth-client": "^1.3.0",
"bunyan": "^1.8.14",
"cdk-constants": "^3.0.3",
"http-status-codes": "^2.1.4",
"jest-sonar-reporter": "^2.0.0",
"lodash": "^4.17.20",
"sonarqube-scanner": "^2.6.0",
"source-map-support": "^0.5.19",
"moment-timezone": "0.5.32"
},
"jestSonar": {
"reportPath": "reports",
"reportFile": "test-report.xml",
"indent": 4
},
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run test"
}
}
}