Build fails due to missing module (SVG)

[kwiat1990]

Hi, I have simple static site built with Gridsome and Forestry, which I can build locally without any errors but as soon as I trigger a deployment on Netlify, the build breaks due to missing webpack module. It seems like Netlify has a problem with how I import SVG icons (?) but I really have no idea how I can fix it.

My Icon.vue component:

computed: {
    iconCode() {
      // this.icon is a string, which is passed in as prop
      return require(`~/assets/icons/${this.icon}.svg`)?.default?.id;
    },
  },

My webpack config:

chainWebpack: (config) => {
      config.node.set('__dirname', true);

      const svgRule = config.module.rule("svg");
      svgRule.uses.clear();
      svgRule
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .end()
        .use("svgo-loader")
        .loader("svgo-loader")
        .options({
          plugins: [
            { removeNonInheritableGroupAttrs: true },
            { collapseGroups: true },
            { convertColors: { currentColor: true } },
          ],
        });
    }

The entire log:

8:30:23 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
8:30:23 PM: build-image tag: v3.5.0
8:30:23 PM: buildbot version: df708c2c221a3345a3fb36b8609ebca30cb2f6c5
8:30:23 PM: Building without cache
8:30:23 PM: Starting to prepare the repo for build
8:30:23 PM: No cached dependencies found. Cloning fresh repo
8:30:23 PM: git clone https://github.com/kwiat1990/marketingowy-wir-forestry
8:30:24 PM: Preparing Git Reference refs/heads/master
8:30:26 PM: Starting build script
8:30:26 PM: Installing dependencies
8:30:26 PM: Python version set to 2.7
8:30:27 PM: v12.18.0 is already installed.
8:30:28 PM: Now using node v12.18.0 (npm v6.14.4)
8:30:28 PM: Started restoring cached build plugins
8:30:28 PM: Finished restoring cached build plugins
8:30:28 PM: Attempting ruby version 2.7.1, read from environment
8:30:30 PM: Using ruby version 2.7.1
8:30:30 PM: Using PHP version 5.6
8:30:30 PM: Started restoring cached node modules
8:30:30 PM: Finished restoring cached node modules
8:30:30 PM: Installing NPM modules using NPM version 6.14.4
8:31:02 PM: > sharp@0.25.4 install /opt/build/repo/node_modules/sharp
8:31:02 PM: > (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
8:31:03 PM: info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz
8:31:05 PM: > node-sass@5.0.0 install /opt/build/repo/node_modules/node-sass
8:31:05 PM: > node scripts/install.js
8:31:06 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v5.0.0/linux-x64-72_binding.node
8:31:07 PM: Download complete
8:31:07 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
8:31:07 PM: Caching binary to /opt/buildhome/.npm/node-sass/5.0.0/linux-x64-72_binding.node
8:31:07 PM: > core-js@3.7.0 postinstall /opt/build/repo/node_modules/core-js
8:31:07 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:31:08 PM: > cwebp-bin@5.1.0 postinstall /opt/build/repo/node_modules/cwebp-bin
8:31:08 PM: > node lib/install.js
8:31:08 PM:   ✔ cwebp pre-build test passed successfully
8:31:08 PM: > mozjpeg@6.0.1 postinstall /opt/build/repo/node_modules/mozjpeg
8:31:08 PM: > node lib/install.js
8:31:09 PM:   ✔ mozjpeg pre-build test passed successfully
8:31:09 PM: > pngquant-bin@5.0.2 postinstall /opt/build/repo/node_modules/pngquant-bin
8:31:09 PM: > node lib/install.js
8:31:09 PM:   ✔ pngquant pre-build test passed successfully
8:31:09 PM: > node-sass@5.0.0 postinstall /opt/build/repo/node_modules/node-sass
8:31:09 PM: > node scripts/build.js
8:31:09 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-72/binding.node
8:31:09 PM: Testing binary
8:31:10 PM: Binary is fine
8:31:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/watchpack/node_modules/fsevents):
8:31:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:31:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
8:31:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:31:11 PM: added 1678 packages from 825 contributors and audited 1682 packages in 40.067s
8:31:13 PM: 68 packages are looking for funding
8:31:13 PM:   run `npm fund` for details
8:31:13 PM: found 0 vulnerabilities
8:31:13 PM: NPM modules installed
8:31:13 PM: Started restoring cached go cache
8:31:13 PM: Finished restoring cached go cache
8:31:13 PM: go version go1.14.4 linux/amd64
8:31:13 PM: go version go1.14.4 linux/amd64
8:31:13 PM: Installing missing commands
8:31:13 PM: Verify run directory
8:31:15 PM: ​
8:31:15 PM: ┌─────────────────────────────┐
8:31:15 PM: │        Netlify Build        │
8:31:15 PM: └─────────────────────────────┘
8:31:15 PM: ​
8:31:15 PM: ❯ Version
8:31:15 PM:   @netlify/build 5.2.1
8:31:15 PM: ​
8:31:15 PM: ❯ Flags
8:31:15 PM:   deployId: 5fb181caa30abc5f3e54ada6
8:31:15 PM:   mode: buildbot
8:31:15 PM: ​
8:31:15 PM: ❯ Current directory
8:31:15 PM:   /opt/build/repo
8:31:15 PM: ​
8:31:15 PM: ❯ Config file
8:31:15 PM:   No config file was defined: using default values.
8:31:15 PM: ​
8:31:15 PM: ❯ Context
8:31:15 PM:   production
8:31:15 PM: ​
8:31:15 PM: ┌───────────────────────────────────┐
8:31:15 PM: │ 1. Build command from Netlify app │
8:31:15 PM: └───────────────────────────────────┘
8:31:15 PM: ​
8:31:15 PM: $ gridsome  build
8:31:15 PM: Gridsome v0.7.22
8:31:16 PM: Initializing plugins...
8:31:16 PM: Load sources - 0s
8:31:16 PM: Create GraphQL schema - 0.03s
8:31:16 PM: Create pages and templates - 0.04s
8:31:16 PM: Generate temporary code - 0.03s
8:31:16 PM: Bootstrap finish - 1.23s
8:31:16 PM: Compiling assets...
8:31:22 PM: warn - Tailwind is not purging unused styles because no template paths have been provided.
8:31:22 PM: warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
8:31:22 PM: warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
8:31:39 PM: Compile assets - 22.49s
8:31:39 PM: Execute GraphQL (2 queries) - 0s
8:31:39 PM: Could not generate HTML for "/404/":
8:31:39 PM: Error: Cannot find module './search.svg'
8:31:39 PM:     at webpackContextResolve (webpack:/src/assets/icons sync ^\.\/.*\.svg$:10:0)
8:31:39 PM:     at webpackContext (webpack:/src/assets/icons sync ^\.\/.*\.svg$:5:0)
8:31:39 PM:     at a.iconCode (src/components/Icon.vue:21:21)
8:31:39 PM:     at a.iconCode (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:29698)
8:31:39 PM:     at a.Iconvue_type_template_id_0d15cfea_scoped_true_render (src/components/Icon.vue?c1ee:3:204)
8:31:39 PM:     at a.t._render (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
8:31:39 PM:     at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70575
8:31:39 PM:     at Yi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67139)
8:31:39 PM:     at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70551)
8:31:39 PM:     at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70182)
8:31:40 PM: ​
8:31:40 PM: ┌─────────────────────────────┐
8:31:40 PM: │   "build.command" failed    │
8:31:40 PM: └─────────────────────────────┘
8:31:40 PM: ​
8:31:40 PM:   Error message
8:31:40 PM:   Command failed with exit code 1: gridsome  build
8:31:40 PM: ​
8:31:40 PM:   Error location
8:31:40 PM:   In Build command from Netlify app:
8:31:40 PM:   gridsome  build
8:31:40 PM: ​
8:31:40 PM:   Resolved config
8:31:40 PM:   build:
8:31:40 PM:     command: gridsome  build
8:31:40 PM:     commandOrigin: ui
8:31:40 PM:     publish: /opt/build/repo/dist
8:31:40 PM: Caching artifacts
8:31:40 PM: Started saving node modules
8:31:40 PM: Finished saving node modules
8:31:40 PM: Started saving build plugins
8:31:40 PM: Finished saving build plugins
8:31:40 PM: Started saving pip cache
8:31:40 PM: Finished saving pip cache
8:31:40 PM: Started saving emacs cask dependencies
8:31:40 PM: Finished saving emacs cask dependencies
8:31:40 PM: Started saving maven dependencies
8:31:40 PM: Finished saving maven dependencies
8:31:40 PM: Started saving boot dependencies
8:31:40 PM: Finished saving boot dependencies
8:31:40 PM: Started saving go dependencies
8:31:40 PM: Finished saving go dependencies
8:31:43 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
8:31:43 PM: Failing build: Failed to build site
8:31:43 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
8:31:43 PM: Finished processing build request in 1m20.11044481s```

[fool]

Hiya @kwiat1990 and sorry to be slow to get back to you!

While our main site build debugging advice is around syncing versions of node/packages and making sure you build with a clean repo, and can be found here:

[Support Guide] Debugging Netlify site builds

Last reviewed by Netlify Support - August, 2023 Note: This article is only about builds within Netlify’s Continuous Integration (CI) environment, as triggered from git commits or from incoming build webhooks. You can learn more in depth about how Netlify builds your site in this article about how our build bots build sites. Some background There are a fair number of reasons that a build could fail in Netlify’s CI environment, even if building works locally. Testing locally is always the place …

I wonder based on that error message - are you sure that the file is in ./ during build? Might be worth trying out our “run the build environment locally” to see if you can detect the problem in a local shell that you can examine rather than diagnosing only from the failure logs:

GitHub - netlify/build-image: This is the build image used for running...

Let me know if that helps!