es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

opcion allowTsInNodeModules similar a ts-loader para el compilador de Parcel

23 Jul, 2023 Programación

Estoy buscando cambiar de webpack a parcel.

Me he encontrado con un problema al cargar TypeScript directamente desde los módulos de Node, lo cual está causando un error del compilador.

🚨 Error en la compilación.

@parcel/transformer-js: Se esperaba ‘>’, se obtuvo ‘type’
Blockquote 

    94 |             <Button
  > 95 |                 type={'primary'}
  >    |                 ^^^^
    96 |                 onClick={this.onSubmitClick}
    97 |                 href={onSubmit.href}

Dentro de nuestro trabajo, tenemos archivos TSX / TS sin transpilar que se utilizan en varios servicios. Con webpack, utilizábamos la opción “allowTsInNodeModules” de ts-loader para solucionar este problema.

He utilizado la opción de incluir los módulos de node en Parcel con la esperanza de que se empaquetaran en tiempo de ejecución, pero no es así.

¿Es esto posible en Parcel nativo? ¿O necesito implementar otro cargador en Parcel para obtener esta funcionalidad? ¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en tecnología de la información especializado en reactjs, typescript y parceljs, puedo sugerir una solución al problema que estás enfrentando. Al migrar de webpack a Parcel y encontrar el error de cargar TypeScript directamente desde los módulos de nodos, lo puedes solucionar mediante la implementación de un cargador personalizado dentro de Parcel. A diferencia de webpack, Parcel no tiene una opción incorporada para abordar TSX / TS no transpilados que se utilizan en diferentes servicios.

    Para superar este problema, crea un cargador personalizado que te permita especificar qué módulos de nodos deben transpilarse. Esto se puede hacer creando un archivo tsconfig.json en el directorio raíz de tu proyecto y agregando el siguiente bloque de código:

    {
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./lib",
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*",
    "node_modules/nombre/de/modulo/**/*"
  ]
}

    Asegúrate de reemplazar la parte nombre/de/modulo con el nombre del módulo de nodos que estás intentando transpilar. Esto permitirá que Parcel incluya los módulos de nodos especificados en el proceso de compilación.

    Alternativamente, puedes usar el complemento postcss-modules-values de Parcel, que transpila los módulos de CSS de forma predeterminada, para transpilar los módulos de TypeScript. Simplemente agrega el siguiente bloque de código a tu archivo de configuración de Parcel:

    {
  "plugins": [
    ["@parcel/transformer-js", { "jsx": true }],
    "@parcel/transformer-postcss-modules"
  ]
}

    Esto permitirá que el complemento postcss-modules-values transpile los módulos de TypeScript.

    En resumen, al migrar de webpack a Parcel y encontrarte con un error del compilador al cargar TypeScript directamente desde los módulos de nodos, puedes solucionar este problema mediante la implementación de un cargador personalizado dentro de Parcel o utilizando el complemento postcss-modules-values de Parcel para transpilar los módulos de TypeScript.

Comments are closed.