Hi I am trying to use Mapbox geocoder for my react-project. I am always getting those two errors.
Could not find a declaration file for module 'react-map-gl-geocoder'. 'Git/react-excercises/node_modules/react-map-gl-geocoder/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-map-gl-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'react-map-gl-geocoder';ts(7016)
./node_modules/react-map-gl-geocoder/dist/index.m.js
Attempted import error: 'FlyToInterpolator' is not exported from 'react-map-gl' (imported as 'r').
This is my package.json
{
"name": "react-excercises",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"mapbox": "^1.0.0-beta10",
"mapbox-gl": "^2.7.0",
"mapbox-gl-geocoder": "^2.0.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-icons": "^4.3.1",
"react-map-gl": "^7.0.9",
"react-map-gl-geocoder": "^2.2.0",
"react-mapbox-gl-geocoder": "^1.1.0",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.1",
"styled-components": "^5.3.3",
"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"
]
}
}
Related
I am trying to deploy my react app to github, but when i'm running npm run deploy i'm getting the below error message
remote: Permission to aneagoie/robofriends.git denied to Moshe844.
fatal: unable to access 'https://github.com/aneagoie/robofriends.git/': The requested URL returned error: 403
can you please help me with getting this resolved?
package.json
{
"name": "robofriends",
"homepage": "https://Moshe844.github.io/robofriends",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"gh-pages": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tachyons": "^4.12.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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": {
"react-error-overlay": "^6.0.11"
}
}
I installed a fresh install of CRA and also installed eslint and prettier and as well as two packages to make them work smoothly with each other.
Eslint is working and active but prettier is not formatting. I get the following error in the terminal:
Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.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",
"prettier"
]
},
"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": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1"
}
}
I am deploying my react website through Github pages. Upon clicking on the deployed URL I am getting the following content (similar to github description of commands):
Can someone point out where I am going wrong?
package.json:
{
"homepage": "https://vats101.github.io/hack/",
"name": "hack",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#firebase/app-compat": "^0.1.25",
"#firebase/auth-compat": "^0.2.14",
"#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": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^3.2.3"
}
}
My website link:
https://vats101.github.io/hack/
This is my App.js file where all routing is done:
import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './Pages/Homepage';
import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom'
import {useState,useEffect} from 'react'
function App() {
const [userName,setUserName]=useState(null);
return (
<div className="App">
<Routes>
<Route path='/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
<Route path='/hack/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
<!-- other routes also -->
</Routes>
</div>
);
}
export default App;
My Vue 3 app doesn't work in Safari 9. There is this error in console:
Unexpected keyword 'const'. Const declarations are not supported in strict mode.
My package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/runtime-corejs2": "^7.12.5",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-axios": "^3.1.3",
"vue-slider-component": "^4.0.0-beta.3"
},
"devDependencies": {
"#vue/babel-preset-app": "^4.5.8",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.28.0",
"sass-loader": "^10.0.5"
},
"eslintConfig": {
"rules": {},
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"last 2 versions",
"safari >= 7",
"ios_saf >= 8",
"chrome >= 52"
]
}
My babel.config.js:
module.exports = {
presets: [
['#vue/babel-preset-app']
]
}
I know that the error can be caused by not-transpiled dependencies, but I tried to transpile them in vue.config.js by transpileDependencies option. But doesn't work neither.
So here's an answer for my question: https://github.com/vuejs/vue-cli/issues/6041#issuecomment-722966178
Vue 3 doesn't support iOS 9 yet.
I'm trying to debug my tests for my React Redux app in VS Code.
Running my tests in Jest works great, but the when I run the debugger I get this error:
(function (exports, require, module, __filename, __dirname) { import * as actions from "../src/redux/actions/tasksActions";
^^^^^^
SyntaxError: Unexpected token import
I'm using the following configuration in my launch.json:
{
"type": "node",
"request": "launch",
"name": "Mocha Tests",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"--require #babel/register",
"--inspect-brk",
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"${workspaceFolder}/tests"
],
"internalConsoleOptions": "openOnSessionStart"
}
The first args in the config, "--require #babel/register", "--inspect-brk", came from suggestions on blogs I found while googling my error (the first arg was said to fix this exact error). Same error happens, though, with or without either of those args.
Here's my package.json if it helps.
{
"name": "client",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/node": "^7.2.2",
"#babel/preset-env": "^7.4.4",
"#babel/register": "^7.4.4",
"babel-jest": "^24.7.1",
"chai": "^4.2.0",
"enzyme": "^3.9.0",
"expect": "^24.7.1",
"jest": "^24.7.1",
"jsdom": "^15.0.0",
"mocha": "^6.1.4",
"react-addons-test-utils": "^15.6.2",
"react-scripts": "0.7.0"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "npm test -- --watch",
"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"
]
}
}
Any ideas? Thanks!