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"
}
}
}
Related
I see plenty of similar questions but none of the answers solve the problem in my code.
I use React 17, Mui v5, TS v4.
I try to implement a simple component from https://www.npmjs.com/package/rc-dock. I just literally copied and pasted a code from a sample available on codesandbox (Dock.js): https://codesandbox.io/s/yo2cx?file=/src/Dock.js:0-860 to a file in my app named SceneComponent.tsx.
My VSCode constantly highlights the Docklayout element and returns two errors:
JSX element class does not support attributes because it does not have
a 'props' property.ts(2607) 'DockLayout' cannot be used as a JSX
component. Its instance type 'DockLayout' is not a valid JSX
element.
Type 'DockLayout' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2
more.ts(2786)
DockLayout is imported from a package and not created by myself, so I don't understand where this is coming from this error.
package.json
{
"name": "APP",
"version": "1.0",
"description": "App",
"main": "src/index.tsx",
"scripts": {
"release": "webpack --config webpack.prod.config.js",
"debug": "webpack --config webpack.dev.config.js",
"test": "jest --verbose --coverage --runInBand",
"testinspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose",
"start": "webpack-dev-server --open --hot --https --config webpack.dev.config.js --port 3002",
"pro": "webpack-dev-server --open --hot --config webpack.dev.config.js --port 3002",
"prorelease": "webpack-dev-server --open --hot --config webpack.prod.config.js --port 3002",
"jonsportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base ./",
"andersportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base c:/src/seismicportal",
"analyze": "webpack --config webpack.analyze.config.js",
"lint": "eslint"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/icons-material": "^5.6.2",
"#mui/lab": "*",
"#mui/material": "^5.6.2",
"#mui/styles": "^5.9.0",
"#reactivex/rxjs": "github:reactivex/rxjs",
"#types/arcgis-js-api": "^4.20.1",
"#types/classnames": "^2.3.0",
"#types/jest": "^27.4.0",
"#types/lodash": "^4.14.173",
"#types/material-ui": "^0.21.9",
"#types/qs": "6.9.7",
"#types/react": "^17.0.47",
"#types/react-color": "^3.0.5",
"#types/react-dom": "^17.0.16",
"#types/uuid": "^8.3.1",
"assert": "^2.0.0",
"axios": "^0.21.4",
"buffer": "^6.0.3",
"classnames": "^2.3.1",
"d3": "^4.13.0",
"esri-loader": "^3.2.0",
"fast-png": "^6.1.0",
"fork-ts-checker-webpack-plugin": "6.3.3",
"geotiff": "^0.4.1",
"https-browserify": "^1.0.0",
"isomorphic-fetch": "^3.0.0",
"jest": "^27.4.7",
"jest-cli": "^27.4.7",
"jpeg-js": "^0.4.3",
"lerc": "^3.0.0",
"npm-check-updates": "^11.8.5",
"process": "^0.11.10",
"prop-types": "^15.7.2",
"qs": "^6.10.1",
"rc-dock": "^3.2.10",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-rnd": "^10.3.5",
"react-virtualized-auto-sizer": "^1.0.6",
"react-virtuoso": "^2.13.1",
"react-window": "^1.8.7",
"rxjs": "^7.3.0",
"stream": "^0.0.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"terser-webpack-plugin": "^1.2.3",
"tinycolor2": "^1.4.2",
"ts-jest": "^27.1.4",
"ts-loader": "^4.5.0",
"ts-shader-loader": "^1.0.6",
"tss-react": "^3.6.2",
"util": "^0.12.4",
"uuid": "^8.3.2",
"webpack": "^4.41.6",
"webpack-cli": "^3.1.1",
"webpack-merge": "^4.1.4",
"webpack-simple-progress-plugin": "^0.0.4"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^5.27.1",
"#typescript-eslint/parser": "^5.27.1",
"copy-webpack-plugin": "^4.6.0",
"eslint": "^8.17.0",
"jest-extended": "^0.11.5",
"source-map-loader": "^0.2.4",
"ts-node": "^10.2.1",
"typescript": "^4.7.3",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"verbose": true,
"modulePathIgnorePatterns": [
".*__mocks__.*"
],
"testURL": "http://localhost/",
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/test/.*|(\\.|/)(test|spec))\\.(ts?|tsx?)$",
"moduleFileExtensions": [
"ts",
"js",
"tsx"
]
},
"_id": "APP"
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"lib": ["es2016","dom", "es2017.object"],
"allowJs": true,
"declaration": false,
"moduleResolution": "node",
"jsx": "react",
"types": ["jest"],
"typeRoots": ["./types", "./node_modules/#types"]
},
"include": [
"./src/**/*" ,
"**/*.test.ts"
],
"exclude": [
"node_modules",
"js"
]
}
Somehow adding a single line "allowSyntheticDefaultImports" : true, to tsconfig.json in compilerOptions object helped and the code works fine.
While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
enter image description here
"name": "kapilguru",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"serve": "serve --open",
"start": "ng serve --source-map=false --host 0.0.0.0 --disable-host-check ",
"build": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^12.2.2",
"#angular/cdk": "^11.2.4",
"#angular/common": "~12.2.2",
"#angular/compiler": "~12.2.2",
"#angular/core": "~12.2.2",
"#angular/forms": "~12.2.2",
"#angular/material": "^11.2.4",
"#angular/platform-browser": "^12.2.2",
"#angular/platform-browser-dynamic": "~12.2.2",
"#angular/router": "~12.2.2",
"#material/button": "^10.0.0",
"#material/notched-outline": "^10.0.0",
"#material/ripple": "^10.0.0",
"#material/textfield": "^10.0.0",
"#ng-bootstrap/ng-bootstrap": "^9.0.2",
"#types/file-saver": "^2.0.2",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"angular-ng-autocomplete": "^2.0.5",
"angularx-social-login": "^3.5.7",
"assert": "^2.0.0",
"bootstrap": "^4.0.0-beta.2",
"chart.js": "^2.9.3",
"ckeditor4-angular": "^2.2.1",
"crypto-browserify": "^3.12.0",
"file-saver": "^2.0.5",
"fs-web": "^1.0.1",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.7",
"https-browserify": "^1.0.0",
"jquery": "^3.6.0",
"jspdf": "^2.3.1",
"material-icons": "^0.5.4",
"ng-circle-progress": "^1.6.0",
"ng-connection-service": "^1.0.4",
"ng-otp-input": "^1.7.1",
"ng2-charts": "^2.2.3",
"ng2-file-upload": "^1.4.0",
"ngx-editor": "^9.0.2",
"ngx-image-cropper": "^3.3.5",
"ngx-material-timepicker": "^5.5.3",
"ngx-owl-carousel-o": "^5.1.0",
"ngx-spinner": "^11.0.2",
"ngx-toastr": "^13.2.1",
"os-browserify": "^0.3.0",
"paytm-blink-checkout-angular": "^0.0.2",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"sweetalert2": "^11.0.16",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"webex": "^1.136.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^12.2.6",
"#angular/cli": "~12.2.2",
"#angular/compiler-cli": "~12.2.2",
"#types/jasmine": "~3.6.0",
"#types/jquery": "^3.5.5",
"#types/jspdf": "^2.0.0",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"#types/sizzle": "^2.3.3",
"#types/uuid": "^8.3.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
},
"browser": {
"fs": false,
"path": false,
"os": false,
"crypto": false,
"stream": false,
"http": false,
"tls": false,
"zlib": false,
"https": false,
"net": false
}
}
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"disableSizeLimit": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"allowJs": true,
"removeComments": true,
"skipLibCheck": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"ES2015",
"es2018",
"dom"
],
"paths" : {
"crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],
"assert": ["./node_modules/assert"],
"http": ["./node_modules/stream-http"],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify"],
"fs": ["./node_modules/fs-web"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInputAccessModifiers": false,
"strictTemplates": false,
"fullTemplateTypeCheck": false,
"strictInjectionParameters": true,
"enableIvy": true
}
}```
You can gzip your static assets by using "Compression"
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())
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.
When I run rm -rf src/dist && yarn build && electron-builder build --publish never on git bash on windows, to package my electron/react app, I get the following error message:
ERROR in ./src/pages/Task.js 135:4
[1] Module parse failed: Unexpected token (135:4)
[1] You may need an appropriate loader to handle this file type, currently no lo
aders are configured to process this file. See https://webpack.js.org/concepts#l
oaders
[1] |
[1] | return (
[1] > <div className={`Task ${isMinimized ? 'FlexIt' : ''}`}>
[1] | <div className="Btns">
[1] | <img
[1] # ./src/App.tsx 11:0-32 26:13-17
[1] # ./src/index.tsx 7:0-24 8:26-29
[1]
[1] webpack 5.5.1 compiled with 4 errors in 12401 ms
Any ideas about the reason? This is my 1st electron app, and 2nd react app, and I don't really know what webpack is.
My package.json file:
{
"name": "my-app",
"productName": "myApp",
"description": "Electron react app",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "ElectronReact",
"appId": "org.erb.ElectronReact",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "someone",
"repo": "someone"
}
},
"repository": {
"type": "git",
"url": "link.git"
},
"author": {
"name": "someone",
"email": "someone#someone.com"
},
"contributors": [
{
"name": "someone",
"email": "someone#someone.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"typescript",
"ts",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.10.5",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#material-ui/icons": "^4.11.2",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"regenerator-runtime": "^0.13.5",
"source-map-support": "^0.5.19"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {}
}
}
My webpack.config.base.js file:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from '../../src/package.json';
export default {
externals: [...Object.keys(externals || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
output: {
path: path.join(__dirname, '../../src'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2',
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [path.join(__dirname, '../../src'), 'node_modules'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
],
};
When I build my application I get. error TS2339: Property 'split' does not exist on type 'string | string[]'.
Property 'split' does not exist on type 'string[]'.
How can a split not exist on a string or string[]. It seems weird it sees it as a string array because it throws the error on a req.headers.authorization.split(" ")[1]. So this is basically: "Bearer (the token) so this seems to me a string that is getting split.
I'm using typescript version 2.3.
I tried changing the target in tsconfig to es2017.
I tried changing the lib to es6 and es7
All didn't work.
What rookie mistake did I make
This is my tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"lib": [
"es2015",
"es2017",
"dom"
],
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"test/**/*"
]
}
This is my package.json
{
"name": "express-typescript-starter",
"version": "0.1.0",
"description": "A starting point for Node.js express apps with TypeScript",
"repository": {
"type": "git",
"url": "https://github.com/sahat/hackathon-starter.git"
},
"author": "",
"license": "MIT",
"scripts": {
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"serve": "node $NODE_DEBUG_OPTION dist/server.js",
"watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"nodemon $NODE_DEBUG_OPTION dist/server.js\"",
"test": "cross-env TEST_REPORT_PATH=./test-reports/ NODE_ENV=test MONGODB_URI=mongodb://localhost:27017/portal-service-test jest --verbose --forceExit",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json",
"what": "tsc --version",
"swagger": "swagger-ts-generate --entryFile=./src/server.ts --swaggerDir=./dist --routesDir=./src",
"clean": "rimraf ./dist"
},
"jest": {
"testResultsProcessor": "./node_modules/jest-junit-reporter",
"globals": {
"__TS_CONFIG__": "tsconfig.json"
},
"moduleFileExtensions": [
"ts",
"js"
],
"transform": {
"^.+\\.(ts|tsx)$": "./node_modules/ts-jest/preprocessor.js"
},
"testMatch": [
"**/test/**/*.test.(ts|js)"
],
"testEnvironment": "node"
},
"dependencies": {
"#types/express-jwt": "^0.0.37",
"async": "^2.1.2",
"axios": "^0.16.2",
"bcrypt-nodejs": "^0.0.3",
"body-parser": "^1.15.2",
"compression": "^1.6.2",
"connect-mongo": "1.3.2",
"cors": "^2.8.4",
"crypto": "^1.0.1",
"dotenv": "^2.0.0",
"errorhandler": "^1.4.3",
"express": "^4.14.0",
"express-jwt": "^5.3.0",
"express-session": "^1.14.2",
"express-validator": "^3.2.1",
"formidable": "^1.1.1",
"jsonwebtoken": "^7.4.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"mock-require": "^2.0.2",
"mongoose": "^4.11.5",
"morgan": "^1.7.0",
"passport": "0.3.2",
"passport-http-jwt-bearer": "^0.1.3",
"q": "^1.5.0",
"qs": "^6.5.1",
"request": "^2.81.0",
"swagger-jsdoc": "^1.9.6",
"swagger-ui-express": "^1.X",
"uuid": "^3.1.0",
"winston": "^2.3.1",
"winston-daily-rotate-file": "^1.4.6",
"yn": "^2.0.0"
},
"devDependencies": {
"#types/async": "^2.0.40",
"#types/body-parser": "^1.16.2",
"#types/chai": "^4.0.4",
"#types/connect-mongo": "^0.0.32",
"#types/cors": "^2.8.1",
"#types/dotenv": "^2.0.20",
"#types/errorhandler": "^0.0.30",
"#types/express": "^4.0.35",
"#types/express-validator": "^3.0.0",
"#types/jest": "^19.2.2",
"#types/lodash": "^4.14.63",
"#types/mongodb": "^2.1.43",
"#types/mongoose": "^4.7.9",
"#types/morgan": "^1.7.32",
"#types/node": "^7.0.12",
"#types/node-notifier": "^0.0.28",
"#types/nodemailer": "^1.3.32",
"#types/passport": "^0.3.3",
"#types/request": "0.0.42",
"#types/sinon": "^2.3.3",
"#types/sinon-chai": "^2.7.29",
"#types/sinon-express-mock": "^1.3.2",
"#types/supertest": "^2.0.2",
"#types/swagger-jsdoc": "^0.0.1",
"#types/uuid": "^3.4.0",
"#types/winston": "^2.3.3",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"concurrently": "^3.4.0",
"cross-env": "^5.0.5",
"jest": "^19.0.2",
"jest-junit-reporter": "^1.1.0",
"mockgoose": "^7.3.3",
"node-notifier": "^5.1.2",
"nodemon": "^1.11.0",
"rimraf": "^2.6.1",
"sinon": "^3.2.1",
"sinon-chai": "^2.13.0",
"sinon-express-mock": "^1.3.1",
"supertest": "^3.0.0",
"ts-jest": "^19.0.8",
"tslint": "^5.0.0",
"typescript": "2.3.X"
}
}
The type you are trying to invoke split on is string|string[], which means that value may be either a string or a string[], in order for TypeScript to be happy, BOTH types must have a split method. If you are confident that it will always be a string, either update the definition (if possible) or cast to a string before calling split:
(<string>req.headers.authorization).split
or
(req.headers.authorization as string).split
Brian Ball's solution is working, another approach for handling this situation is square brackets [ ].
For instance
req.headers.authorization[split](//define your conditions here)
For exmaple:
req.headers.authorization[split](",")