When I used typescript to create my react project, I introduced Redux error reporting, which indicated that I could not find it, but I had to install all the dependencies.
Here's my package.json
{
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^24.0.11",
"#types/node": "^11.11.3",
"#types/react": "^16.8.8",
"#types/react-dom": "^16.8.2",
"#types/react-redux": "^7.0.3",
"#types/react-router-dom": "^4.3.1",
"axios": "^0.18.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-redux": "^6.0.1",
"react-router-dom": "^4.4.0",
"react-scripts": "2.1.8",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"typescript": "^3.3.3333"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"node-sass": "^4.11.0",
"react-app-rewired": "^2.1.1"
}
}
Here's my store
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import reducer from './reducer'
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(thunk)
))
Unfortunately, the app doesn't compile and it complains with:
./node_modules/_react-redux#6.0.1#react-redux/es/connect/mapDispatchToProps.js
Module not found: Can't resolve 'redux' in '~/node_modules/_react-redux#6.0.1#react-redux/es/connect'
What should I do is right. Please help me, thanks.
Try to install both redux and react-redux at same time:
npm install --save redux react-redux
This worked for me
npm install --save redux react-redux
For people that might come across this in the future, I came across the same issue.
I was calling connect(mapStateToProps, null)(Component). All I had to do was actually pass in a proper mapDispatchToProps argument and it solved the problem.
It had nothing to do with redux not being properly installed.
--save means that dependency install as local dependency, that means related for that particular project.
npm install redux -g in here redux install as global dependency
This works for me in typescript as follows:
yarn add #types/redux #types/react-redux
(or using npm try: npm install add #types/redux #types/react-redux)
You my find it stupid but for my case it was: I'm working with both node project and react project opened in a single VSCODE window so i was added those redux packages into the Wrong package.json file :(
Related
I am Creating a overlay-navbar using npm overlay-navbar module
https://www.npmjs.com/package/overlay-navbar
But I am getting a error:
the requested module './io5' contains conflicting star exports for the names 'iologoandroid', 'iologoangular',
'iologoapple', 'iologobitbucket', 'iologobitcoin', 'iologobuffer',
'iologochrome', 'iologoclosedcaptioning', 'iologocodepen', 'iologocss3', 'iologodesignernews', 'iologodribbble',
'iologodropbox', 'iologoeuro', 'iologofacebook', 'iologoflickr',
'iologofoursquare', 'iologogithub', 'iologogoogle', 'iologohackernews', 'iologohtml5', 'iologoinstagram',
'iologoionic', 'iologoionitron', 'iologojavascript', 'iologolinkedin',
'iologomarkdown', 'iologonosmoking', 'iologonodejs', 'iologonpm', 'iologooctocat',
'iologopinterest', 'iologoplaystation', 'iologopython', 'iologoreddit', 'iologorss', 'iologosass', 'iologoskype',
'iologoslack', 'iologosnapchat', 'iologosteam', 'iologotumblr', 'iologotux', 'iologotwitch', 'iologotwitter',
'iologousd', 'iologovimeo', 'iologovk', 'iologowhatsapp',
'iologowindows', 'iologowordpress', 'iologoxbox', 'iologoxing', 'iologoyahoo', 'iologoyen', '
iologoyoutube' with the previous requested module './io'
what can I do to resolve this issue ?
Here is my package.json file :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"overlay-navbar": "^1.1.1",
"react": "^17.0.2",
"react-alert": "^7.0.3",
"react-alert-template-basic": "^1.0.2",
"react-bootstrap": "^2.0.3",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"webpack": "^5.65.0"
}
}
I have tried reinstalling modules but it does'nt work
I think this issue is related to react-icons and webpack 5.
Someone has already posted a similar issue in react-icons github https://github.com/react-icons/react-icons/issues/514
and you're using create-react-app version 5 which use webpack 5 as module bundler. Nothing we can really do until react-icons updating their library regarding this (if you insist on using version 5).
Meanwhile, the easiest way you can downgrade your webpack to version 4 by downgrading create-react-app.
Try this command:
npm i react-scripts#4
**note: I notice too that you're using react-router-dom ^6.2.1, you should downgrade this too as overlay-navbar doesn't support that version.
Try this command:
npm i react-router-dom#5
I have found a very simple but effective solution, Problem is offcourse with React Icons as there is some kind of bug in io folder, so all you need to do is
npm uninstall react-icons
then install version 3 by running
npm install react-icons#3
boom this worked in my case. Also i suggest you to do the same for react-router-dom because there is an issue with Route in it.
Well, if your are concerned about using overlay-navbar then there is a way of using it without degrading react Scripts and react router.
Overlay-Nav-bar doesn't uses any icons from io and io5 folders so follow the following steps.
-Go to node modules -> react icons folder
Then Go to add.js file and then comment out this line // export * from './io5';
Then go to all.d.ts file and comment out the same file.
`
// THIS FILE IS AUTO GENERATED
export * from './fa';
export * from './io';
// export * from './io5';
export * from './md';
export * from './ti';
export * from './go';
export * from './fi';
export * from './gi';
export * from './wi';
export * from './di';
export * from './ai';
export * from './bs';
export * from './ri';
export * from './fc';
export * from './gr';
export * from './hi';
export * from './si';
export * from './im';
export * from './bi';
export * from './cg';
export * from './vsc';
`
Restart Your Development server. It should work Now
I am using react with typescript in my project and also I am doing snapshot testing but when I run npm test command in vscode terminal I am getting error which I have attached in the attachement.
could you please let me know what should I do so that all the test case run successfully or any other thing I need to configure
Here is my package.json
{
"name": "vcc-collaboration-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fluentui/react": "^8.42.1",
"#fluentui/react-file-type-icons": "^8.5.6",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/react-test-renderer": "^17.0.1",
"ag-grid-community": "^26.2.0",
"ag-grid-react": "^26.2.0",
"axios": "^0.24.0",
"babel-jest": "^26.6.0",
"jest": "^26.6.0",
"jest-watch-typeahead": "^1.0.0",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.4.2",
"react-grid": "^4.0.4",
"react-icons": "^4.3.1",
"react-router-dom": "^5.0.0",
"react-scripts": "4.0.3",
"react-test-renderer": "^17.0.2",
"vcc-ui": "^2.11.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/jest": "^27.0.3",
"#types/node": "^16.11.7",
"#types/react": "^17.0.35",
"#types/react-dom": "^17.0.11",
"#types/react-dropzone": "^5.1.0",
"#types/react-router": "^5.1.17",
"#types/react-router-dom": "^5.3.2",
"typescript": "^4.5.2"
}
}
EngineeringArea.test.tsx
import React from "react";
import * as ShallowRenderer from "react-test-renderer/shallow";
import EngineeringArea from "./EngineeringArea";
describe("EngineeringArea Screen", () => {
it("EngineeringArea Screen renders correctly", () => {
const renderer = ShallowRenderer.createRenderer();
const component = renderer.render(<EngineeringArea />);
expect(component).toMatchSnapshot();
});
});
You need to install specifically v0.6.5 of jest-watch-typeahead
npm i -D --exact jest-watch-typeahead#0.6.5
Had this error come up. My answer was using nvm to switch from node's current release (my system default) to its LTS (16.14.0) with nvm use 16
Also got this error message when trying to test. Changing node version worked for me. Here is link to the article:
https://github.com/facebook/create-react-app/issues/11792
Last answer was wrong. Here's the correct answer. https://github.com/facebook/create-react-app/issues/11043#issuecomment-942472592
In my case with Vite-React and with Create React App, works:
You need to install specifically v0.6.5 of jest-watch-typeahead
npm i -D --exact jest-watch-typeahead#0.6.5
Thank you Matt
I faced this issue while I was trying to create a new React Application using CRA with npx.
I followed what Matt suggested in his answer but jest started throwing an error saying, it's better to remove any babel-jest dependency, which is weird but I guess jest-watch-typehead` uses babel maybe (it's a wild guess, I have not checked).
Anyway, here's what I did based on the suggestion I got on console from the error thrown by babel-jest.
Removed package-lock.json file.
Removed node_modules/.
Did a fresh npm i.
I ran my tests again and got an error for not importing React in App.test.js, so I simply imported and it worked.
I am creating outlook add-in with react/typescript. When I run my code with npm run start, following message appeared and I was not able to run my react app.
Failed to compile.
./src/index.tsx
Line 9: 'Office' is not defined no-undef
Search for the keywords to learn more about each error.
In package.json, if react-script version is newer than 3.0.0, This error happens. If it is lower(e.x. 2.8.8), we can execute the react app without errors. Does anyone give me some workarounds?
Index.tsx
import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { AppContainer } from './components';
import { Provider } from 'react-redux';
import { store } from './store/store';
Office.onReady(() => {
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('root')
);
});
package.json
"name": "outlookApp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#microsoft/office-js": "^1.1.29",
"#microsoft/office-js-helpers": "^1.0.2",
"#types/jest": "24.0.11",
"#types/node": "11.13.6",
"#types/react": "16.8.23",
"#types/react-dom": "16.8.4",
"office-ui-fabric-react": "^6.190.1",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"typescript": "3.4.4",
"uuid": "^3.3.2"
},
"devDependencies": {
"#types/gtag.js": "0.0.0",
"#types/office-js": "1.0.1",
"#types/react-redux": "^7.1.0",
"#types/react-router-dom": "^4.3.4",
"#types/uuid": "^3.4.5",
"redux-devtools-extension": "^2.13.8"
},
"scripts": {
"start": "react-scripts start",
"win": "set HTTPS=true&&set BROWSER=none&&react-scripts start",
"mac": "export HTTPS=true&&export BROWSER=none&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test-win-ci": "set CI=true&&npm test",
"test-mac-ci": "CI=true npm test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:7071"
}
One workaround is to just put the comment "/* global Excel, Office */" into the JS/TS/TSX file that it complains about, and things will magically work.
Note: The solution is taken from a comment at https://github.com/OfficeDev/office-js-docs-pr/issues/691. If anyone knowns of a better solution, please share it with the community!
I am trying to get data from firebase collection but getting error, can anybody help?
I am getting this error
Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required. Please checkout the v3 migration guide:
here is my code.
import React, { Component } from 'react'
import Notifications from './Notifications';
import ProjectList from '../projects/ProjectList';
import {connect} from 'react-redux';
import {firestoreConnect} from 'react-redux-firebase';
import {compose} from 'redux';
import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
class Dashboard extends Component {
render() {
return (
<div className="dashboard container">
<div className="row">
<div className="col s12 m6"><ProjectList projects={this.props.projects}></ProjectList></div>
<div className="col s12 m5 offset-m1"><Notifications></Notifications></div>
</div>
</div>
)
}
}
const mapStateToProps = (state) =>
{
console.log(state);
return ({projects:state.projectReducer.projects})
}
export default compose(firebaseConnect([
'projects'
]), connect(mapStateToProps)) (Dashboard)
I have tried this export but same error
export default compose(connect(mapStateToProps), firestoreConnect([
{collection:'project'}
])) (Dashboard)
here is my package.json
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.7.0",
"firedux": "^1.1.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^6.0.0",
"react-redux-firebase": "^2.2.5",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"redux": "^4.0.1",
"redux-firestore": "^0.6.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
The error is quite clear, you are using react-redux-firebase:^2.2.5 while you need to use v3, because you are using react-redux: ^6.0.0.
You have to update react-redux-firebase
If you're following along with someone's example and not building a production app, you can just switch to react-redux 5.1.1.
Just change "react-redux": "^6.0.0", to "react-redux": "^5.1.1", in package.json and run npm install.
#kabanny above is quite correct.
If you really want to use the next version of react-redux-firebase that supports the context api, then do the following at your own risk.
npm install react-redux-firebase#next
Also check out the migration guide
If you did install the packages using npm. downgrading to react-redux-firebase#2.2.5 and react-redux#5.1.1 did solve the problem in my case. Something to take note of: In case you face such errors when following someone's tutorials, I recommend you first confirm the version of dependencies they are using. npm can land you in trouble.
I am trying to integrate a CARTO map according to this example:
Importing Carto:
// Import react-leaflet for the map / basemap components
import { Map, TileLayer as Basemap } from 'react-leaflet';
// Import CARTO.js v4 <3
import carto from 'carto.js';
// Import our custom Layer component (it uses carto.js methods internally)
import Layer from './Layer';
// Voyager basemap <3
const CARTO_BASEMAP = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png';
This is the constructor of my React Component:
constructor(props) {
super(props);
this.state = {
center: [40.758313915, -3.67774875],
zoom: 11,
},
// Setup the client in the contructor with our user and apiKey
this.cartoClient = new carto.Client({ apiKey: 'wadus', username: 'rochoa' });
package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"carto.js": "^4.0.1",
"classnames": "^2.2.6",
"jsonwebtoken": "^8.3.0",
"jwt-decode": "^2.2.0",
"leaflet": "^1.3.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-leaflet": "^2.0.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-simple-storage": "^1.2.1",
"redux": "^4.0.0",
"redux-connect": "^7.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
When running, receiving:
TypeError: __WEBPACK_IMPORTED_MODULE_2_carto_js___default.a.Client is not a constructor
Having a hard time to understand what is wrong here...
The problem is because that there are differences between carto.js 4.0.0-beta and 4.0.1.
The example you linked to is using 4.0.0-beta version. I tried created a sandbox with carto.js 4.0.1, and the issue happen as well.
I can't find the documentation about carto.js differences between 4.0.1 and 4.0.0 beta. The official docs even says that you should do new cartoClient() as well. I can only assume that there are something wrong with their 4.0.1 version.
What you can do right now is install the beta package instead of 4.0.1.
npm -i carto.js#4.0.0-beta.42
Then run your project again.
The package is outdated. They moved it to another place. I added as dependency #carto/carto.js instead of carto.js and substituted it in whatever file it's used in.
npm install #carto/carto.js
import carto from '#carto/carto.js'