Build reporting "ERROR #98123 WEBPACK Generating development JavaScript bundle failed" for all Pages and Components

[ianpullinger]

Description

My Gatsby project has suddenly started failing with the "ERROR #98123 WEBPACK Generating development JavaScript bundle failed" error being generated for all pages and components as part of building the development bundle. The error has also appeared on Netlify where the site is deployed.

Error Log

... verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.040s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" success run page queries - 0.019s - 1/1 52.43/s verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "startingDevServers"

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

/src/components/hero.js: File: src/components/hero.js **ERROR #98123** WEBPACK Generating development JavaScript bundle failed /src/components/layout.js: File: src/components/layout.js **This error is repeated for all pages and components on the site** and following by "failed Re-building development bundle - 0.904s" ### Expected result I am interested to know how I can get more verbose logging from the build process (the above was generated with --verbose.) Searching the Internet for other instances of this error message will also show an additional error message below each "Generating development JavaScript bundle failed" indicating the specific reason for the error. In this case, without additional logging or error messages, I am unsure where to investigate. ### Fault Finding I have performed a number of steps to help clear the errors. * rm -R node_modules followed by npm install * gatsby clean to remove the cache before the build * npm uninstall all node modules following by npm install --save/--save-dev * remove the gatsby-node.js file, whilst lots of graphql errors, it still generates the same error None of these steps changed the errors. I am thinking it may have been an update to a module dependency that is causing the error, but I am struggling without more verbose error logs to be able to identify the root cause. I have recently added MDX support to the site, but this was working @correctly. ### Environment System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.6.0 - /usr/local/bin/node npm: 6.14.6 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Firefox: 78.0.2 Safari: 13.1.1 npmPackages: gatsby: ^2.22.4 => 2.24.9 gatsby-image: ^2.4.5 => 2.4.13 gatsby-plugin-catch-links: ^2.3.2 => 2.3.11 gatsby-plugin-emotion: ^4.3.2 => 4.3.10 gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1 gatsby-plugin-google-analytics: ^2.3.2 => 2.3.13 gatsby-plugin-google-tagmanager: ^2.3.3 => 2.3.11 gatsby-plugin-manifest: ^2.4.8 => 2.4.21 gatsby-plugin-mdx: ^1.2.25 => 1.2.25 gatsby-plugin-offline: ^3.2.7 => 3.2.21 gatsby-plugin-react-helmet: ^3.3.2 => 3.3.10 gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 gatsby-plugin-sharp: ^2.6.8 => 2.6.23 gatsby-plugin-sitemap: ^2.4.3 => 2.4.11 gatsby-remark-copy-linked-files: ^2.3.11 => 2.3.12 gatsby-remark-external-links: 0.0.4 => 0.0.4 gatsby-remark-images: ^3.3.7 => 3.3.22 gatsby-remark-prismjs: ^3.5.2 => 3.5.10 gatsby-remark-reading-time: ^1.1.0 => 1.1.0 gatsby-remark-smartypants: ^2.3.2 => 2.3.10 gatsby-source-filesystem: ^2.3.7 => 2.3.23 gatsby-transformer-sharp: ^2.5.11 => 2.5.11 npmGlobalPackages: gatsby-cli: 2.12.67

[ianpullinger]

Hi,

I have performed some more problem solving, and I 'think' I have isolated the issue. After removing most of the elements of the site bit-by-bit, I was left with a very simple page. However, if I remove the following line from the index.js file, the development bundle compiles correctly. If I then add it back in, the error message is then displayed.

import { tw, styled } from "twin.macro"

I have managed to get the following error message to be displayed in the browser. I do not have babel or babel-loader explicitly loaded in package.json, so assume it is installed as a dependency. My babel-loader is v8.1.0.

./src/pages/index.js Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js): MacroError: /Users/ianpullinger/Desktop/test/src/pages/index.js: at assert (/Users/ianpullinger/Desktop/test/node_modules/twin.macro/macro.js:21:9) at validateImports (/Users/ianpullinger/Desktop/test/node_modules/twin.macro/macro.js:2135:3) at twinMacro (/Users/ianpullinger/Desktop/test/node_modules/twin.macro/macro.js:3479:3) at macroWrapper (/Users/ianpullinger/Desktop/test/node_modules/babel-plugin-macros/dist/index.js:63:12) at applyMacros (/Users/ianpullinger/Desktop/test/node_modules/babel-plugin-macros/dist/index.js:230:14) at ImportDeclaration (/Users/ianpullinger/Desktop/test/node_modules/babel-plugin-macros/dist/index.js:114:28) at NodePath._call (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:55:20) at NodePath.call (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:42:17) at NodePath.visit (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:90:31) at TraversalContext.visitQueue (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/context.js:112:16) at TraversalContext.visitMultiple (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/context.js:79:17) at TraversalContext.visit (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/context.js:138:19) at Function.traverse.node (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/index.js:82:17) at traverse (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/index.js:64:12) at NodePath.traverse (/Users/ianpullinger/Desktop/test/node_modules/@babel/traverse/lib/path/index.js:148:24) at PluginPass.Program (/Users/ianpullinger/Desktop/test/node_modules/babel-plugin-macros/dist/index.js:95:18)

[ianpullinger]

I have managed to solve this issue. I have replaced the following line in all js files:

import { tw, styled } from "twin.macro"

with an updated import statement.

import tw, { styled } from 'twin.macro'

Now the site compiles correctly. It is strange that the errors started to be generated without any site changes, so I am assuming that there must have been a recent change in the plugin that caused it to suddenly fail. I will close the ticket.