Actualizando dependencias en NPM

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.

Repositorio Github

https://github.com/platzi/PlatziVideo

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 “git 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 “npm 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)—that’s 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 “Switch” por la palabra “Routes”
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 “gco” 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 “export 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 “breaking 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

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 “npm 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

“exports”: 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 “start” 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 “start”: “json-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 “npm run start”