Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Actualizando dependencias en NPM

4/22
Recursos

Aportes 36

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Resumen de la clase:

  1. Buscamos un proyecto que contenga react, react-router y redux.

  2. Creamos una nueva rama del proyecto con:
    git checkout -b nombre_rama

  3. Verificar las ramas que hay que actualizar: npm outdated

  4. Para actualizar la aplicaci贸n ingresamos: npm update

  5. Para verificar si hubo actualizaci贸n de paquetes, lo hacemos con: git status

  6. Para verificar las dependencias actualizadas, ingresamos: git diff

  7. Volvemos a verificar las dependencias que tenemos que actualizar con: git outdated

  8. Hay dependencias que no se pueden actualizar directamente con el comando git update, porque estas dependencias tienen otras dependencias que pueden estar siendo utilizadas por otras dependencias.

  9. Corremos la aplicaci贸n (npm run start) para verificar que todavia funciona la aplicaci贸n y que el proceso de actualizaci贸n de dependencias se realiz贸 exitosamente.

Para el que lleg贸 aca y se confundio un poco, o no tiene el proyecto hecho en react le comento lo que puede hacer:

1-Descargar el proyecto en la rama router-redux
2-Posicionarse en la consola dentro del proyecto
3-Crear una rama con el comando 鈥済it checkout -b feature/server-side-render-2020鈥 (este comando crea la rama y se posiciona dentro)
4-Revisar las actualizaciones de las dependencias con el comando "npm outdated"
5-Actualizar dependencias con el comando "npm update"
6-Iniciar el proyecto 鈥渘pm run start鈥

A mi me habia confundido un poco porque me habia olvidado como funcionaba git, pero para que no les sea dificil entender este video les mando esto.
Saludos!.

npm outdated para ver las librerias que debe ser actualizadas

Para los que tengan problemas con npm install y les salga el siguiente error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]1.0.0
npm ERR! Found: [email protected]6.8.0
npm ERR! node_modules/eslint
npm ERR!   [email protected]"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^4.19.1 || ^5.3.0" from [email protected]17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR!   [email protected]"^17.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/armando/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/armando/.npm/_logs/2021-02-19T14_55_51_707Z-debug.log

esto sucede ya que se est谩 usando una version de npm distinta con la cual se manejaron esas dependencias pero tranquilos puede usar el siguiente comando:

npm install --save --legacy-peer-deps

Para los que tienen problema con la actualizaci贸n e instalaci贸n de dependencias pueden intentar lo siguiente:

  1. Instalamos el paquete npm-check-updates
npm install -g npm-check-updates
  1. Lo ejecutamos
ncu -u
  1. Procedemos a instalar las nuevas versiones de las dependencias.
npm install
  1. Cambiamos el script start, ya que el anterior esta deprecado.
"start": "webpack serve --open --mode development"

Para el setup inicial sin nada es recomendable:

  • git clone https://github.com/platzi/PlatziVideo.git .
  • git checkout origin/feature/router-redux para iniciar desde la misma ramade Carlos
  • git checkout -b feature/server-side-render-2020
  • npm install (Instala las dependencias)
  • npm outdated (Verifica que dependencias necesitan ser actualizadas)
  • npm update (Actualiza las dependencias que no tengan un Major update)
  • npm outdated (Va a mostrar solo las dependencias que no se actualizaron por ser un Major update de acuerdo a su numero de version)
  • npm run start (Inicia la aplicacion)

Nota:

Software versioning

In version 1.9.0.1:

1: Major revision (new UI, lots of new features, conceptual change, etc.)

9: Minor revision (maybe a change to a search box, 1 feature added, collection of bug fixes)

0: Bug fix release

1: Build number (if used)鈥攖hat鈥檚 why you see the .NET framework using something like 2.0.4.2709

Si alguien como yo tiene un monton de problemas con el solo hecho de hacer npm install, borren el package-lock.json 馃挏

Para los que tienen problema en con las dependencias, arrancar el servidor

Aqui tienen el package.json del profesor

