Preparación de entorno de desarrollo

si lo quieren hacer con vite

$ npm create vite@latest 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…

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.

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"
  }

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

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"] }]

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!

tengo un nuevo eror de webpack …
que puedo hacer??

ERROR in ./src/index.js 7:2
Module parse failed: Unexpected token (7:2)

|
| ReactDOM.render(

<App/>,
| document.getElementById(‘app’)
| );

webpack 5.70.0 compiled with 1 error in 190 ms

!!No consigo salir de aquí¡¡
Llevo dos días, me quedé atascada en eso y no logro de ninguna manera salir de ese error. He intentado actualizar, probé con los consejos de los comentarios y consultando en internet, pero no encuentro la forma de seguir…
No estaría mal que también nos digan cómo poder solucionar este tipo de errores, con ejemplos reales.

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
at Command.<anonymous> (C:\Users\lobato\Desktop\basico-material-ui\node_modules@webpack-cli\serve\lib\index.js:146:35)
at async Promise.all (index 1)
at async Command.<anonymous> (C:\Users\lobato\Desktop\basico-material-ui\node_modules\webpack-cli\lib\webpack-cli.js:1674:7)

Para los que usan yarn:

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

Por mi parte lo voy a hacer con Create React App. Luego voy a tomar el curso de Webpack para entender cómo preparar el entorno de desarrollo sin Create React App.

Vi varios comentarios y mencionan Vite…obviamente me interesa no solo aprender sino aprender algo que se justifique asi mismo https://youtu.be/rmYUlzfT24E?t=304

Entonces…porqué creó que este inicio va mal …pueden ver el video de YouTube,

Pesimo inicio del curso, todas las dependencias desactualizadas, toca arreglar todo a mano, no todos tenemos tiempo para eso, mejor hubieramos usado CRA, creo que aqui vinimos a aprender material UI no webpack

No veo mal que se realicen las configuraciones sin utilizar CRA, pero si ese es el procedimiento inicial pues no se salten los pasos para configurar archivos como eslint o webpack, por lo que veo en los comentarios muchos tenemos errores relacionados a estos archivos, y al investigar como solucionarlos ya usaste tiempo que tenias planeado en el curso, y si a eso lo agregas que no hay explicación y solo es copiar y pegar no se entiende por que mejor no usar create react app y este video hubiera sido mas corto.

Por qué no utilizamos create react app?

Hasta ahora no entiendo varias cosas, hacer un curso empezando desde cero y haciendo todo a mano pero sin explicar nada?, no es mejor clonar un github o empezar con vite?
Ojalá mejore, por que tengo muchas ganas de aprender el tema.

muy mal inicio mucha perdida de tiempo en configurar todo !!

No entiendo cual era la necesidad de complicarse tanto con webpack si react ya te lo arma toda la estructura del proyecto, ahora tengo varios errores y no entiendo ni como solucionarlos más que descargar todos los archivos tal y como están.

Si ejecutan el siguiente comando.

npx eslint --init

Les arranca la configuracion eslint desde cero , instalando todas las dependencias de eslint que necesita, y los templates mas conocidos como el de airbnb , google , etc…

Les recomiendo vite para crear el proyecto de React, mucho mas rápido y limpio https://vitejs.dev/guide/#scaffolding-your-first-vite-project

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