问用SWC配置将NextJS@11迁移到NextJS@12
EN

Stack Overflow用户

提问于 2022-07-26 03:58:03

回答 1查看 723关注 0票数 1

我正在尝试将我的NextJS应用程序迁移到版本12。它使用babel可以正常工作，但我喜欢将环境更改为swc。

在生产生成过程中，我有以下错误：

./src/pages/_app.tsx模块未找到:无法解析‘@/index.scss’中的‘/project/src/page’

这些是我的配置文件：

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