"count not find declaration file for module" in plain Javacript? - javascript

I know this is a recurrent one, but in a plain js project ?
I'm not using Typescript in one of my projects, but I'm still getting count not find declaration file for module in Eclipse when I import geoplug in module. Specifically in this line:
import { getGeo } from 'geoplugin';
It's a React/Redux frontend. There isn't a #types/geoplugin package. How can I get rid of this error ?
Please notice that the error is reported on Eclipse only.
Edit
My package.json is this:
{
"name": "myproj",
"version": "0.0.1",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.1",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"classnames": "^2.2.6",
"clientjs": "^0.2.1",
"date-fns": "^2.12.0",
"geoplugin": "^1.0.10",
"jsonwebtoken": "^8.5.1",
"react": "^17",
"react-dom": "^17",
"react-redux": "^7.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^4",
"sass": "^1.49.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.1"
},
"scripts": {
"start": "cp environment/.env . && react-scripts --openssl-legacy-provider start",
"build": "cp environment/.env.production .env && react-scripts --openssl-legacy-provider build && cp httpd_conf/.htaccess build/",
"buildAndDeploy": "cp environment/.env.production .env && react-scripts build && cp httpd_conf/.htaccess build/ && /vagrant/frontend/publicar",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prettier": "^2.0.2"
}
}

I replicated a simplified version of your project and everything works fine
This error make no sense, try deleting your node_modules and your package-lock.json
Then, install all your packages again:
npm install
If this doesn't work, seeing what's inside your package.json would be very helpful

Related

Why getting invalid hook call error in my locally hosted website?

I am getting the following error:
bundle.js:117850 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I dont seem to have made any errors as mentioned in console.cant figure out whats happening.
My package.json file:
{
"name": "hackervatsal",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.8.1",
"framer-motion": "^6.3.3",
"react": "^18.1.0",
"react-bootstrap": "^2.3.1",
"react-dom": "^18.1.0",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
is the version of react and react-dom conflicting in my case? any help is appreaciated

React app using Cloudflare Pages: error react-scripts#5.0.0: The engine "node" is incompatible with this module

When I deploy a React app using Cloudflare Pages, the Building application step fails with the error:
error react-scripts#5.0.0: The engine "node" is incompatible with this module. Expected version ">=14.0.0". Got "12.18.0"
error Found incompatible module.
There is no such error when running yarn build or yarn run start on my local machine.
How can this error be fixed?
My package.json:
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#supabase/supabase-js": "^1.33.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"framer-motion": "^5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
Thank you for all your help!
I once encountered this problem and I was able to fix it by specifying the NODE_VERSION environment variable.
In your case, set the environment variable as shown below:
NODE_VERSION = 14.0.0

Change of window focus when developping with react

I have a setup using react. When i run yarn start, i can start coding and changes are visible in my browser. Problem is, every 10 secons or so my terminal wants to let me know about error in mycode and always change my focus back to my editor within the specific file where the error would be. it is so annoying and frustrating. I guess it has something to do with eslint. I tried looking at the doc and even erased the eslinrc.json file but still persist with the same behavior. Is there any way to stop that behavior.
here is my package.json
{
"name": "korean-recipes",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.5",
"#material-ui/icons": "^4.9.1",
"#reduxjs/toolkit": "^1.2.5",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5"
},
"scripts": {
"lint": "yarn run start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-react": "^7.19.0"
}
}
I found the problem. It is a behavior create by 'npx create-react-app' by default.
To remove the behavior, simply add a .env file with the following variable:
REACT_EDITOR=none
Source: https://create-react-app.dev/docs/advanced-configuration

Unexpected token "{" when running mocha tests

I've created a react app that I want to test using the mocha/chai/enzyme combination, but I'm having trouble setting up the testing files.
I decided to follow a tutorial for creating the mocha tests, which can be found here: https://www.robinwieruch.de/react-testing-mocha-chai-enzyme-sinon. I have gotten to the point where I have created my script that uses the mocha command. The following
This is my package.json:
{
"name": "congressforme-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.6.4",
"#babel/register": "^7.6.2",
"#types/react": "^16.9.4",
"#types/react-bootstrap": "^0.32.20",
"#types/react-dom": "^16.9.1",
"#types/react-router-bootstrap": "^0.24.5",
"#types/react-router-dom": "^5.1.0",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"bootstrap-3-card": "^0.2.0",
"chai": "^4.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"ignore-styles": "^5.0.1",
"jquery": "^3.4.1",
"jsdom": "^15.2.0",
"mdbreact": "^4.21.0",
"mocha": "^6.2.2",
"newman": "^4.5.5",
"popper.js": "^1.15.0",
"react": "^16.10.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-card": "^0.2.1",
"react-dom": "^16.9.0",
"react-paginate": "^6.3.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.1.2",
"react-twitter-embed": "^2.0.8",
"typescript": "^3.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "aws s3 sync build/ s3://congressforme",
"test": "react-scripts test",
"eject": "react-scripts eject",
"my-tests": "mocha --require #babel/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles ./src/**/*.spec.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And this is the error message I am receiving:
ERROR: Unexpected token {
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! congressforme-app#0.1.0 my-tests: `mocha --require `#babel/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles ./src/**/*.spec.js
I only have 1 test file in the my src folder. It is named App.spec.js
This is what it looks like:
import React from 'react';
import App from './App';
import Navbar from "react-bootstrap";
// this is a testing suite app component
describe('App Component', () => {
// this is a single test in the testing suite
it('renders the Counter wrapper', () => {
const wrapper = shallow(<App />);
expect(wrapper.find(Navbar)).to.have.length(1);
});
});
However, even if I delete the contents of App.spec.js entirely, the same error still occurs.

Create React App builds empty document (blank screen) with react-router and firebase?

I get a white screen on my deployed react webapp, it worked perfectly before. I tried everything I could find here but it didn t worked.
Below is the link to my website : https://numbr-d1a20.firebaseapp.com/
Change the homepage, look for error in the console, clear my cache and a lot more...
Below is my package.json
{
"name": "numbr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.3.1",
"express": "^4.17.1",
"firebase": "^6.3.4",
"mysql": "^2.17.1",
"node-sass": "^4.12.0",
"nodemon": "^1.19.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native-indicators": "^0.13.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"recompose": "^0.30.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I expect to see my sign in page and not a blank screen.
Thanks in advance for your help!
The const 'condition' in the connectScreen component is undefined. Your authentication logic then prevents the component from rendering. Test what happens when you set const condition = true and see if it works then.

Categories