Netlify Build Deployment Error because of Webpack

dobbsjs · August 26, 2021, 4:30am

Site Name: MMODoctor
Framework: NextJS Application
Error: Webpack Build Error

8:53:35 PM: Build ready to start
8:53:37 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
8:53:37 PM: build-image tag: v4.3.0
8:53:37 PM: buildbot version: d2795bf5a96b85e585e90944f15f15381ce164a7
8:53:37 PM: Building without cache
8:53:37 PM: Starting to prepare the repo for build
8:53:37 PM: No cached dependencies found. Cloning fresh repo
8:53:37 PM: git clone https://github.com/jessecdob/mmodoctor-frontend
8:53:39 PM: Preparing Git Reference refs/heads/master
8:53:39 PM: Parsing package.json dependencies
8:53:40 PM: Starting build script
8:53:40 PM: Installing dependencies
8:53:40 PM: Python version set to 2.7
8:53:41 PM: Downloading and installing node v16.8.0...
8:53:41 PM: Downloading https://nodejs.org/dist/v16.8.0/node-v16.8.0-linux-x64.tar.xz...
8:53:41 PM: Computing checksum with sha256sum
8:53:41 PM: Checksums matched!
8:53:44 PM: Now using node v16.8.0 (npm v7.21.0)
8:53:44 PM: Started restoring cached build plugins
8:53:44 PM: Finished restoring cached build plugins
8:53:44 PM: Attempting ruby version 2.7.2, read from environment
8:53:45 PM: Using ruby version 2.7.2
8:53:46 PM: Using PHP version 8.0
8:53:46 PM: Started restoring cached node modules
8:53:46 PM: Finished restoring cached node modules
8:53:46 PM: Installing NPM modules using NPM version 7.21.0
8:54:00 PM: npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
8:54:01 PM: npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
8:54:01 PM: npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
8:54:01 PM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
8:54:04 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
8:54:08 PM: npm WARN deprecated node-pre-gyp@0.13.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
8:54:10 PM: npm WARN deprecated acorn-import-meta@1.1.0: acorn>=7.2 supports import-meta
8:54:10 PM: npm WARN deprecated acorn-export-ns-from@0.1.0: acorn>=7.2 supports export-ns-from
8:54:10 PM: npm WARN deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
8:54:10 PM: npm WARN deprecated @zeit/next-css@1.0.1: Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.
8:54:11 PM: npm WARN deprecated acorn-numeric-separator@0.3.6: acorn>=7.4 supports numeric separators
8:54:14 PM: npm WARN deprecated axios@0.18.1: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
8:54:49 PM: added 2118 packages, and audited 2119 packages in 1m
8:54:49 PM: 220 packages are looking for funding
8:54:49 PM:   run `npm fund` for details
8:54:49 PM: 19 vulnerabilities (6 moderate, 13 high)
8:54:49 PM: To address issues that do not require attention, run:
8:54:49 PM:   npm audit fix
8:54:49 PM: Some issues need review, and may require choosing
8:54:49 PM: a different dependency.
8:54:49 PM: Run `npm audit` for details.
8:54:49 PM: NPM modules installed
8:54:49 PM: Started restoring cached go cache
8:54:49 PM: Finished restoring cached go cache
8:54:49 PM: go version go1.16.5 linux/amd64
8:54:49 PM: go version go1.16.5 linux/amd64
8:54:49 PM: Installing missing commands
8:54:49 PM: Verify run directory
8:54:50 PM: 
8:54:50 PM: ────────────────────────────────────────────────────────────────
8:54:50 PM:   Netlify Build                                                 
8:54:50 PM: ────────────────────────────────────────────────────────────────
8:54:50 PM: 
8:54:50 PM: ❯ Version
8:54:50 PM:   @netlify/build 18.5.0
8:54:50 PM: 
8:54:50 PM: ❯ Flags
8:54:50 PM:   baseRelDir: true
8:54:50 PM:   buildId: 6127103fdb521c3c077ae5c6
8:54:50 PM:   deployId: 6127103fdb521c3c077ae5c8
8:54:50 PM: 
8:54:50 PM: ❯ Current directory
8:54:50 PM:   /opt/build/repo
8:54:50 PM: 
8:54:50 PM: ❯ Config file
8:54:50 PM:   /opt/build/repo/netlify.toml
8:54:50 PM: 
8:54:50 PM: ❯ Context
8:54:50 PM:   production
8:54:50 PM: 
8:54:50 PM: ❯ Loading plugins
8:54:50 PM:    - @netlify/plugin-nextjs@3.8.0 from netlify.toml and package.json
8:54:50 PM:    - netlify-plugin-cache-nextjs@1.6.1 from Netlify app and package.json
8:54:51 PM: 
8:54:51 PM: ────────────────────────────────────────────────────────────────
8:54:51 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
8:54:51 PM: ────────────────────────────────────────────────────────────────
8:54:51 PM: 
8:54:51 PM: Using Next.js 11.1.0
8:54:51 PM: Warning: support for Next.js >=11.1.0 is experimental
8:54:52 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
8:54:53 PM: No Next.js cache to restore.
8:54:53 PM: 
8:54:53 PM: (@netlify/plugin-nextjs onPreBuild completed in 2.2s)
8:54:53 PM: 
8:54:53 PM: ────────────────────────────────────────────────────────────────
8:54:53 PM:   2. onPreBuild command from netlify-plugin-cache-nextjs        
8:54:53 PM: ────────────────────────────────────────────────────────────────
8:54:53 PM: 
8:54:53 PM: .next/cache does not exist on disk
8:54:53 PM: Couldn't restore the cache for the .next folder at the location .next/cache
8:54:53 PM: (netlify-plugin-cache-nextjs onPreBuild completed in 209ms)
8:54:53 PM: 
8:54:53 PM: ────────────────────────────────────────────────────────────────
8:54:53 PM:   3. build.command from netlify.toml                            
8:54:53 PM: ────────────────────────────────────────────────────────────────
8:54:53 PM: 
8:54:53 PM: $ npm run build
8:54:54 PM: > mmodoctor-frontend@0.1.0 build
8:54:54 PM: > next build
8:54:55 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
8:54:56 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
8:54:56 PM: info  - Checking validity of types...
8:54:56 PM: info  - Creating an optimized production build...
8:55:01 PM: Failed to compile.
8:55:01 PM: 
8:55:01 PM: ModuleNotFoundError: Module not found: Error: Can't resolve 'frontmatter-markdown-loader' in '/opt/build/repo'
8:55:01 PM: > Build error occurred
8:55:01 PM: Error: > Build failed because of webpack errors
8:55:01 PM:     at /opt/build/repo/node_modules/next/dist/build/index.js:390:19
8:55:01 PM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
8:55:01 PM: 
8:55:01 PM: ────────────────────────────────────────────────────────────────
8:55:01 PM:   "build.command" failed                                        
8:55:01 PM: ────────────────────────────────────────────────────────────────
8:55:01 PM: 
8:55:01 PM:   Error message
8:55:01 PM:   Command failed with exit code 1: npm run build
8:55:01 PM: 
8:55:01 PM:   Error location
8:55:01 PM:   In build.command from netlify.toml:
8:55:01 PM:   npm run build
8:55:01 PM: 
8:55:01 PM:   Resolved config
8:55:01 PM:   build:
8:55:01 PM:     command: npm run build
8:55:01 PM:     commandOrigin: config
8:55:01 PM:     environment:
8:55:01 PM:       - NEXT_PUBLIC_API_URL
8:55:01 PM:       - NEXT_PUBLIC_MAGIC_PUBLIC_KEY
8:55:01 PM:       - NEXT_PUBLIC_STRIPE_PK
8:55:01 PM:       - NEXT_SERVERLESS
8:55:01 PM:       - NODE_ENV
8:55:01 PM:     publish: /opt/build/repo/out_publish
8:55:01 PM:     publishOrigin: config
8:55:01 PM:   functionsDirectory: /opt/build/repo/out_functions
8:55:01 PM:   plugins:
8:55:01 PM:     - inputs: {}
8:55:01 PM:       origin: config
8:55:01 PM:       package: '@netlify/plugin-nextjs'
8:55:01 PM:     - inputs: {}
8:55:01 PM:       origin: ui
8:55:01 PM:       package: netlify-plugin-cache-nextjs
8:55:02 PM: Caching artifacts
8:55:02 PM: Started saving node modules
8:55:02 PM: Finished saving node modules
8:55:02 PM: Started saving build plugins
8:55:02 PM: Finished saving build plugins
8:55:02 PM: Started saving pip cache
8:55:02 PM: Finished saving pip cache
8:55:02 PM: Started saving emacs cask dependencies
8:55:02 PM: Finished saving emacs cask dependencies
8:55:02 PM: Started saving maven dependencies
8:55:02 PM: Finished saving maven dependencies
8:55:02 PM: Started saving boot dependencies
8:55:02 PM: Finished saving boot dependencies
8:55:02 PM: Started saving rust rustup cache
8:55:02 PM: Finished saving rust rustup cache
8:55:02 PM: Started saving go dependencies
8:55:02 PM: Finished saving go dependencies
8:55:04 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
8:55:04 PM: Creating deploy upload records
8:55:04 PM: Failing build: Failed to build site
8:55:04 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
8:55:04 PM: Finished processing build request in 1m27.477582344s

