Блог

Главная - Вопросы по программированию - Как загрузить библиотеки, которые экспортируют Typescript в next.js

Как загрузить библиотеки, которые экспортируют Typescript в next.js

#typescript #webpack #next.js #webpack-4

#машинопись #webpack #next.js #webpack-4

Вопрос:

При попытке импортировать компонент из частной библиотеки, которая экспортирует Typescript, мы получаем следующее сообщение об ошибке:

 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 {

Как я мог это исправить? Я попытался явно включить модули узла библиотеки в файл tsconfig:

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

но, к сожалению, безрезультатно. Кажется, есть возможность изменить конфигурацию веб-пакета next.js , но попытка просто засунуть загрузчик Typescript, к сожалению, не сработала:

 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;
  },
};

Это приводит к этой ошибке:

 ./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"

Итак, есть ли кто-нибудь, кто также сталкивался с этой проблемой и мог бы указать мне правильное направление? Кажется, здесь много волшебства, и я немного потерялся.

Ответ №1:

Я остановился на этом вопросе SO, столкнувшись с тем, что похоже на ту же проблему: next.js проект с помощью typescript ( yarn create next-app --typescript ).

  • пряжа: 1.22.17
  • следующий: 12.0.7
  • узел: 14.18.1

Для меня это произошло сразу после включения ts пакета (внешнего по отношению к next.js проект) из tsx файла (внутреннего по отношению к проекту). Похоже, что за кулисами происходит магия переноса, и она пытается проанализировать ts-файл как некоторую версию простого js.

Моя проблема была решена с помощью next-transpile-modules (^ 9.0.0). В частности, предполагая, что вы:

  1. next.config.js начинайте так
 /** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,
  env: {
  },
}
  1. есть внешняя библиотека TS private-lib , где import { ... } from '/path/to/private-lib' из файла tsx где-то приводит к ошибке времени компиляции.

ИСПРАВИТЬ:

  1. yarn add next-transpile-modules
  2. yarn add file:/path/to/private-lib
  3. измените инструкции импорта в файлах ts / tsx для private-lib
  4. обновите next.config.js , чтобы выглядеть примерно так
 /** @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: {
  },
})

YMMV, HTH, #FixMagicWithMoreMagic

Комментарии:

1. Отличное решение, с webpack всегда сложно работать. Это решило проблему, как #FixMagicWithMoreMagic 🙂 Приветствия

2. Этот ответ сделал мой день. Это работает ВОЛШЕБНЫМ ОБРАЗОМ!!

Ответ №2:

Я предполагаю, что проблема связана с jsx? переносом файлов с ts-loader помощью so, поэтому безопасно просто переносить tsx? файл только в случае ts-loadder :

 webpack: (config, options) => {
  config.module.rules.push({
    test: /.(ts)x?$/, // Just `tsx?` file only
    use: [
      // options.defaultLoaders.babel, I don't think it's necessary to have this loader too
      {
        loader: "ts-loader",
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
          onlyCompileBundledFiles: true,
        },
      },
    ],
  });

  return config;
},

Еще одна вещь, если ваш репозиторий теперь использует jsx? files, что означает импорт tsx? файла в jsx? файл, возможно, вам придется включить { "allowJs": true } tsconfig.json

Метки: ,