I'm configuring a new project and have started importing some libraries when I get the following flow error. What does this error mean and how do I diagnose and fix? This is a react native project and I recently added the subscriptions-transport-ws library.
Launching Flow server
Spawned flow server (pid=13272)
node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/TouchHistoryMath.js:0
TouchHistoryMath. Duplicate module provider
current provider. See: node_modules/react-native-gesture-responder/library/TouchHistoryMath.js:0
package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "node_modules/.bin/flow",
"flow-stop": "node_modules/.bin/flow stop"
},
"dependencies": {
"#shoutem/ui": "^0.10.9",
"apollo-client": "0.8.0",
"graphql": "^0.9.1",
"graphql-tag": "^1.2.4",
"lodash": "^4.17.4",
"react": "~15.4.0",
"react-apollo": "^0.10.1",
"react-native": "0.41.2",
"react-native-lock": "^0.4.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-actions": "^1.2.1",
"redux-persist": "^4.4.0",
"redux-thunk": "^2.2.0",
"subscriptions-transport-ws": "^0.5.1"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "6.9.0",
"flow-bin": "0.37.0",
"jest": "18.1.0",
"react-test-renderer": "~15.4.0"
},
"jest": {
"preset": "react-native"
}
I believe it is a bug caused by two modules having the same name. A workaround that solved the issue for me was to tell Flow to ignore one of the modules. In other words, add one (or both) of the following lines under the [ignore] section of your .flowconfig file:
.*/node_modules/react-native/Libraries/Renderer/src/renderers/shared/shared/event/eventPlugins/TouchHistoryMath.js
.*/node_modules/react-native-gesture-responder/library/TouchHistoryMath.js
Note: the first of these files seems to be part of the core react-native library, while the second comes from a dependency used by #shoutem/ui. I'm not sure if there's any side effects with excluding any of these files from Flow.
You should comment these lines.
# UNSUPPORTED - HASTE
#module.system=haste
#module.system.haste.use_name_reducers=true
Reference: https://github.com/facebookarchive/node-haste
Unsupported/Archived Facebook no longer uses node-haste, and this
project was not being maintained.
Related
I'm trying to work with this twitch npm package (https://www.npmjs.com/package/twitch) and am running into some issues when deploying via creat-react-app / react-scripts.
From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.
./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
app_1 | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)
If I manually deleted the "es" folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.
Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!
If it helps, here is my package.json
{
"name": "ui",
"version": "1.0.0",
"license": "UNLICENCED",
"private": true,
"dependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/register": "^7.0.0",
"axios": "^0.19.2",
"babel-plugin-dynamic-import-node": "^2.2.0",
"btoa": "^1.2.1",
"clipboard-copy": "^3.0.0",
"connected-react-router": "^6.8.0",
"dateformat": "^3.0.3",
"dotenv": "^8.0.0",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.4.1",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"firebase": "^5.2.0",
"history": "^4.7.2",
"human-date": "^1.4.0",
"ignore-styles": "^5.0.1",
"immutability-helper": "^3.0.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"qs": "^6.5.2",
"react": "^16.8.0",
"react-animations": "^1.0.0",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.0",
"react-ga": "^2.5.3",
"react-gtm-module": "^2.0.10",
"react-helmet": "^5.2.0",
"react-image-crop": "^8.3.0",
"react-is": "^16.8.0",
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^2.0.1",
"react-on-screen": "^2.1.1",
"react-pdf": "^4.0.5",
"react-pose": "^4.0.6",
"react-redux": "^6.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-stripe-elements": "^2.0.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"semantic-ui-calendar-react": "^0.15.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"twitch": "^4.2.4",
"url-loader": "^1.1.2",
"validator": "^11.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src",
"server": "NODE_ENV=production node server/bootstrap.js"
},
"engines": {
"node": "^10.0.0",
"yarn": "^1.12.3"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.8.1",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.2"
},
"proxy": "http://api:8080",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleNameMapper": {
"\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
}
}
}
A suggestion presented at this GitHub comment was to add react-app-rewired to your project and then use this config-overrides.js file:
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
In my project I was already using react-app-rewired, so I just added the rule from that snippet. This workaround fixed the error for me.
In the specific case of the twitch library, the author has suggested trying the #next release, although I haven't personally verified that solution yet.
Upgrading to the latest react-scripts version of 5.0.1 in my package.json as of writing this, has solved the issue for me.
Upgrading tolatest react-scripts version of 5.0.1 in my package.json as of writing this
use the code
npm install --save --save-exact react-scripts#5.0.1
or
yarn add --exact react-scripts#5.0.1
I just upgraded my react app to include the newest react router v5.2 in order to get the useHistory hook. Things worked fine until I restarted for the first time next morning. Now when I use f5 to start a debugging session I get an exception in a node-modules file named json3. (BTW, the app runs okay in the browser after yarn start.) The exception is "SyntaxError: Unexpected token in JSON at position 1". The code is line 186 in json3.js:
186 parseSupported = !parse('"\t"');
I read the json3 README.md and it says: "JSON 3 is deprecated and no longer maintained. Please don't use it in new projects, and migrate existing projects to use the native JSON.parse and JSON.stringify instead. JSON 3 was a JSON polyfill for older JavaScript platforms." I don't know how this was installed and I don't think I need it. It's not listed in my package.json. It's at the top level in node_modules. How do I remove this?
Just in case it's needed, my package.json is this:
{
"name": "blue-duck-pwa",
"version": "0.1.0",
"private": true,
"devDependencies": {
"enzyme": "3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-react": "^7.18.3",
"faker": "^4.1.0",
"prettier": "2.0.1",
"react-scripts": "1.1.0",
"react-test-renderer": "16.0.0",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "1.1.4",
"redux-devtools-log-monitor": "2.0.1",
"redux-logger": "^3.0.6"
},
"dependencies": {
"add": "^2.0.6",
"base-64": "^0.1.0",
"bootstrap": "^3.3.7",
"chart.js": "2.9.3",
"cheerio": "0.19.x",
"file-saver": "^1.3.8",
"history": "^4.6.3",
"lodash": "^4.17.4",
"lodash.clonedeep": "^4.5.0",
"prop-types": "15.6.0",
"rc-dropdown": "^2.1.0",
"rc-menu": "^6.2.5",
"react": "16.13.0",
"react-auto-suggest": "^0.0.12",
"react-bootstrap": "0.32.0",
"react-chartjs-2": "2.6.4",
"react-dom": "16.13.0",
"react-notification-system": "0.2.16",
"react-portal": "^4.0.0",
"react-redux": "^5.0.6",
"react-router": "5.2.0",
"react-router-bootstrap": "0.25.0",
"react-router-dom": "5.2.0",
"react-scrollchor": "^4.2.1",
"react-sizes": "1.0.0",
"redux": "^3.7.2",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"uuid": "^3.1.0",
"xml2js": "0.4.19"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Because of the conflicts I caused by upgrading my node_modules without regard to breaking changes (dumb I know), I was only able to fix this problem by starting over. I made another create-react-app, copied my package.json (with the corrected version numbers), ran yarn install, then copied over all my program data: src, .vscode, .eslintrc, etc, etc. With a few easy fixes, this worked. No exceptions deep in the node_modules.
I am trying to run my app on Android but I am getting this error I don't know why I am getting this, I don't know what is causing this error in my project
I have tried tried many ways to resolve this issue but Still wasn't able to resolve this issue.
Tried To register two Views with the same name RTCVideoView
My Package.json is
{
"name": "Hello World",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.6.2",
"#react-native-community/slider": "^2.0.0",
"axios": "^0.19.0",
"connectycube-reactnative": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-autogrow-textinput": "^5.2.0",
"react-native-cache-store": "^1.0.2",
"react-native-calendars": "^1.212.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-image-picker": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-navigation": "^3.0.0",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "^0.0.4",
"react-native-webrtc": "^1.75.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-prompt": "^1.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Any Help Would be Appreciated.
All you need is just clean up the cache by the following command
npm cache clean --force
This will resolve your problem most probably
The version of react-native-webrtc you have specified in your package.json is different from the version that connectycube-reactnative depends on. The latest connectycube-reactnative (1.8.0) depends on "react-native-webrtc": "1.69.1".
Double check the dependency of the version you have installed by looking at the node_modules/connectycube-reactnative/package.json and match the version specified in your package.json to the version the connectycube-reactnative requires.
The #arzundo answer is correct
And seems this issue is addressed in latest releases here https://github.com/ConnectyCube/connectycube-reactnative-samples/tree/master/RNVideoChat so you can simply try to pull the latest master
Due to some package incompatibilities I have updated my package.json to the latest version for most of the entries, however now when I start the application it displays this long list of errors in the browser:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Dll Reference Plugin Invalid Options
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/warning.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/reactProdInvariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/object-assign/index.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/ReactDOMComponentTree.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/ExecutionEnvironment.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/jquery/dist/jquery.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react/react.js']['meta'] is an invalid additional property
And it just goes on and on for about 500 errors. There were no compile errors when the project was built. Here is my package.json:
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "^4.7.2",
"#types/react": "~16.0.2",
"#types/react-dom": "~16.0.9",
"#types/react-hot-loader": "~4.1.0",
"#types/react-router": "~4.4.0",
"#types/react-router-dom": "~4.3.1",
"#types/seamless-immutable": "^7.1.1",
"aspnet-webpack-react": "~4.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react-hot-loader": "~4.3.12",
"react-router-dom": "~4.3.1",
"style-loader": "0.18.2",
"typescript": "~3.1.6",
"url-loader": "0.5.9",
"webpack": "4.25.1",
"webpack-hot-middleware": "2.18.2",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "3.0.0",
"webpack-dev-middleware": "3.4.0",
"#types/deep-freeze": "^0.1.1",
"#types/deep-freeze-es6": "^1.0.0",
"#types/material-ui": "^0.20.4",
"#types/react-datepicker": "~1.1.7",
"#types/react-virtualized": "~9.18.7",
"a-react-timepicker": "~2.0.0"
},
"dependencies": {
"deep-freeze-es6": "https://registry.npmjs.org/deep-freeze-es6/-/deep-freeze-es6-1.0.1.tgz",
"history": "https://registry.npmjs.org/history/-/history-4.6.3.tgz",
"react-datepicker": "~1.8.0",
"react-timekeeper": "~1.0.9",
"react-virtualized": "~9.21.0",
"seamless-immutable": "^7.1.2",
"react": "~16.6.0",
"react-dom": "~16.6.0",
"moment": "2.20.0"
}
Is anyone familiar with why this is happening? I've searched multiple posts and it seems like people always just have a couple errors. Not 500.
I don't know if you solved it or not , but I had the same problem when I updated to Webpack 4 . The solution was to to run the DllPlugin from webpack.config.vendor.js so that vendor-manifest.json would get the latest attributes.
To do this, in packages.json put this line in the scripts section
"scripts": {
"build": "webpack --config webpack.config.vendor.js",
}
and from console run npm run build
I am building a react app. I have used yeoman to generate the react app structure. I am using webpack to bundle all js files. My package.json is -
{
"dependencies": {
"axios": "^0.15.0",
"classnames": "^2.2.5",
"es6-shim": "^0.35.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-mdl": "^1.7.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"redux": "^3.5.1",
"todomvc-app-css": "^2.0.4"
},
"devDependencies": {
"autoprefixer": "^6.2.2",
"babel-core": "^6.13.0",
"babel-eslint": "^6.0.2",
"babel-loader": "^6.2.0",
"babel-plugin-istanbul": "^2.0.1",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.2.0",
"babel-preset-react": "^6.1.18",
"browser-sync": "^2.9.11",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.23.1",
"del": "^2.0.2",
"es6-shim": "^0.35.0",
"eslint": "^3.2.2",
"eslint-config-xo-react": "^0.7.0",
"eslint-config-xo-space": "^0.12.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-util": "^3.0.7",
"html-webpack-plugin": "^2.9.0",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-phantomjs-shim": "^1.1.2",
"karma-webpack": "^1.7.0",
"node-sass": "^3.4.2",
"phantomjs-prebuilt": "^2.1.6",
"postcss-loader": "^0.8.0",
"react-addons-test-utils": "^15.0.1",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "2.1.0-beta.20",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"extends": [
"xo-react/space",
"xo-space/esnext"
]
}
}
I am using axios to make http requests. Presently, I have not coded a server to return a json data. Hence, to test the app's functionality, I want to serve static json data from a json file.
How can I achieve this ?
Since this setup is running a web-server, I hope a json file can be served using something like - axios.get('http://localhost:3000/user.json').
If you're starting your app from the Facebook's 'create-react-app' instructions found here: https://facebook.github.io/react/docs/installation.html
Then I found an easy way to be able to access JSON files from the URL without having the React Router get in the way and intercept the request.
All you have to do is in your index.js of that 'create-react-app' scaffolding, add something like this as the very first line:
import './myJsonFile.json';
And that's it, as afterwards going to:
http://localhost:3000/myJsonFile.json
would correctly fetch the file without React router interfering in the lookup.
(maybe it wasn't exactly your question as you've used a different way to generate the app, but this would be an answer for those who use the 'create-react-app' as a base).
You can use the webpack file-loader to have webpack serving that file as if it was any other static files, e.g. an image.
You can try with this in your "main" (entrypoint) file:
require("file-loader?name=api/[name].[ext]!./user.json");
This require is just needed to tell webpack to "emit" that file in the output destination, otherwise it doesn't know anything about it.
You also need to install the file-loader:
npm install --save-dev file-loader
Then with webpack-dev-server you should be able to access that file from http://localhost:8080/api/user.json (replace localhost:8080 according to your webpack dev server config).
However, if you need to stub a json api, I'd rather use something like these:
https://www.npmjs.com/package/json-server
https://www.npmjs.com/package/dyson
that are more flexible and can handle more advanced thing like serving the response with the right content type, testing cross domain issues, JSONP, etc.
If you want something simpler, you can use this: https://www.npmjs.com/package/superstatic to simply serve static files,
or even simpler, check out how these one-liners to start a simple http server to serve your static json files:
https://gist.github.com/willurd/5720255