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.
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",
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.
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 updated React-Native from 0.14.0 to 0.16.0 and from now, I have errors at runtime:
Here are the npm dependencies:
"dependencies": {
"async": "^1.5.0",
"immutable": "^3.7.6",
"react-native": "^0.16.0",
"react-native-contacts": "../../react-native-contacts",
"react-native-contacts-rx": "^1.0.1",
"react-native-gifted-messenger": "0.0.7",
"react-native-i18n": "0.0.6",
"react-redux": "^4.0.1",
"redux": "^3.0.5",
"rx": "^4.0.7"
},
"devDependencies": {
"babel-eslint": "^5.0.0-beta6",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^2.1.1",
"eslint-plugin-react": "^3.11.3",
"events": "^1.1.0",
"flux": "^2.1.1",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"redux-devtools": "^3.0.0"
}
And my .babelrc file:
{
"retainLines": true,
"compact": true,
"comments": false,
}
Any suggestions?
The Questions was answered in an issue #Jean Lebrument submitted. Positing answer here for stumblers like myself...
https://github.com/facebook/react-native/issues/4844
The problem is most likely in your .babelrc file. If you experience this problem, compare your .babelrc file to react natives default one. Try removing the file or building off of default one, adding the features that you need.
Make sure to restart your packager, stop, and re-run your project.
I had this exact same problem you can check out what I did here - https://stackoverflow.com/a/53069785/2884655
But in short I just imported the babel-plugin-transform-async-to-generator module into my project and added it into my babelrc file