Webpack fails with Next.js 14.1.0

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder public api key
a2741df076364e6295b8b3210e1bd0cb

What are you trying to accomplish
User builder, but can’t even get it to work.

Screenshots or video link

Code stack you are integrating Builder with
NextJS 14.1.0

Reproducible code example
I’m just trying to add the line builder.init("a2741df076364e6295b8b3210e1bd0cb"). As soon as I use anything from the "@builder.io/react": "^3.2.0" package (installed latest), it breaks.

My next.config.js looks like this…

const withBuilderDevTools = require("@builder.io/dev-tools/next")();
const path = require("path");

module.exports = withBuilderDevTools({
  sassOptions: {
    includePaths: [path.join(__dirname, "src/styles")],
  },
});

It returns a fairly large error, but this is the first part that shows up in the browser…

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js (11:0)
(rsc)/./node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js
file:///Users/jbsmith/Projects/rainbowportalshop/.next/server/vendor-chunks/@emotion.js (40:1)
__webpack_require__
file:///Users/jbsmith/Projects/rainbowportalshop/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/@emotion/core/dist/core.esm.js (17:90)
(rsc)/./node_modules/@emotion/core/dist/core.esm.js

The console running the server shows this…

 ⨯ node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js (11:0) @ eval
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
    at __webpack_require__ (/Users/jbsmith/Projects/rainbowportalshop/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/jbsmith/Projects/rainbowportalshop/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/jbsmith/Projects/rainbowportalshop/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:10:75)
    at (rsc)/./src/app/page.tsx (/Users/jbsmith/Projects/rainbowportalshop/.next/server/app/page.js:279:1)
    at Function.__webpack_require__ (/Users/jbsmith/Projects/rainbowportalshop/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
null
2

That looks to be a bug related to Emotion, rather than Builder. I believe Emotion recently updated their versions, so it could be an out of date dependency?

3

It looks like it goes beyond just an @emotion issue. Based on the above reply, I decided to remove my package-lock.json file and node_modules folder and tried a new npm install because I know I don’t have anything in my repo that uses @emotion like an MUI component or anything like that. This is practically a brand new NextJS repo without any additional libraries added. The only things I’ve changed are some very simple components. I got an error on the install so I pulled out the builder.io packages from the package.json…

"@builder.io/dev-tools": "^0.2.10",
"@builder.io/react": "^3.2.0",
"@builder.io/sdk": "^2.2.1",

Then tried to just install…

npm i @builder.io/react@latest

…and got this error using node v21.6.1 and npm 10.2.4

npm ERR! code 1
npm ERR! path /Users/myusername/Projects/myproject/node_modules/isolated-vm
npm ERR! command failed
npm ERR! command sh -c prebuild-install || (node-gyp rebuild --release -j max && node-gyp clean)
npm ERR! prebuild-install warn install No prebuilt binaries found (target=21.6.1 runtime=node arch=x64 libc= platform=darwin)
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@10.0.1
npm ERR! gyp info using node@21.6.1 | darwin | x64
npm ERR! gyp info find Python using Python version 3.9.10 found at "/usr/local/opt/python@3.9/bin/python3.9"
npm ERR! gyp info spawn /usr/local/opt/python@3.9/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/myusername/Projects/myproject/node_modules/isolated-vm/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/myusername/Library/Caches/node-gyp/21.6.1/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/myusername/Library/Caches/node-gyp/21.6.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/myusername/Library/Caches/node-gyp/21.6.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/myusername/Projects/myproject/node_modules/isolated-vm',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
npm ERR! 
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
npm ERR! 
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
npm ERR! 
npm ERR! Traceback (most recent call last):
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 1496, in XcodeVersion
npm ERR!     version_list = GetStdoutQuiet(["xcodebuild", "-version"]).splitlines()
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 1557, in GetStdoutQuiet
npm ERR!     raise GypError("Error %d running %s" % (job.returncode, cmdlist[0]))
npm ERR! gyp.common.GypError: Error 1 running xcodebuild
npm ERR! 
npm ERR! During handling of the above exception, another exception occurred:
npm ERR! 
npm ERR! Traceback (most recent call last):
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 45, in <module>
npm ERR!     sys.exit(gyp.script_main())
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 688, in script_main
npm ERR!     return main(sys.argv[1:])
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 680, in main
npm ERR!     return gyp_main(args)
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 665, in gyp_main
npm ERR!     generator.GenerateOutput(flat_list, targets, data, params)
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 2648, in GenerateOutput
npm ERR!     writer.Write(
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 912, in Write
npm ERR!     self.WriteSources(
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 1395, in WriteSources
npm ERR!     cflags = self.xcode_settings.GetCflags(
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 662, in GetCflags
npm ERR!     archs = self.GetActiveArchs(self.configname)
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 512, in GetActiveArchs
npm ERR!     xcode_archs_default = GetXcodeArchsDefault()
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 119, in GetXcodeArchsDefault
npm ERR!     xcode_version, _ = XcodeVersion()
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 1507, in XcodeVersion
npm ERR!     version = CLTVersion()  # macOS Catalina returns 11.0.0.0.1.1567737322
npm ERR!   File "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 1545, in CLTVersion
npm ERR!     return re.search(regex, output).groupdict()["version"]
npm ERR! AttributeError: 'NoneType' object has no attribute 'groupdict'
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.<anonymous> (/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:519:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm ERR! gyp ERR! System Darwin 23.2.0
npm ERR! gyp ERR! command "/Users/myusername/.nvm/versions/node/v21.6.1/bin/node" "/Users/myusername/.nvm/versions/node/v21.6.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release" "-j" "max"
npm ERR! gyp ERR! cwd /Users/myusername/Projects/myproject/node_modules/isolated-vm
npm ERR! gyp ERR! node -v v21.6.1
npm ERR! gyp ERR! node-gyp -v v10.0.1
npm ERR! gyp ERR! not ok

So at this point I can’t even use builder.io components or utils. Sadly, I will probably have to go with a headless CMS. I was hoping to knock something out really quick with builder.

4

Apparently, there’s a known issue with isolated-vm right now.

5

Hi @behivetech, Welcome to the Builder.io Forum!

We have deployed a possible fix for this issue, please verify and let us know if you still have any concerns.