Search code examples
javascripttypescriptnext.jsbabeljs

Next.js module failed to compile with typescript


I am working on a Next.js project with typescript. My dev server was running fine and I was able to see frontend changes as I made edits. I restarted my dev server after modifying my next.config.js file (I later undid the changes).

When I restarted my server, it was unable to compile, and I received the below error in the terminal.

I am able to get it to work if I install the "@babel/preset-react" preset, but then I also need to import React from 'react'; within each component, which I don't want to do (nor did I have to before I restarted my server).

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;

I have no idea why this happened, as it was working before. Does anyone know what the issue could be, and why it only presented itself after I restarted my server?

tsconfig.json (default nextjs config):

{
  "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"
        }
      }
    ]
  ]
}

Solution

  • I had the same problem, if you look in the terminal, nextjs shows a link to solve this problem: Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled