Working on a project using Next.js with typescript. The dev server was running smoothly, and I could see frontend changes instantly. However, after modifying the next.config.js file and restarting the server (later reverting the changes), compilation issues arose.
The terminal displayed the following error:
To resolve the problem, installing the "@babel/preset-react" preset worked. But this forced me to add import React from 'react'; in every component, which was unnecessary before the server restart.
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;
The sudden issue post-restart is puzzling. Does anyone have insights into why this occurred and only surfaced after the server was restarted?
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"
}
}
]
]
}