I keep on getting this error “8:55:01 PM: ModuleNotFoundError: Module not found: Error: Can’t resolve ‘frontmatter-markdown-loader’ in ‘/opt/build/repo’
8:55:01 PM: > Build error occurred
8:55:01 PM: Error: > Build failed because of webpack errors
8:55:01 PM: at /opt/build/repo/node_modules/next/dist/build/index.js:390:19” , It happens ocassionally and each time I solve it. It works for a while until It doesn’t again but this time around, I wasn’t able to find a fix. Any help would be greatly appreciated.

coelmay · August 26, 2021, 4:53am

Hi @dobbsjs

Do you have frontmatter-markdown-loader as a dependency in your package.json?

dobbsjs · August 26, 2021, 5:04am

Yes.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "npm run build",
    "lint": "next lint",
    "generate-sitemap": "node sitemap-generator.js"
  },
  "dependencies": {
    "@auth0/auth0-react": "^1.5.0",
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@headlessui/react": "^1.4.0",
    "@netlify/plugin-nextjs": "^3.8.0",
    "@sergeymyssak/nextjs-sitemap": "^1.1.1",
    "@stripe/stripe-js": "^1.15.1",
    "@svgr/webpack": "^5.5.0",
    "@tailwindcss/typography": "^0.4.1",
    "@zeit/next-css": "^1.0.1",
    "autoprefixer": "^10.2.6",
    "bootstrap": "^4.5.2",
    "dotenv": "^8.2.0",
    "faunadb": "^4.3.0",
    "isomorphic-unfetch": "^3.1.0",
    "lodash": "^4.17.21",
    "magic-sdk": "^4.3.0",
    "netlify-cms": "^2.8.0",
    "netlify-plugin-cache-nextjs": "^1.6.1",
    "next": "^11.1.0",
    "next-auth": "^3.13.3",
    "next-compose-plugins": "^2.2.0",
    "next-images": "^1.8.1",
    "next-mdx-remote": "^3.0.2",
    "postcss": "^8.3.5",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.2",
    "react-beforeunload": "^2.2.4",
    "react-bootstrap": "^1.3.0",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^17.0.2",
    "react-fluid-table": "^0.4.2",
    "react-markdown": "^6.0.2",
    "react-router-dom": "^5.2.0",
    "react-table": "^7.7.0",
    "react-timestamp": "^5.1.0",
    "react-use-cart": "^1.11.1",
    "react-window": "^1.8.6",
    "sass": "^1.26.10",
    "strapi-sdk-javascript": "^0.3.3",
    "stripe": "^8.160.0",
    "swr": "^0.5.6",
    "tailwindcss": "^2.2.2",
    "validator": "^13.1.1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "css-loader": "^5.2.6",
    "eslint": "^7.31.0",
    "eslint-config-next": "^11.0.1",
    "frontmatter-markdown-loader": "^3.6.3",
    "ts-loader": "^8.0.3"
  }
}

