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