Imports en JSX React + Vite

[Pablo Foglia]

TSX donde estas??? volve plzzzzzzz......

Bueno seguramente al que le molesta esto ../../../../../eldirectoriomasenterradodemiproyecto/componenteperdido

en sus imports notó que algo no anda bien con los imports de VSCode y React en este último TP.

Eso sumado a que las sugerencias de importación no funcionan ni con los componentes propios al hacer Ctrl + . logró hacer perder todo mi hermoso sábado.

En un afán de evitarles el dolor de cabeza a todos los seres humanos que pueda plus de encontrar otra forma si alguno quiere comentarla,  o bien que los profes nos iluminen con sabiduría dejo la solución que encontré.

Hay que modificar dos archivos del proyecto, uno es el vite.config.js, este es para decirle a vite "flaco importa las cosas así", el otro archivo es para que VSCODE no insista en que vite esta equivocado... y es un archivo que no existe y se llama jsconfig.json ( previamente tsconfij.json?????)

VITE.CONFIG.JS

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react()],

  resolve: {

    alias: {

      src: "/src",

      components: "/src/components",      

    },

  },

  test: {

    globals: true,

    setupFiles: ["./setupTests.js"], // es importante definirlo en un archivo aparte para que se ejecute en otro contexto

    environment: 'jsdom',

    // coverage: {

    //   reporter: ['text', 'json', 'html', 'json-summary'],

    // },

  }

})

* de paso profes el coverage tira error

JSCONFIG.JSON

{

  "compilerOptions": {

    "baseUrl": ".",

    "checkJs": true,

    "jsx": "react-jsx",

    "paths": {

      "src/*": [

        "./src/*"

      ],

      "components/*": [

        "./src/components/*"

      ]

    }

  }

}

de este último es importante el jsx: "react-jsx"

con el checkJs = true, esto permite que arranquen las sugerencias, sin ellos las sugerencias de import apestan.  ( Existe un plugin de autoimports que puede ser otra opción, Auto Import - ES6, TS, JSX, TSX de Sergey Korenuk )

Luego en ambos archivos podrán ver que hay que replicar los paths, esto permite hacer los imports así: 

import { Container, Box, TextField, Button, InputLabel } from "@mui/material"

import { LogoComponent } from "components/LogoComponent/LogoComponent"

Espero les ayude, si encuentran fallos o alternativas compartan!! Have a Happy Coding Day!!!!!

[Fernando Dodino]

Gracias Pablo, React metió muchos cambios violentos, en parte algunas cosas no llegamos a descubrirlas pero bueno... lo lindo de usar frameworks de estos centennials es que se aprende mucho.

Buen fin de semana y gracias por compartir!!

--
You received this message because you are subscribed to the Google Groups "Algoritmos 3 - UNSAM" group.
To unsubscribe from this group and stop receiving emails from it, send an email to algo3-unsam...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/algo3-unsam/47c7c5a0-dc46-4667-b50e-47b15d5ba3f4n%40googlegroups.com.

[Fernando Dodino]

Bueno, parece que este cambio es de hace algunos años pero recién ahora me afectó al cambiar a vite. La solución para el tema de los imports en uno de mis proyectos es agregar el archivo jsconfig.json que pasó Pablo:

{

"compilerOptions": {

"baseUrl": ".",

"checkJs": true,

"jsx": "react-jsx",

"paths": {

"src/*": [

"./src/*"

],

"components/*": [

"./src/components/*"

]

}

}

}

con eso ya me toma correctamente los imports.

Voy a estar toqueteando los ejemplos para reflejar ésto.

Saludos y suerte

Fernando

[Fernando Dodino]

ah no, checkJs: true es deplorable!! 

Activa una detección de tipos muy falopa (y molesta). Requiere que instales tipos de las cosas, una bazofia, la peor bazofia de todas las bazofias... 

Ampliaremos el jueves.

[Fernando Dodino]

Bueno, agrego: 

el coverage tira un error también porque el checkJs hace que verifique (y exija) la interfaz donde necesitás definirle el motor sobre el que corre. Se puede solucionar así

coverage: {

provider: 'v8',

reporter: ['text', 'json', 'html', 'json-summary'],

},

o bien sacándole el checkJs: si bien desactiva ciertos chequeos que están buenos (como forzarte a importar clases), también hace que te instale dependencias que no necesitás o que le ponga una anotación de tipos mucho más verbosa que el estándar Typescript.

Después les paso en limpio todo lo que estoy averiguando.

[Julián]

Buenas, para los imports, fijense si les funciona el plugin para VSC  Auto Import - ES6, TS, JSX, TSX (Sergey Korenuk)

Saludos

Juli

To view this discussion on the web visit https://groups.google.com/d/msgid/algo3-unsam/CACqssr6bnpw9NBSnhW1yOfvgvBzjBHab5%3Da12gVynxqmgR-OEQ%40mail.gmail.com.

[Fernando Dodino]

Hola Juli,

       el plugin que nosotros les recomendamos con las indicaciones de Pablo (jsconfig.json y vite.config.js) me funciona y a mi juicio es un poquito mejor que el de Sergey Korenuk porque el import de Sergey te lo ubica en la segunda línea y es un poco molesto.

Saluditos

Fer

To view this discussion on the web visit https://groups.google.com/d/msgid/algo3-unsam/CANs2hGu%3DmseckPD1G5MMsaHd_v6KAjFpC7_j3esVROv7MtJsXg%40mail.gmail.com.

[Fernando Dodino]

Ah, y otra cosa que estoy haciendo es convertir los imports relativos en absolutos, partiendo de un raíz (en mi caso src o components pero eso se puede configurar, justamente con los archivos que pasó Pablo).

El ejemplo de tareas y el de input disabled, los que vamos a ver este jueves, ya están listos.

Saludos y suerte

Fernando

[Fernando Dodino]

Bueno, ya está hecho el arreglo de la configuración de los archivos vite.config.js, jsconfig.json, los imports absolutos para todos los proyectos que vimos hasta ahora y los de la clase de mañana (faltan los últimos 2 de React Context) + el fix para la explicación de la wiki.

Saludos y suerte

Nos vemos mañana

Fernando