2

Tengo un proyecto principal "react-app" y he creado un proyecto que contiene los componentes "react-app-components".

En el proyecto "react-app-components" utilizo Route del react-router-dom y luego lo importo desde el "react-app" a través del npm link y al ejecutar npm start me sale el error:

Error: Invariant failed: You should not use <Route> outside a <Router>

Pero si publico el componentes en el npm y lo instalo con "npm install" funciona correctamente, es decir solo sale error cuando utilizo el npm link al trabajar en local.

1 respuesta 1

1

Según la documentación de React, esto suele pasar por tener el React duplicado (more than one copy of React) https://reactjs.org/warnings/invalid-hook-call-warning.html

Al parecer al utilizar el npm link la aplicación intenta utilizar el react de los proyectos "react-app" y del "react-app-components" y por eso al publicarlo en el repositorio npm ya no sale el error.

Para solucionarlo quité las dependencias del react, react-router-dom del package.json y volví a ejecutar npm install para que elimine las carpetas del node_modules.

package.json

Antes:


    
{
  //...
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "babel-loader": "^8.1.0",
    "glob": "^7.1.6",
    "react": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "source-map-loader": "^1.0.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}



Después:


    
{
  //...
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "babel-loader": "^8.1.0",
    "glob": "^7.1.6",
    "source-map-loader": "^1.0.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}



Solo dejo los "@types" para trabajar con typescript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.