Estoy tratando de crear una aplicación de reacción mecanografiada junto con un folleto . Usé el comando,
npm install leaflet react-leaflet @types/react @types/leaflet --save para instalar las dependencias.
Pero cuando inicio la aplicación dice:
./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) { > const options = props.pathOptions ?? {}; | element.instance.setStyle(options); | optionsRef.current = options;Aquí está mi paquete.json
{ "name": "aq-monitor", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "@types/jest": "^26.0.23", "@types/leaflet": "^1.7.0", "@types/node": "^12.20.13", "@types/react": "^17.0.5", "@types/react-dom": "^17.0.5", "antd": "^4.15.5", "leaflet": "^1.7.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-leaflet": "^3.2.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "typescript": "^4.2.4", "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/react-router-dom": "^5.1.7" } }Aquí está map/index.tsx
import React from 'react'; import './styles.css'; import L, { LatLngExpression } from "leaflet"; import "leaflet/dist/leaflet.css"; import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet'; const position : LatLngExpression = [59.91174337077401, 10.750425582038146]; export default function MapJar() { return ( <MapContainer center={position} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> ); };Intenté reinstalar las dependencias varias veces pero aún no funcionó.
Entiendo que este es un problema simple y un error que estoy cometiendo, pero sin embargo, no he podido resolver este error.
Cualquier entrada es apreciada. Gracias por adelantado.
Encontré una manera de arreglarlo.
Pasos para arreglar: -
Abra su archivo package.json y edite su lista de navegadores de la siguiente manera.
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] },para
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ], Una vez que haya hecho esto, elimine el directorio node_modules/.cache .
Luego intente npm install
y npm start
Tadaaa!
Referencias:-
El problema finalmente parece estar relacionado con create-react-app y la forma en que agrupa los archivos y parece resolverse si reemplaza los objetivos del navegador de:
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] },para
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ],Luego detenga el servidor y vuelva a ejecutarlo.
Los créditos van al problema oficial de github de create-react-app de bkiac
Editar
Puede reproducir el error y la solución si descarga este codesandbox . Cuando lo abre, funciona, pero si lo descarga y lo ejecuta localmente, puede ver el error usando las primeras opciones de la lista de browserslist en package.json . Si detiene el servidor, reemplaza las opciones de la lista de browserslist con las nuevas y vuelve a ejecutar la aplicación, puede ver que funciona como se esperaba.