I have a TypeScript project that is leveraging ESLint. I have a class that utilizes a Buffer as a class attribute. I want to be able to set the buffer as part of construction.
example.ts
export class Example {
public myBuffer: Buffer
public constructor(myBuffer: Buffer) {
this.myBuffer = myBuffer
}
}
This block yields the following linter error:
5:3 error Unsafe assignment of an `any` value #typescript-eslint/no-unsafe-assignment
What is causing TypeScript to interpret this typed parameter as any? Do I need to somehow import the Buffer type?
As shown in this picture, my IDE does detect that "myBuffer" is of type Buffer:
My Dev Dependencies
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.8.7",
"#babel/eslint-parser": "^7.17.0",
"#babel/node": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/preset-env": "^7.8.7",
"#babel/register": "^7.8.6",
"#jest/console": "^25.1.0",
"#tsconfig/node16": "^1.0.2",
"#typescript-eslint/eslint-plugin": "^5.23.0",
"#typescript-eslint/parser": "^5.23.0",
"eslint": "^8.15.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-sort-exports": "^0.6.0",
"jest": "^25.1.0",
"nock": "^12.0.2",
"rimraf": "^3.0.2",
"typescript": "^4.6.4"
}
Silly me!
The issue is that I had not added #types/node as a project dependency. Since Buffer exists within Node (rather than TypeScript) the type was not defined when linting without that addition.
Running yarn add --dev #types/node (or npm install #types/node --save-dev) does the trick.
Related
I'm trying to run tests with jest on a basic mongodb set-up with express. following the instructions in the jestjs.io documentation. When I run may package.json script: "test": "jest" I get the following error:
TypeError: Class extends value undefined is not a constructor or null
at Object.<anonymous> (node_modules/#shelf/jest-mongodb/environment.js:20:49)
The line in environment.js referenced above is:
module.exports = class MongoEnvironment extends TestEnvironment {
So the TestEnvironmentclass is undefined. Judging from other stack discussions it looks like there's some circular reference issue. Possibly to be solved by changing the order of how the modules are run, but I don't know how to do this?
I've tried changing my version of node, and I've also tried deleting my node_modules and reinstalling. When I run yarn check it tells me all my packages are in sync.
package.json:
...
"dependencies": {
"dotenv": "^16.0.1",
"express": "^4.18.1",
"mongodb": "^4.6.0"
},
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-typescript": "^7.17.12",
"#shelf/jest-mongodb": "^3.0.0",
"#types/express": "^4.17.13",
"#types/jest": "^27.5.1",
"#types/mongodb": "^4.0.7",
"#types/node": "^17.0.36",
"jest": "^28.1.0",
"jest-environment-node": "^27.0.0",
"ts-jest": "^28.0.3",
"ts-node-dev": "^2.0.0",
"typescript": "^4.7.2"
},
...
I was able to solve it from:
const NodeEnvironment = require('jest-environment-node')
to:
const NodeEnvironment = require('jest-environment-node').default
I got rid of this error by updating:
"jest-environment-node": "^27.0.0",
to
"jest-environment-node": "^28.1.0",
Context
Im using Typescript and aws-sdk-mock to mock the responses of various aws functions.
After adding a couple new packages to my repo, a large portion of my tests are failing with
error TS2769: No overload matches this call.
Overload 1 of 2, '(err: undefined, data: StartExecutionOutput): void', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'StartExecutionOutput'.
Overload 2 of 2, '(err: AWSError, data?: undefined): void', gave the following error.
Argument of type '"invoked"' is not assignable to parameter of type 'undefined'.
I understand the error, I understand that the below code should cause the error, since the expected return type of the data parameter in the callback function should be of type StartExecutionOutput, instead i am trying to call it with a string.
AWSMock.mock('StepFunctions', 'startExecution', (params, callback) => {
fn();
callback(null, 'invoked');
});
What i don't understand is why this is only a problem after I update my packages. The packages I've added (axios & a package owned and written by my company) don't touch AWS code or have anything to do with it.
I know I can solve the problem by changing all of my AWS Mocks to return the proper types, but I don't have access to and don't want to waste my time creating test objects of all the internal AWS types to return in these callbacks.
My Questions
Why is this only a problem after I've updated my packages?
Can i easily suppress this error everywhere so i can return whatever i want in these callbacks?
Thanks
Packages from package.json
I should note that the package json in develop (passing tests) and my branch (failing tests) are the exact same except for the addition of the company package and axios.
"dependencies": {
"(company package obscured for privacy)": "^1.0.31",
"#types/aws-lambda": "^8.10.59",
"#types/jest": "^26.0.15",
"#types/uuid": "^8.3.0",
"aws-sdk": "^2.1046.0",
"axios": "^0.27.2",
"eslint-config-airbnb": "^18.2.0",
"full-icu": "^1.3.1",
"luxon": "^1.25.0",
"module-alias": "^2.2.2",
"ts-loader": "^8.0.6",
"typescript": "^4.0.3",
"uuid": "^8.3.1",
"webpack": "^5.1.3",
"webpack-cli": "^4.1.0",
"webpack-node-externals": "^2.5.2"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.5.0",
"#typescript-eslint/parser": "^4.5.0",
"aws-sdk-mock": "^5.1.0",
"elasticmq-npm": "^0.13.10",
"eslint": "^7.11.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-plugin-import": "^2.22.1",
"husky": "^4.3.0",
"jest": "^26.6.0",
"jest-junit": "^12.0.0",
"mocked-env": "^1.3.2",
"nodemon": "^2.0.6",
"pm2": "^5.1.0",
"prettier": "^2.1.2",
"serverless": "^2.46.0",
"serverless-dynamodb-local": "^0.2.39",
"serverless-offline": "^6.8.0",
"serverless-offline-sqs": "^4.0.1",
"ts-jest": "^26.4.1"
}
I ran into this overload issue using the aws-sdk, v2. There is a thread about it on Github, which looks unresolved and closed unfortunately.
Guidance in their thread is to upgrade to v3 of the SDK.
I have no idea how to solve this, but I tried many things that are probably just silly. I'd just like to finish changing my react-app to be a react-static-app, so I can finish my project. Everething works localy and I kind of know it has something to do with server vs client side JS, but I don't know where to start. Please help.
This is the error I get from regular yarn build:
[ERR_REQUIRE_ESM]: Must use import to load ES Module:
C:\my-projoect\node_modules\#babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of C:\my-projoect\node_modules\#babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
from C:\moji-projekt i\rost-static\node_modules\react-spring\renderprops.js is an ES module file as
it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js
files in that package scope as ES modules.
Instead rename objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use
import(), or remove "type": "module" from
C:\my-projoect\node_modules\#babel\runtime\helpers\esm\package.json.
An this is what I get when I run yarn build --debug:
ReferenceError: window is not defined
Withouth any indication where the problem is. I've placed if(typeof window === "undefined") return null; all around my project, but no luck.
Here's my package.json in case it could help to slove the issue:
{
"name": "rost-react-static",
"private": true,
"scripts": {
"start": "react-static start",
"stage": "react-static build --staging",
"build": "react-static build",
"analyze": "react-static build --analyze",
"serve": "serve dist -p 3000"
},
"dependencies": {
"#reach/router": "^1.3.4",
"#rooks/use-window-size": "^4.8.0",
"#tinymce/tinymce-react": "^3.10.1",
"#types/react": "^16.8.6",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"dotenv": "^8.2.0",
"emailjs-com": "^2.6.4",
"firebase": "^8.0.0",
"particles-bg": "^2.5.0",
"react": "^16.14.0",
"react-bootstrap": "^1.4.0",
"react-dom": "^16.14.0",
"react-ga": "^3.3.0",
"react-google-recaptcha": "^2.1.0",
"react-google-recaptcha-v3": "^1.7.0",
"react-helmet": "^6.1.0",
"react-hot-loader": "^4.13.0",
"react-html-parser": "^2.0.2",
"react-icons": "^4.2.0",
"react-particle-image": "^1.0.1",
"react-phone-number-input": "^3.1.10",
"react-player": "^2.7.0",
"react-redux": "^7.2.2",
"react-spring": "^8.0.27",
"react-static": "^7.5.1",
"react-static-plugin-reach-router": "^7.5.1",
"react-static-plugin-sass": "^7.3.0",
"react-static-plugin-sitemap": "^7.5.1",
"react-static-plugin-source-filesystem": "^7.5.1",
"recaptcha-v3": "^1.8.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"#types/react": "^16.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-config-react-app": "^6.0.0",
"eslint-config-react-tools": "^1.1.7",
"eslint-plugin-flowtype": "^5.2.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"serve": "^11.3.2"
}
}
I assume that you have missed some reference to window or there is some reference to window in some module you are using.
As per the react-static docs:
'Because React-Static code is both used in the browser during runtime and in node during build and export, it is very important that ALL your code be "universal" or in other words "node safe".'
https://github.com/react-static/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code
So checking for window with typeof, fixed this for me.
// works
const browserVar = typeof window !== 'undefined' && window.method ? 'browser' : 'node'
// does not work
const browserVar = window && window.method ? 'browser' : 'node'
I have a conflict of rules. When I include parentheses around multiline JSX, the prettier reports a error Delete `(` eslint (prettier/prettier).
But if I remove the parentheses I have another eslint error Missing parentheses around multilines JSX eslint(react/jsx-wrap-multilines)
<ScreenLayout
content={( <--------- problems here
<Component
// any props...
// any props...
>
// any components...
// any components...
// any components...
</Component>
problems here ------> )}
/>
I understand that the correct thing is to use parentheses. How to fix this Delete `(` eslint (prettier/prettier) validation?
My devDependencies
"#babel/cli": "^7.12.10",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#babel/preset-typescript": "^7.12.1",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/jest": "^26.0.19",
"#types/react-dom": "^16.9.10",
"#types/react-redux": "^7.1.12",
"#types/react-responsive": "^8.0.2",
"#types/react-router-dom": "^5.1.7",
"#types/styled-components": "^5.1.7",
"#typescript-eslint/eslint-plugin": "^4.14.2",
"#typescript-eslint/parser": "^4.14.2",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"browserslist": "^4.16.0",
"connect-history-api-fallback": "^1.6.0",
"cross-env": "^7.0.3",
"css-loader": "^4.3.0",
"eslint": "^7.19.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.2.0",
"eslint-import-resolver-typescript": "^2.3.0",
"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.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^26.6.0",
"jest-css-modules-transform": "^4.1.0",
"jest-sonar-reporter": "^2.0.0",
"jest-trx-results-processor": "^2.2.0",
"node-sass": "^5.0.0",
"prettier": "^2.2.1",
"sass-loader": "^8.0.2"
Faced the same issue. Particularly, I dislike an additional parenthesis inside my props. So disabling the rule should solve your problem.
Add this to your .eslintrc.json inside rules:
"react/jsx-wrap-multilines": "off"
The conflict exists because linters not only have code quality rules but also stylistic ones, so when you use Prettier you will have conflicting rules.
To fix this I disabled this rules in the linter, so it would take care about the code quality while Prettier takes care of the looks.
You can install a package like eslint-config-prettier.
npm install --save-dev eslint-config-prettier
And then extending the linter like this:
{ "extends": [
"some-other-config-you-use",
"prettier" ] }
Check out the repo: https://github.com/prettier/eslint-config-prettier
Upon the checking in this documentation I see that only prop rules that conflicting with prettier rules while other rules was actually the same like one and another. So the other way around except off the rule was by ignoring prop validation in the jsx-wrap-multilines rules on .eslintrc file in the rules option like this
'react/jsx-wrap-multilines': ['error', { prop: false }]
Add this to your .eslintrc.json inside rules:
"react/jsx-wrap-multilines": [
"error",
{ "arrow": true, "return": true, "declaration": true }
]
I upgraded to Babel 7 using https://github.com/babel/babel-upgrade and now have an error relating to grunt/browserify.
In grunt file:
browserify: {
options: {
watch: true,
transform: [['babelify', {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
['#babel/plugin-transform-react-jsx', {'pragma':'h'}]
],
}]],
browserifyOptions: {
standalone: 'Viewer', // Set name of package as window global when no package system is present
debug: true // Enables Source Maps
}
},
all: {
options: {
watch: true, // Listen for incremental changes to files (fast incremental build)
},
files: {
...
}
}
} . . .
I get the following error on 'browserify:all' :
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "XXXX") while parsing file: "XXXXXX"
Can someone help me to resolve this showstopper?
package.json:
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"grunt-browserify": "^5.3.0",
"jest": "^23.5.0",
"jsdom": "^12.1.0"
},
"dependencies": {
"#tweenjs/tween.js": "^17.3.0",
"autoprefixer": "^6.7.5",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"cssnano": "^3.10.0",
"diff-arrays-of-objects": "^1.1.2",
"eslint": "^3.7.1",
"eslint-plugin-react": "^6.10.3",
"filesize": "^3.6.1",
"grunt": "^1.0.2",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-env": "^0.4.4",
"grunt-eslint": "^19.0.0",
"grunt-open": "^0.2.4",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^2.1.0",
"mathjs": "^5.4.0",
"p-queue": "^3.0.0",
"preact": "^8.2.7",
"preact-range-slider": "^0.2.0",
"preact-redux": "^2.0.1",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"redux-undo": "^1.0.0-beta9-9-7",
"tslib": "^1.9.0",
"tween": "^0.9.0"
}
1- Delete node modules
npm install rimraf -g
rimraf node_modules
2- Upgrade "babelify": "^7.3.0" to "babelify": "^9.0.0" (Babelify 7.3.0 loads babel-core v 6.26.3)
3- Change "babel-preset-es2015" and "babel-preset-react to
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0"
(if you use them)
4- In .babelrc change "presets": ["react", "es2015"] to "presets": ["#babel/preset-env", "#babel/preset-react"] (if you use them)
5-npm install
Try deleting your node_modules folder and then rerunning npm install - this should remove any dependency remants from when you were on an older version.
When you run your grunt file it is looking for babel-register. However, for babel 7.0.0 and higher, you need it to look for #babel/register. So you need to install #babel/register and it should work without any further action from you.
npm install --save-dev #babel/register