Preparación de entorno de desarrollo

4/25
Recursos

Aportes 10

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

si lo quieren hacer con vite

$ npm create [email protected] myProject
cd myProject
npm install
npm install @mui/material @emotion/react @emotion/styled
npm run dev

60mb aprox

Si iba a estar copiando y pegando mejor hubiese utilizado vite o cra, pero bueno…

Las dependencias por si quieren copiar.

"dependencies": {
    "@emotion/react": "11.8.1",
    "@emotion/styled": "11.8.1",
    "@mui/icons-material": "5.4.4",
    "@mui/material": "5.4.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.17.5",
    "@babel/eslint-parser": "7.17.0",
    "@babel/plugin-transform-runtime": "7.17.0",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "7.16.7",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.3",
    "eslint": "8.10.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.3",
    "file-loader": "6.2.0",
    "html-loader": "3.1.0",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.6.0",
    "prettier": "2.5.1",
    "webpack": "5.70.0",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "4.7.4"
  }

Si cuando ejecutan el comando npm run start les da el siguiente error:
TypeError: cli.isMultipleCompiler is not a function
at Command.

La mejor forma de solucionar es la siguiente:

npm uninstall webpack webpack-cli webpack-dev-server

Y luego

npm install webpack webpack-cli webpack-dev-server -D

A continuación npm run start debería funcionar.

Si de casualidad al ejecutar npm start, les arroja el siguiente error:

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function

lo que deben hacer es actualizar la version de webpack-cli a la 4.10.0 o superior

Me parece mala practica que el profe haya construido desde Cero toda la estructura del proyecto, para eso existe Vite o CRA!

Por si te da error al usar App.jsx en lugar de App.js agrega esta regla en el archivo .eslintrc en la seccion de rules

"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]

Yo tengo un template con vite, ESLint, y Prettier, este los ayudará a tener el identado y a marcarles los errores en su código, por si gustan utilizarlo sólo ingresen al link, le dan click a “Use this template”, el git clone en su terminal, su respectivo npm i en donde esté package.json, y a disfrutar!! 😃

https://github.com/Egremy-quark/cursoDesarrolloUtil

Para los que usan yarn:

yarn create vite
yarn install
git init
yarn add @mui/material @emotion/react @emotion/styled

Hay un issue con types/[email protected]. Por eso este error al instalar webpack
Les dejo la solución temporal mas abajo. Link del issue

Hay un issue con types/[email protected].
agrega al package.json "resolutions": { "@types/eslint": "8.4.3" }

si no funciona has esto:

Instala manualmente npm i -D @types/[email protected] luego instala webpack npm i webpack