Next.js Discord

Discord Forum

Next 15 turbo config migration from webpack

Unanswered
Common Ringed Plover posted this in #help-forum
Open in Discord
Avatar
Common Ringed PloverOP
I am attempting to migrate to Next.js 15 but am encountering difficulties using the --turbopack flag. Here is my current configuration. Based on the turbo documentation (https://nextjs.org/docs/app/api-reference/next-config-js/turbo), it’s unclear to me whether a full migration is feasible, as my existing webpack configuration is dynamic and relies on the default configuration received. My understanding is that turbo only supports static configuration.

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  experimental: {
    swcPlugins: [["@lingui/swc-plugin", {}]],
  },
  webpack(config) {
    config.resolve.fallback = { fs: false, net: false, tls: false };

    config.externals.push("pino-pretty", "lokijs", "encoding", "eccrypto");

    config.module.rules.push({
      test: /\.po/,
      use: ["@lingui/loader"],
    });

    // grab the default nextjs rule for handling all images
    const nextImageLoaderRule = config.module.rules.find(
      (/** @type {any} */ rule) => rule.loader === "next-image-loader",
    );
    config.module.rules = [
      // keep all rules except the default nextjs image loader rule
      ...config.module.rules.filter((/** @type {any} */ rule) => rule !== nextImageLoaderRule),

      // re-add the default image loader rule, but exclude svg
      {
        ...nextImageLoaderRule,
        exclude: /\.svg$/i,
      },

      // add a new rule for svg files, excluding svg files that are imported as react components
      // e.g. those that have a `?component` query param as suffix
      {
        ...nextImageLoaderRule,
        test: /\.svg$/i,
        resourceQuery: {
          ...nextImageLoaderRule.resourceQuery,
          not: [
            ...nextImageLoaderRule.resourceQuery.not,
            /component/, // *.svg?component
          ],
        },
      },

      // add a new rule for svg files that are imported as react components using svgr
      // e.g. those that have a `?component` query param as suffix
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: /component/, // *.svg?component
        use: {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [
                {
                  name: "preset-default",
                  params: {
                    overrides: {
                      removeViewBox: false,
                    },
                  },
                },
              ],
            },
          },
        },
      },
    ];

    return config;
  },
};

0 Replies