{
  "name": "PlatziVideo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-eslint": "^10.0.3",
    "classnames": "^2.2.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.0",
    "md5": "^2.2.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "file-loader": "^4.3.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.13.1",
    "sass-loader": "^7.3.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

Luego instalen json-server

npm install json-server

Agreguen al package.json el comando

"json": ""json-server initialState.json"

Ya luego ejecutan en consolas diferentes los comandos

npm run json
npm run start

Seguir estos pasos en 2022:

  1. Clonar repositorio clase:
    git clone https://github.com/platzi/PlatziVideo.git
  1. Cambiar a la rama deseada:
git checkout origin/feature/router-redux
  1. Actualizar dependencias a 2022. Archivo package.json:
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode development",
    "json": "json-server initialState.json"
  },
 "dependencies": {
    "babel-eslint": "^10.1.0",
    "classnames": "^2.3.1",
    "eslint": "^8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "json-server": "^0.17.0",
    "md5": "^2.3.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.6.0",
    "webpack": "^5.7.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
  1. Instalar con:
npm install --save --legacy-peer-deps
  1. Reempplazar en el archivo routes/App.js, la palabra 鈥淪witch鈥 por la palabra 鈥淩outes鈥
  2. Correr los scripts en dos terminales en paralelo:
npm run json

y

npm run start

No me funcion贸, pero lo solucion茅 as铆.

1.- Nos situamos en nuestro proyecto y borrar package-log.json
2.- Instalar dependencias: npm install
3.- Revisar si est谩n actualizadas las dependencias con el comando npm oudated.
4.- Actualizar dependencias npm update
5.- Inicializar, en una terminal, la FAKE API: json-server initialState.json
6.- En otra terminal, correr proyecto: npm run start

Solo por aprender el shortcut de 鈥済co鈥 ya vali贸 la pena esta clase.

Soy el unico que al ejecutar:

npm run start

le aparece algo como: Access Error: 404 鈥 Not Found
Cannot locate document: /
?

No puedo instalar las dependencias, luego no puedo continuar con el proyecto 馃槓

Tube un problema muy raro con XCode, lo solucion茅 asi:

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

Fuente

Tengo un problema con mini-css-extract-plugin

Si est谩s usuando Ubuntu, en mi caso el 20, y te da problemasal instalar los paquetes, a mi me funcion贸 ejecutar estas instrucciones, que la verdad no s茅 explicar jajajaj asegurate de que la ultima la ejecutes en el directorio de platzi video:
sudo apt-get install python2.7

sudo apt-get install build-essential

echo 鈥渆xport PYTHON=/usr/bin/python2.7鈥 >> ~/.bashrc && source ~/.bashrc && npm install

S铆, es muy importante andar con las 煤ltimas versiones estables de cada dependencia, pero se debe tener cuidado de no afectar alguna funcionalidad con estos cambios, pues suelen haber 鈥渂reaking changes鈥 de una versi贸n a otra que nos podr铆a generar un par de dolores de cabeza.

favor de especificar? estas utilizando linux? y que version y que estan instalando???

npm outdated
npm update

npm update --> Para actualizar las librer铆as 馃槂

Si tienen problema con Sass, pueden intentar con este comando:

npm install node-sass --unsafe-perms

npm outdated, muestra versi贸n actual, la que se requiere actualizar y la 煤ltima versi贸n. npm update actualiza dependencias.

Si clono el repositorio de la clase , debo instalar todas las dependencias?

Hola soy nuevo en platzi, pense que seria un proyecto desde cero, para descargar el repositorio y se trabaja sobre la rama que menciona en el video

<h3>Actualizando dependencias en NPM</h3>

Url de proyecto:

platzi/PlatziVideo

creamos una rama del proyecto con:

gco -b feature/server-side-render-2020

Verificamos y actualizamos los paquetes y dependencias de packege.json

//verificamos
npm outdated

//actualizamos
npm update

npm outdated -> Compara versi贸n actual, deseada y 煤ltima de nuestras dependencias
npm update -> Actualiza nuestras dependencias

Es importante lo que dice el profesor sobre actualizar dependencias que cambien su versi贸n, por ejemplo de la 7.0.1 a la 8.0.0, ya que puede romper todo el proyecto鈥 Para eso hay que ir a la documentaci贸n para ver los cambios y si afectan o no a nuestro proyecto.

Si deseas solo actualizar alguna dependencia en especifico, puedes usar npm update y especificar que dependencia quieres actualizar.
npm update packageName

Al ejecutar 鈥渘pm run start鈥 me arrojaba m煤ltiples errores de compilaci贸n.
El principal error era que faltaba el paquete node-sass. Al instalarlo segu铆a arrojando error porque era incompatible con mi versi贸n de node (15.X), por lo que para solucionarlo hice lo siguiente:

// Instalar Node.js en su versi贸n 14.16.0 LTS desde https://nodejs.org/en/
// Desisntalar paquete node-sass porque es incompatible con la versi贸n 14 de node.
npm uninstall node-sass
// Instalar paquete node-sass en su versi贸n compatible con node 14.
npm install node-sass@4.14.1

Espero sea de ayuda!

Para los que se esten trayendo el proyecto con un git clone y les salga el codigo de del curso practico de react y no el de redux pueden usar el siguiete comando para traerse la rama del proyecto de redux

git checkout --track origin/feature/router-redux

Si a alguno os salta este error:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in D:\usuario\Documentos\Platzi\SSR\PlatziVideo-fc840bb2c925c1d9e6d7f74d8d984a8dfdaf75a4\node_modules\@babel\helper-compilation-targets\package.json
    at throwExportsNotFound (internal/modules/esm/resolve.js:290:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:513:3)
    at resolveExports (internal/modules/cjs/loader.js:432:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:472:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\usuario\Documentos\Platzi\SSR\PlatziVideo-fc840bb2c925c1d9e6d7f74d8d984a8dfdaf75a4\node_modules\@babel\preset-env\lib\debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)```

Lo he resuelto cambiando en D:\usuario\Documentos\Platzi\SSR\PlatziVideo-fc840bb2c925c1d9e6d7f74d8d984a8dfdaf75a4\node_modules\@babel\helper-compilation-targets\package.json


鈥渆xports鈥: false```
por

"exports": null```

Espero que no me crashee mas adelante

Buenas, por si a alguien le sale un error al ejecutar el npm run start, o les sale la pagina solo como LOADING鈥

es por que no se est谩 ejecutando el servidor de prueba con json server

para quitarse dolores de cabeza les recomiendo modificar el script de 鈥渟tart鈥 en el archivo package.json

para que quede de la siguiente forma

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "json-server  initialState.json & webpack-dev-server --open --mode development"
  }

con 鈥渟tart鈥: 鈥渏son-server initialState.json & webpack-dev-server --open --mode development鈥 iniciamos primero el server falso y ejecutamos nuestra app

Como siempre tener cuidado con la versi贸n de las dependencias, Webpack actualiza a la versi贸n 5 y este si genera problemas, actualizar a versi贸n 4 o fijarse en el package.json

  • Actualizar dependencias con el comando "npm update

  • Iniciar el proyecto 鈥渘pm run start鈥