Is it supposed to look like this?
I followed https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js and the homepage quickstart.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"leaflet": "^1.3.4",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-leaflet": "^2.1.2",
"react-scripts": "2.1.1"
},
"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"
]
}
Looking at the docs of "react-leaflet" it states the following:
You will notably need to add its CSS to your page to render the map properly, and set the height of the container (full text: https://react-leaflet.js.org/docs/en/setup.html#docsNav)
You can try to set the width and height of the Map element (e.g., I need the width as 100% of the parent container and fixed height of 450px):
<Map center={position} zoom={this.state.zoom} style={{width: '100%', height: 450}}>
...
This would give you a box with zooming options but you won't see the map itself as you're now missing the map styles so you need to import it:
#import '~leaflet/dist/leaflet.css';
You also can add the CSS in your HTML:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
Missing Leaflet CSS and/or width & height of map container.
Or you might need to use map.invalidateSize() because your container size changed, at it will update map to fit new container size.
Related
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;
I'm trying to codesplit a react-map-gl Map component into its own chunk using Lazy,Suspense.
This is my component.
import 'mapbox-gl/dist/mapbox-gl.css'
import React, {lazy, Suspense} from 'react'
const Map = lazy(() => import('react-map-gl'))
const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN
const MAP_STYLE = process.env.REACT_APP_MAPBOX_STYLE_DARK
export default function MapboxMap() {
const viewport = {
latitude: 37.805,
longitude: -122.447,
zoom: 15.5
}
return <div style={{width: '500px', height: '500px', position: 'relative'}}>
<Suspense fallback={<div>Loading...</div>}>
<Map
initialViewState={viewport}
mapboxAccessToken={MAPBOX_TOKEN}
mapStyle={MAP_STYLE}
styleDiffing
/>
</Suspense>
</div>
}
and this is my package.json
{
"name": "compression-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-map-gl": "^7.0.10",
"react-scripts": "^5.0.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"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": {
"source-map-explorer": "^2.5.2"
}
}
But as you can see from the source-map-explorer screenshot, Mapbox is still in the main chunk.
What am I doing wrong here? Has anyone else successfully tried to use the react-map-gl library and
managed to split it into its own chunk?
I have been trying to post a simple express based website to Github pages. Previously, I was able to post a react based front-end website, using the "homepage", "predeploy", "deploy" and yarn build command. I understand that the react-scripts build takes care of the "process.env.PORT" and is able to get it, how can I replicate a similar process for an express backend. I have been searching the internet and the web for a while, however, the previous questions, I found them to be outdated. Any help would be greatly appreciated.
The package.json where react works look like this:
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "https://{github_username}.github.io/{github_repo}/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn 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"
]
}
}
Github pages doesn't allow you to host dynamic content. gh-pages package creates a new branch and uploads static content, making the illusion that it is hosting a React app dynamically, even though it is running HTML, CSS, and only client JS.
Spent lots of time on this issue but I can't find a different reason.
When using yarn (v1) with Plug and Play or yarn v2. (berry) I can't get
Material-UI theming v 4.4.3 working.
Here's the example below. There is no problem when using a standard non pnp yarn configuration.
(create-react-app)
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import Button from "#material-ui/core/Button";
const theme = createMuiTheme({
props: {
MuiButton: { variant: "outlined" }
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div>
<Button>text</Button>
</div>
</ThemeProvider>
);
}
export default App;
my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.4.3",
"#material-ui/styles": "^4.4.3",
"#material-ui/system": "^4.4.3",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.1.2"
},
"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"
]
}
}
The theme is ignored.
Looks like it's a double initiation of #material-ui/styles problem. Guys from #material-ui team seem to be fixing this at the moment.
importing MuiThemeProvider as ThemeProvider from #material-ui/core/styles instead of importing ThemeProvider from #material-ui/styles fixed the issue.
I also ommited #material-ui/styles in my package.json
Hope this helps someone ...