v0.38.0 breaks custom Webpack loader

[medihack]

What is the problem?

I use SVGR as a Webpack plugin to load SVGs as React components. This worked fine till Blitz 0.37.0. But Blitz 0.38.x seems to break things. The SVGs can't be loaded anymore (TypeError: unsupported file type: undefined (file: undefined)).

Note: The problem occurs with Webpack 4 and 5.

Paste all your error logs here:

error - ./app/flags/de.svg
TypeError: unsupported file type: undefined (file: undefined)

Paste all relevant code snippets here:

blitz.config.ts

    ....
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [
                {
                  cleanupIDs: false,
                  prefixIds: false,
                  convertPathData: false,
                },
              ],
            },
          },
        },
      ],
    })
    ....

How I load my SVGs

let icons: object
if (process.env.NODE_ENV !== "test") {
  const iconsContext = require.context("./", true, /\.svg$/)
  icons = iconsContext.keys().reduce((icons, file) => {
    const Icon = iconsContext(file).default
    const label = file.slice(2, -4) // strip './' and '.svg'
    icons[label] = Icon
    return icons
  }, {})
} else {
  // We have to mock require.context for Jest as it is Webpack only
  icons = {}
}

export default icons

Note:
I also tried it without require.context and just use import syntax, but it results in the same error.

What are detailed steps to reproduce this?

I created a new Blitz project to demonstrate the problem, https://github.com/medihack/blitz_v0.38.1

Run blitz -v and paste the output here:

Linux 5.4 | linux-x64 | Node: v14.17.0

blitz: 0.38.1 (global)
blitz: 0.38.1 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 4.72 GB / 12.42 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.25.0 => 2.25.0 
    blitz: 0.38.1 => 0.38.1 
    prisma: 2.25.0 => 2.25.0 
    react: alpha => 18.0.0-alpha-568dc3532 
    react-dom: alpha => 18.0.0-alpha-568dc3532 
    typescript: ~4.3 => 4.3.4

Please include below any other applicable logs and screenshots that show your problem:

No response

[flybayer]

This is a bug in Next.js 11: vercel/next.js#26130

They've already fixed it so it'll be available in the next patch release. The above issue has a workaround.

So I'm going to go ahead and close this since there's nothing actionable for us

[medihack]

Cool, thanks for letting me know!

[gielcobben]

I'm still having this issue on the latest version of blitz.

[medihack]

@gielcobben For me the problem (with SVGR) is completely resolved. Maybe an other issue? Maybe you could post your SVGR setup and how you load the files.

[gielcobben]

Thanks for the reply. Would you mind sharing your config? Here is mine:

blitz.config.ts:

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    })

    return config
  },

global.d.ts:

declare module "*.svg" {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
  export default ReactComponent
}

[medihack]

@gielcobben Sure, below are mine (but yours look ok). What's the output of blitz -v?

custom.d.ts

declare module "*.svg" {
  import { VFC, SVGProps } from "react"
  const SVG: VFC<SVGProps<SVGSVGElement>>
  export default SVG
}

blitz.config.ts

import { sessionMiddleware, simpleRolesIsAuthorized } from "blitz"
import bundleAnalyzer from "@next/bundle-analyzer"

const enableBundleAnalyzer = process.env.npm_lifecycle_event === "build"

const withBundleAnalyzer = bundleAnalyzer({
  enabled: enableBundleAnalyzer,
})

module.exports = withBundleAnalyzer({
  middleware: [
    sessionMiddleware({
      cookiePrefix: "foobar",
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
  i18n: {
    localeDetection: false,
    locales: ["en", "de", "cimode"],
    defaultLocale: "en",
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Allows the modules to find their module name during build time
    config.node = {
      ...config.node,
      __dirname: true,
    }

    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [
                {
                  cleanupIDs: false,
                  prefixIds: false,
                  convertPathData: false,
                },
              ],
            },
          },
        },
      ],
    })
    return config
  },
})

index.ts

let icons: object
if (process.env.NODE_ENV !== "test") {
  const iconsContext = require.context("./", true, /\.svg$/)
  icons = iconsContext.keys().reduce((icons, file) => {
    const Icon = iconsContext(file).default
    const label = file.slice(2, -4) // strip './' and '.svg'
    icons[label] = Icon
    return icons
  }, {})
} else {
  // We have to mock require.context for Jest as it is Webpack only
  icons = {}
}

export default icons

[flybayer]

Should be fixed on blitz@canary because of nextjs 11.1 upgrade: blitz-js/blitz#2656