No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Preparaci贸n de entorno de desarrollo

4/24
Recursos

Aportes 22

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

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 鈥淯se 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(鈥榓pp鈥)
| );

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鈥bviamente me interesa no solo aprender sino aprender algo que se justifique asi mismo https://youtu.be/rmYUlzfT24E?t=304

Entonces鈥orqu茅 cre贸 que este inicio va mal 鈥ueden 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