Pesquisa de site

webpack - Como carregar bibliotecas que exportam Typescript em next.js

Ao tentar importar um componente de uma biblioteca privada que exporta Typescript, recebemos a seguinte mensagem de erro:

Module parse failed: Unexpected token (82:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| // Types
> export type {

Como eu poderia consertar isso? Eu tentei incluir explicitamente as bibliotecas node modules no arquivo tsconfig:

  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "node_modules/@private-lib/*.*"
  ],
  "exclude": [""]

mas infelizmente, sem sucesso. Parece haver a possibilidade de alterar a configuração do webpack do next.js, mas tentar apenas inserir um carregador de Typescript não funcionou, infelizmente:

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true,
          },
        },
      ],
    });

    return config;
  },
};

Ele produz este erro:

./node_modules/process/browser.js
TypeError: /home/blub/bla/website/node_modules/process/browser.js: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "BooleanLiteral"

Então, há alguém aí fora que também enfrentou esse problema e poderia me indicar na direção certa? Parece que há muita coisa mágica acontecendo aqui e estou meio perdido.

Resposta #1

Esta pergunta é meio antiga, então achei que postaria uma atualização para expandir a resposta original de directed-laugh para qualquer pessoa que encontre este problema.

Como mencionado, transpilar os módulos via next.config.js parece ser a solução. Embora com o NextJS 13.1 não haja necessidade de instalar o pacote adicional next-transpile-modules, pois esses recursos estão disponíveis nativamente no NextJS 13.1.

No next.config.js, basta adicionar a opção transpilePackages e incluir o nome do pacote ts.

module.exports = {
  ...
  transpilePackages: ['my-ts-package'],
}

Veja a Transpilação de Módulo

Resposta #2

Cheguei a esta pergunta do SO depois de encontrar o que parece ser o mesmo problema: projeto next.js com typescript (yarn create next-app --typescript).

  • yarn: 1.22.17
  • próximo: 12.0.7
  • node: 14.18.1

Para mim, isso aconteceu logo após incluir um pacote ts (externo ao projeto next.js) a partir de um arquivo tsx (interno ao projeto). Parece haver uma magia de transpile por trás dos bastidores, e está tentando analisar o arquivo ts como alguma versão de js puro.

Meu problema foi resolvido pelo next-transpile-modules (^9.0.0). Especificamente, assumindo que você:

  1. tenha next.config.js começando assim
/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  env: {
  },
}
  1. ter uma biblioteca TS externa private-lib onde import { ... } from '/path/to/private-lib' de um arquivo tsx em algum lugar leva ao erro em tempo de compilação.

CORRIGIR :

  1. yarn add next-transpile-modules
  2. yarn add file:/path/to/private-lib
  3. mude as declarações de importação nos arquivos ts/tsx para private-lib
  4. atualize next.config.js para ficar algo assim
/** @type {import('next').NextConfig} */
// see https://github.com/martpie/next-transpile-modules#readme
const withTM = require('next-transpile-modules')(['private-lib']);

module.exports = withTM({
  reactStrictMode: true,
  env: {
  },
})

Sua experiência pode variar, espero que ajude, #ConserteAMagiaComMaisMagia

Artigos relacionados