coelmay · August 26, 2021, 5:10am

Could you try moving it from devDependencies to dependencies.

dobbsjs · August 26, 2021, 5:17am

I just tried that and it didn’t change anything.

coelmay · August 26, 2021, 5:49am

Do you have frontmatter-markdown-loader in your next.config.js?

E.g. (reference)

module.exports = {
  webpack: (config) => {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: 'frontmatter-markdown-loader'
      }
    )

    return config
  },
}

dobbsjs · August 26, 2021, 6:00am

Yes, I have that already.

const nextConfig = {
    env: {
      API_URL: process.env.API_URL
    },
    images: {
      disableStaticImages: true
    },
    webpack: (cfg) => {
        cfg.module.rules.push(
            {
                test: /\.md$/,
                loader: 'frontmatter-markdown-loader',
                // options: { mode: ['react-component']}
            }
        )
        return cfg;
    },
    target: 'serverless', 
    eslint: {
      // Warning: Dangerously allow production builds to successfully complete even if
      // your project has ESLint errors.
      ignoreDuringBuilds: true,
    },
}

dobbsjs · August 27, 2021, 11:06pm

This is a weird bug that I think it’s on Netlify’s side because I just deployed on Vercel and it works perfectly.

hillary · August 30, 2021, 7:02pm

Hey there, @dobbsjs

Thanks so much for providing so much context here. Do you happen to have a public repo as well? I am going to send this thread to our NextJS expert, and want to share as much information with them as possible. Let me know!

dobbsjs · August 30, 2021, 8:22pm

I don’t have a public repo for this. I believe that something on Netlify’s build process is making this error. I was able to successful deploy it to Vercel’s NextJS Hosting.

