React Strict DOM + Next.js with support for both Webpack and Turbopack

next.config.ts

import type { NextConfig } from 'next'

function getBabelLoader() {
  const dev = process.env.NODE_ENV !== 'production'
  return {
    loader: 'babel-loader',
    options: {
      parserOpts: {
        plugins: ['typescript', 'jsx'],
      },
      presets: [
        [
          'react-strict-dom/babel-preset',
          {
            debug: dev,
            dev: dev,
            rootDir: process.cwd(),
          },
        ],
      ],
    },
  }
}

function withReactStrictPlugin(nextConfig: NextConfig): NextConfig {
  return {
    ...nextConfig,
    transpilePackages: [
      ...(nextConfig.transpilePackages ?? []),
      'react-strict-dom',
    ],
    webpack: (config, context) => {
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules(?!\/react-strict-dom)/,
        use: [getBabelLoader()],
      })

      return typeof nextConfig.webpack === 'function'
        ? nextConfig.webpack(config, context)
        : config
    },
    turbopack: {
      ...nextConfig.turbopack,
      rules: {
        ...nextConfig.turbopack?.rules,
        '*.{js,jsx,ts,tsx}': {
          foreign: false,
          default: {
            loaders: [getBabelLoader()],
          },
        },
      },
    },
  }
}

function withPlugins(nextConfig: NextConfig) {
  return plugins.reduce((config, plugin) => plugin(config), nextConfig)
}

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

const plugins = [withReactStrictPlugin]

module.exports = withPlugins(nextConfig)

postcss.config.cjs

const dev = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: {
    'postcss-react-strict-dom': {
      include: [
        // Include source files to watch for style changes
        'src/**/*.{js,jsx,mjs,ts,tsx}',
      ],
      babelConfig: {
        babelrc: false,
        parserOpts: {
          plugins: ['typescript', 'jsx'],
        },
        presets: [
          [
            'react-strict-dom/babel-preset',
            {
              debug: dev,
              dev,
              rootDir: process.cwd(),
            },
          ],
        ],
      },
    },
    autoprefixer: {},
  },
}