Migrating NextJS#11 to NextJS#12 with SWC config - reactjs

Question

I'm trying to migrate my NextJS App to version 12.
it's working properly using babel config, but I like to change the environment to swc.
I have the error below during production build:
./src/pages/_app.tsx Module not found: Can't resolve
'#styles/index.scss' in
'/project/src/pages'
these are my config files:
tsconfig.json:
{
"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",
"baseUrl": ".",
"paths": {
"#assets/*": ["src/assets/*"],
"#api": ["src/api"],
"#i18n": ["src/scripts/i18n"],
"#styles": ["./src/styles"],
"#redux": ["./src/redux"],
"#slices/*": ["./src/redux/slices/*"],
"#utils": ["./src/utils"],
"#root/*": ["./src/root/*"],
"#hooks/*": ["./src/hooks/*"],
"#schema/*": ["./src/types/schema/*"],
"#configs": ["./src/app.config"],
"#contexts/*": ["./src/contexts/*"],
"#components/*": ["./src/components/*"],
"#extensions/*": ["./src/scripts/extensions/*"],
"~menu/*": ["./src/sections/menu/*"],
"~order/*": ["./src/sections/order/*"],
"~search/*": ["./src/sections/search/*"],
"~growth/*": ["./src/sections/growth/*"],
"~army/*": ["./src/sections/army/*"],
"#jest-provider": ["./src/root/JestProvider"],
"~service/*": ["./src/service/*"]
}
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.test.js"]
}
next.config.js
const webpack = require('webpack')
const withPWA = require('next-pwa')
const pJson = require('./package.json')
const withPlugins = require('next-compose-plugins')
const setupENVs = require('./src/scripts/env.config')
const bundleAnalyzer = require('#next/bundle-analyzer')
const routesConfig = require('./src/scripts/routes.config')
const runtimeCaching = require('./src/scripts/sw.cache.config')
const {withSentryConfig} = require('#sentry/nextjs')
// const withTM = require('next-transpile-modules')(['design-system'])
const isDev = process.env.NODE_ENV !== 'production'
routesConfig(isDev)
const plugins = [new webpack.DefinePlugin(setupENVs())]
const securityHeaders = [
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN',
},
]
const basConfig = (nextConfig = {}) => ({
...nextConfig,
webpack(config, options) {
config.plugins.push(...plugins)
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options)
}
return config
},
})
const withAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
})
let transpileModules
if (isDev) {
transpileModules = basConfig()
} else if (process.env.ANALYZE === 'true') {
transpileModules = basConfig(withAnalyzer())
} else {
transpileModules = basConfig(
withPWA({pwa: {dest: 'public', runtimeCaching, disable: true}})
)
}
const moduleExports = withPlugins([transpileModules], {
compiler: {
styledComponents: {
displayName: true,
ssr: true,
},
removeConsole: true,
// reactRemoveProperties: true,
},
env: {
APP_VERSION: pJson.version,
},
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
]
},
sentry: {
disableClientWebpackPlugin: true,
disableServerWebpackPlugin: true,
},
swcMinify: true,
experimental: {
forceSwcTransforms: true,
swcTraceProfiling: true,
swcMinifyDebugOptions: {
compress: {
defaults: true,
side_effects: false,
},
},
modularizeImports: {
lodash: {
transform: 'lodash/{{member}}',
},
},
},
})
module.exports = withSentryConfig(moduleExports)
babel.config.json
{
"presets": [
[
"next/babel",
{
"preset-env": {}
}
]
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
[
"module-resolver",
{
"root": "./src",
"alias": {
"#assets": "./src/assets",
"#api": "./src/api",
"#i18n": "./src/scripts/i18n",
"#root": "./src/root",
"#styles": "./src/styles",
"#redux": "./src/redux",
"#slices": "./src/redux/slices",
"#hooks": "./src/hooks",
"#utils": "./src/utils",
"#schema": "./src/types/schema",
"#contexts": "./src/contexts",
"#configs": "./src/app.config",
"#components": "./src/components",
"#extensions": "./src/scripts/extensions",
"~menu": "./src/sections/menu",
"~order": "./src/sections/order",
"~search": "./src/sections/search",
"~growth": "./src/sections/growth",
"~army": "./src/sections/army",
"#jest-provider": "./src/root/JestProvider",
"#mockData": "./__mocks__/data",
"~service": "./src/service"
},
"extensions": [".js", ".jsx", ".ts", ".tsx", ".es", ".es6", ".mjs"]
}
]
],
"env": {
"production": {
"plugins": [["transform-remove-console"]]
},
"test": {
"presets": [["#babel/preset-env", {"modules": false}], "next/babel"]
}
}
}
could you please help me on this?

Answer 1

You should consider these two things.
First, as the next.js document says you're opting out the swc compiler by having babel config.
The new Rust compiler is backwards compatible. If you have an existing Babel configuration, you will automatically be opted out.
here's the document: https://nextjs.org/blog/next-12#faster-builds-and-fast-refresh-with-rust-compiler
Second, you have some issues with your module mapping as the styles must not be under the 'pages' folder.
'/project/src/pages'