fool · August 31, 2021, 3:47pm

I understand that it works well on Vercel, but we will need your help in debugging here if that is your desire. Understand if you are not interested, in that case, no need to respond.

Upon review, our team did point out that this (from your build logs) is unnecessary:

8:54:50 PM:    - @netlify/plugin-nextjs@3.8.0 from netlify.toml and package.json
8:54:50 PM:    - netlify-plugin-cache-nextjs@1.6.1 from Netlify app and package.json

You should not need the second one if you use the first. If removing that (and making sure you don’t see it mentioned in your next build log) doesn’t help, would you be willing to share your next.config.js and netlify.toml? This is what we’ll need to see to debug further from our side.

dobbsjs · August 31, 2021, 8:34pm

Hi, I have done the things above that you recommended. I removed netlify-plugin-cache-nextjs@1.6.1.

Netlify.toml

[build]
 command   = "npm run export"
 publish   = "out"

[[plugins]]
 package = "@netlify/plugin-nextjs"

[functions]
 node_bundler = "esbuild"

[context.production.environment]
NEXT_SERVERLESS = "true"
NODE_ENV = "production"

next.config.js

const withPlugins = require("next-compose-plugins");

const withImages = require('next-images')

const { configureSitemap } = require('@sergeymyssak/nextjs-sitemap');

require('dotenv').config();

const nextConfig = {

    env: {

      API_URL: process.env.API_URL

    },

    images: {

      disableStaticImages: true

    },

    webpack: (cfg) => {

        cfg.module.rules.push(

            {

                test: /\.md$/,

                loader: 'frontmatter-markdown-loader',

                options: { mode: ['react-component'] }

            }

        )

        return cfg;

    },

    target: 'experimental-serverless-trace', 

    eslint: {

      // Warning: Dangerously allow production builds to successfully complete even if

      // your project has ESLint errors.

      ignoreDuringBuilds: true,

    },

}

const Sitemap = configureSitemap({

    baseUrl: 'https://mmodoctor.com',

    include: ['/blog/*', '/blog/welcome-to-rpgstock'],

    exclude: ['/api/*', '/api\*', '/blog\*', '/blog/articles/*', '/public/admin/*', 

    '/public/admin', '/admin/*', '/checkout-summary', '/order/*', '/order', '/order\confirmation/[id]'],

    excludeIndex: true,

    pagesConfig: {

      '/pages/*': {

        priority: '0.5',

        changefreq: 'daily',

      },

    },

    isTrailingSlashRequired: true,

    targetDirectory: __dirname + '/public',

    pagesDirectory: __dirname + '/pages',

  });

Sitemap.generateSitemap();

module.exports = 

    withPlugins([

      [withImages]], 

    nextConfig

);

hrishikesh · September 7, 2021, 11:43am

Hi @dobbsjs,

Sorry this is taking so long, it’s because we’re as stumped as you, plus we don’t have a test case to test it out.

Regardless, there’s yet another thing you can try:

Change your netlify.toml to this:

[functions]
 node_bundler = "esbuild"
 external_node_modules = ["frontmatter-markdown-loader"]

dobbsjs · September 7, 2021, 6:34pm

I added that external_node_modules and it looks like nothing changed. But then I deleted netlify.toml and it looks like it was able to successfully build.

This was my Netlify.toml that was breaking the build process it seems. After I removed it, It looks like its working. I am using Build command: npm run build , and publish directory: “out_publish” through the Build settings.

Thank you for all the help.

[build]
  command   = "npm run export"
  publish   = "out"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[functions]
  node_bundler = "esbuild"

[context.production.environment]
NEXT_SERVERLESS = "true"
NODE_ENV = "production"

hillary · September 7, 2021, 6:38pm

Hey there, @dobbsjs

Thanks for following up here. Glad to here you are able to successfully build now This thread will definitely be beneficial to future Forums members who encounter something similar.

Topic		Replies	Views
Deploy error: Module not found: Error: Can't resolve 'webpack' in '/opt/build/repo/node_modules/@next/react-refresh-utils' Support building , deployment , netlify-newbie , nextjs	6	6870	August 17, 2021
"build.command" failed with Nextjs Support building , deployment , netlify-newbie , nextjs	1	536	May 8, 2023
"build.command" failed next.js on netlify Support deployment , netlify-newbie , nextjs	4	1870	May 19, 2023
Netlify build error after implementing sub repo Support building , deployment , git , nextjs	1	436	November 14, 2022
I cannot deploy next js site to netlify due to npm err Support deployment , netlify-newbie , nextjs	4	3373	November 26, 2021

Netlify Build Deployment Error because of Webpack

Related topics