I am struggling with the fetch API and the implementation of flowjs inside a react-native application.
Using Nuclide, I can see that the fetch function I use to get data from a remote API is not covered by Flow...
Yes, it's no big deal if I get 99% of my code monitored but still. I want to understand what's going on.
I have installed flow-typed. I have create a stub for my fetch, I can see it in flow-typed/npm/fbjs_vx.x.x.x and here it is :
declare module 'fbjs/lib/fetch' {
declare module.exports: any;
}
I also try to download alternative ponyfill or polyfill in order to get that line covered without any success.
If no libdef already exist, how can I say "fetch take a string as argument and return a promise" to flow ?
Thanks for help
UPDATE
Here is the package.json
{
"name": "BeerOmatic",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "flow",
"android": "ENVFILE=.env.dev react-native run-android"
},
"dependencies": {
"eslint-config-airbnb-flow": "^1.0.2",
"eslint-plugin-flowtype": "^2.35.0",
"fetch-ponyfill": "^4.1.0",
"flow-typed": "^2.1.2",
"react": "16.0.0-alpha.12",
"react-native": "0.46.3",
"react-native-config": "^0.5.0",
"react-native-fetch-polyfill": "^1.1.2",
"react-native-navigation": "^1.1.136",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-jest": "20.0.3",
"babel-preset-flow": "^6.23.0",
"babel-preset-react-native": "2.1.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-react-native": "^2.3.2",
"flow-bin": "^0.50.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
Well... as most of the time, the answer was in the doc...
To declare a global function that should be accessible throughout your project, use the declare function syntax in a libdef file:
flow-typed/myLibDef.js
declare function foo(a: number): string;
This tells Flow that any code within the project can reference the foo global function, and that the function takes one argument (a number) and it returns a string.
So I added that
declare function fetch (a: string): Promise;
to a brand new myLibDef.js file at the root of my flow-typed folder.
Then surprisingly, I had to add it to my .flowConfig (in the libs section). I was pretty sure it was automatic but... well...
Anyway now fetch is covered ! \0/
Related
I just installed eslint-plugin-unused-imports. When I commit, it does all its linting work and removed a bunch of imports even though many of those imports are being used in the file.
May or may not be worth noting, this project has a bunch of legacy Backbone and newer React components, with some Backbone views rendering React components. Also, this is a JS not TS project.
eslint-plugin-unused-imports issues states:
https://github.com/sweepline/eslint-plugin-unused-imports/issues/new?assignees=&labels=&template=bug_report.md&title=
If the issue is with something being marked wrongly as a unused import
and therefore being removed. It is an issue with the imported package
(#typescript-eslint/eslint-plugin for TS or eslint for JS) and its
no-unused-vars rule. I cannot do anything about this except updating
if a fix is made upstream.
If new rules are added no-unused-vars upstream which should be
autofixed, mark your issue rule addition.
But I'm not sure how to address this.
Below is my linting setup:
"devDependencies": {
...
"eslint": "^6.8.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^6.10.3",
"eslint-plugin-standard": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.0",
...
"prettier": "^2.2.1",
"prettier-eslint": "^9.0.0",
"prettier-eslint-cli": "^5.0.0",
"prettier-stylelint": "^0.4.2",
...
"stylelint": "^9.8.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-prettier": "^1.1.2",
...
},
"peerDependencies": {
"eslint": ">=6.0.1",
"eslint-plugin-import": ">=2.18.0",
"eslint-plugin-node": ">=9.1.0",
"eslint-plugin-promise": ">=4.2.1",
"eslint-plugin-standard": ">=4.0.0"
},
"lint-staged": {
"src/**/*.{js,json,jsx,scss}": [
"node ./scripts/lint-prettier.js"
],
"*.{js,jsx,json,md}": [
"prettier --list-different"
]
},
...
"husky": {
"hooks": {
"pre-commit": "lint-staged && npm test"
}
}
}
I'm writing a new application with nodejs/express/sequelize. I use babel 7 to compile my ES6. Everything works fine with sequelize so far except when I want to use removeHook method. I get this error when I use removeHook on an instance.
/home/xxxx/PhpstormProjects/some-project/node_modules/lodas/lodash.js:15709
var result = object(this.__wrapped__),
^
TypeError: Class constructor Model cannot be invoked without 'new'
at self.object.(anonymous function) [as removeHook] (/home/xxxx/PhpstormProjects/some-project/node_modules/lodash/lodash.js:15709:28)
at removeHook (/home/xxxx/PhpstormProjects/some-project/src/controllers/user.js:44:22)
at callback (/home/xxxx/PhpstormProjects/some-project/src/util/loginStrategy.js:9:18)
I know this problem is coming from Babel. I was using babel six at first, but I had the same problem. I have tried everything available on GitHub, and the best solution was the following .babelrc but still I'm getting the same error. Also, I have upgraded lodash with no effect. I tried babel-plugin-lodash with no result.
.babelrc
{
"plugins": ["lodash"],
"presets": [
["#babel/env", {
"targets": {
"node": "10.16.0"
}
}]
]
}
package.json
{
"name": "xxxxxxxxxxx",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "sessionSecret=lool nodemon ./app.js --exec babel-node -e js"
},
"dependencies": {
"bcrypt": "^3.0.6",
"body-parser": "^1.19.0",
"connect-pg-simple": "^5.0.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-session": "^1.16.2",
"fs": "0.0.1-security",
"lodash": "^4.17.11",
"lodash-es": "^4.17.11",
"nodemon": "^1.19.1",
"pg": "^7.11.0",
"sequelize": "^5.8.12",
"sequelize-cli": "^5.5.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-classes": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"babel-eslint": "^10.0.2",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-latest-node": "^3.2.1",
"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.18.0"
}
}
Node Version
v10.16.0
I have seen other answers, but they didn't solve my problem. Most of them are really old. Please let me know if you need more information.
I solved my own problem. It turns out that I can't use removeHook on instances. I should have used models. This is a big problem with Sequelize documentation. Here is what I found.
Instance and class methods have been removed as of v4. See here(it's a 404)
Also, your beforeUpdate hook updates the user asynchronously. You should return a promise so sequelize knows it has to wait for your hook to finish doing its task and updating the user.
I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.
error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"axios": "^0.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"react": "16.2.0",
"react-native": "^0.57.8",
"react-native-branch": "^2.3.0",
"react-native-camera": "^1.0.0",
"react-native-datepicker": "^1.6.0",
"react-native-deep-linking": "^2.1.0",
"react-native-fabric": "^0.5.1",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-modal": "^4.1.1",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-saga": "^0.16.0",
"stripe-client": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-preset-airbnb": "^3.2.0",
"detox": "^9.0.4",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-react-native": "^3.6.0",
"jest-cli": "^23.6.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-test-renderer": "16.0.0",
"remote-redux-devtools": "^0.5.12"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"airbnb",
"#babel/preset-env",
"module:react-native",
"module:metro-react-native-babel-preset"
]
}
Deleting .babelrc file will fix this for you.
Please check react native upgrade helper
https://react-native-community.github.io/upgrade-helper
and specify your current React native version and the version to update (0.57 in your case)
You will see changes need to do in your case to make the code compatible with updated version
Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.
Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.
To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.
You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.
It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.
I'm having trouble getting a Vue site to work consistently in IE11. I'm currently trying to use browserify to transpile with Babel to ES5, but seemingly it isn't working consistently (it sometimes works, but then after making a non-change to a JS file (such as adding a space to the end of a line) and then recompiling it will suddenly not work).
I'm seeing errors such as:
SCRIPT1006: Expected ')' in _typed_array.js
SCRIPT1002: Syntax error in _collection.js
So I believe this means the JS isn't being transpiled correctly into ES5?
Here's a copy of my package.json that contains all my build scripts:
{
"private": true,
"scripts": {
"watch-js": "watchify -vd -p browserify-hmr -e rest-theme/src/main.js -o rest-theme/dist/build.js",
"watch-scss": "./node_modules/.bin/node-sass -w --output-style=compressed scss/style.scss rest-theme/dist/build.css",
"dev": "npm run watch-scss | npm run watch-js",
"build": "cross-env NODE_ENV=production browserify rest-theme/src/main.js | uglifyjs -c warnings=false -m > rest-theme/dist/build.js"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"babel-runtime": "^6.9.2",
"mixitup": "^3.2.1",
"vue": "^2.1.1",
"vue-moment": "^2.0.1",
"vue-resource": "^1.0.0",
"vue-router": "^2.1.0",
"vue-smooth-scroll": "^1.0.13",
"viewport-units-buggyfill": "^0.6.0",
"vivus": "^0.4.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^5.8.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"browserify-hmr": "^0.3.5",
"cross-env": "^1.0.6",
"node-sass": "^3.0.0",
"uglify-js": "^2.5.0",
"vue-hot-reload-api": "^2.0.6",
"vueify": "^9.3.0",
"vueify-insert-css": "^1.0.0",
"vue-migration-helper": "^1.1.1",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
"vueify",
["babelify", { "presets": ["es2015"] }]
]
},
"browser": {
"vue": "./node_modules/vue/dist/vue.common"
}
}
Nothing is really jumping out at me as to why it isn't compiling correctly; but perhaps there is something incorrect in my syntax, or an old version of something that is causing the build to fail sometimes?
I'm also including the babel polyfill on the first line of my main JS file:
import "babel-polyfill";
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
.....
But perhaps that is implemented incorrectly?
Let me know if I can provide more info, or additional script pieces to help illuminate anything!
I have a module I am trying to test. That module is using other external modules and jest is having a hard time resolving them.
It is resolving the base path to:
./node_modules/react-tag-input/dist-modules/
Instead of:
./node_modules/react-tag-input/node_modules/react-dnd
Below, is a simplified version of what is happening:
Error:
Cannot find module 'react-dnd' from 'reactTags.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:160:17)
at Object.<anonymous> (node_modules/react-tag-input/dist-modules/reactTags.js:13:17)
at Object.<anonymous> (src/tagger/eventtagger.js:5:404)
This is my test file:
caseevent.test.js
import EventTagger from './eventtagger.js';
eventtagger.js
import ReactTags from 'react-tag-input';
package.json
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"modulePaths": [
"<rootDir>"
],
},
"dependencies": {
"babel-jest": "^17.0.2",
"flux": "^2.0.1",
"install": "^0.8.1",
"jest": "^17.0.3",
"lodash.flow": "^3.3.0",
"npm": "^3.10.6",
"object-assign": "^1.0.0",
"react": "^15.4.0",
"react-dnd": "git+https://github.com/jcrogel/react-dnd.git",
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^15.4.0",
"react-tag-input": "^4.4.0",
"react-tagcloud": "^0.6.1"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.14.0",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"enzyme": "^2.6.0",
"jest-cli": "^17.0.3",
"jsdom": "^9.4.0",
"lodash": "4.14.1",
"react-addons-test-utils": "^15.4.0",
"react-native": "^0.38.0",
"react-test-renderer": "15.4.0",
"sinon": "^1.17.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^2.0.1"
}
What am I missing? How do I get jest-resolve to find or mock deeper components?
I'm having the same issue as well. Some things I've attempted:
jest.unmock(module) at the top of the testing file
polyfill the module in a Jest setup file
jest.mock(jest.fn() => {console.log('do something'))
Lastly, and this seemed to work, but I can't find documentation on this:
At the top of the testing file:
/**
* #providesModule moduleName
*/
This seems to recognize the module I needed. Jest is supposed to implicitly see modules out of the box, but I haven't had that experience with it.
I had a similar problem in my jest tests, with an external dependency of webpack.
To solve that:
I create a __mocks__ folder in the same level if __test__ folder.
Inside that, I created a file with the same name of the dependency, in my case it was jquery ($.js).
Inside my test file, I use jest.mock function to reference the mock external dependency: jest.mock('$');
from jest the docs:
https://facebook.github.io/jest/docs/manual-mocks.html
Hope it could help.