Модуль Next.js не удалось скомпилировать с машинописным текстом

Я работаю над Next.js проектом с typescript. Мой сервер разработки работал нормально, и я мог видеть изменения во внешнем интерфейсе, когда вносил изменения. Я перезапустил свой сервер разработки после изменения моего файла next.config.js (позже я отменил изменения).

Когда я перезапустил свой сервер, он не смог скомпилироваться, и я получил следующую ошибку в терминале.

Я могу заставить его работать, если я установлю предустановку "@babel/preset-react", но тогда мне также нужно import React from 'react'; в каждом компоненте, чего я не хочу делать (и мне не нужно было, прежде чем я перезапустил свой сервер).

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /my/file/path/.env
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /my/file/path/.babelrc
error - ./src/pages/_app.tsx
Module parse failed: Unexpected token (5:9)
|   var Component = _ref.Component,
|       pageProps = _ref.pageProps;
>   return <Component {...pageProps} />;
| }
| _c = App;

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

tsconfig.json (конфигурация по умолчанию nextjs):

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": ["node_modules"]
}

.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    [
      "module-resolver",
      {
        "alias": {
          "@": "./src"
        }
      }
    ]
  ]
}

Зачем вам нужен файл .babelrc?

krirkrirk 29.03.2023 22:49

.babelrc может быть не связан с проблемой, с которой я столкнулся. Я включил его, потому что в своем монорепозитории я разместил код, который должен заполнить базу данных. Код находится в typescript, и я запускаю код через npx babel-node <file>, поэтому моя конфигурация позволяет мне это сделать.

713sean 29.03.2023 22:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
233
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У меня была такая же проблема, если вы посмотрите в терминале, nextjs показывает ссылку для решения этой проблемы: Отключен SWC в качестве замены для Babel из-за пользовательской конфигурации Babel «.babelrc» https://nextjs.org/docs/messages/swc-disabled

Другие вопросы по теме