I just wanted to outline my experience with builder and the numerous bugs I encountered along the way. I think it’s such a shame since it otherwise seems like such an amazing product but is severely lacking in simple ways such as documentation or even basic setup.
To start I went through the Quickstart section for Svelte since that’s what I’m building my site in. So many problems to start off. The example page to add a builder component to your app is missing lots of things like variables to import. After much wrangling and guessing at API documentation since it wasn’t there I finally got it working and hooked up to the visual editor. The experience there is fantastic but I noticed that SSR wasn’t working properly with many styles missing on the initial render. You can see here:
https://tokyo-walking-tour.vercel.app/
I wanted to check to see if this was an exclusive issue to the Sveltekit package so I decided to go through the most basic Nextjs tutorial that’s on the front page.
So I run
npm init builder.io@latest
I then answer the default questions to all prompts and set up a basic repository. I cd in and run
npm run dev
And I get
Error: Cannot find module '@builder.io/dev-tools/next'
Okay fine I think, a few packages are missing so I run
npm install @builder.io/dev-tools
npm install @builder.io/react
Another error.
npm ERR! code 1
npm ERR! path /Users/rsingh/Projects/builder-app/node_modules/isolated-vm
npm ERR! command failed
npm ERR! command sh -c prebuild-install || (node-gyp rebuild --release -j 4 && node-gyp clean)
npm ERR! prebuild-install warn install No prebuilt binaries found (target=18.16.1 runtime=node arch=arm64 libc= platform=darwin)
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@9.3.1
npm ERR! gyp info using node@18.16.1 | darwin | arm64
npm ERR! gyp info find Python using Python version 3.11.3 found at "/opt/homebrew/opt/python@3.11/bin/python3.11"
npm ERR! gyp info spawn /opt/homebrew/opt/python@3.11/bin/python3.11
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/rsingh/.nvm/versions/node/v18.16.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/rsingh/Projects/builder-app/node_modules/isolated-vm/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/rsingh/.nvm/versions/node/v18.16.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/rsingh/Library/Caches/node-gyp/18.16.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/rsingh/Library/Caches/node-gyp/18.16.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/rsingh/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/rsingh/Library/Caches/node-gyp/18.16.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/rsingh/Projects/builder-app/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! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build', '--jobs', 4 ]
npm ERR! You have not agreed to the Xcode license agreements. Please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode and Apple SDKs license.
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 69
npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/rsingh/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 22.6.0
npm ERR! gyp ERR! command "/Users/rsingh/.nvm/versions/node/v18.16.1/bin/node" "/Users/rsingh/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release" "-j" "4"
npm ERR! gyp ERR! cwd /Users/rsingh/Projects/builder-app/node_modules/isolated-vm
npm ERR! gyp ERR! node -v v18.16.1
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/rsingh/.npm/_logs/2023-09-19T09_15_26_705Z-debug-0.log
Okay odd, I guess I have to agree to Xcode license agreements buried there in the error log. So I do that and finally it runs fine after:
npm run dev
The server starts and I see the Nextjs basic page. I see a generic page route has already been provided so I go to an /about page that I’ve already created in the visual editor and I get this:
Import trace for requested module:
./node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib/index.js
./node_modules/.pnpm/@builder.io+react@3.0.14_react-dom@18.2.0_react@18.2.0/node_modules/@builder.io/react/dist/builder-react.cjs.js
./src/components/builder.tsx
- wait compiling...
- warn ./node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/rsingh/Projects/builder-app/node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib'
Import trace for requested module:
./node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib/index.js
./node_modules/.pnpm/@builder.io+react@3.0.14_react-dom@18.2.0_react@18.2.0/node_modules/@builder.io/react/dist/builder-react.cjs.js
./src/components/builder.tsx
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "1470004771"
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "1470004771"
- warn Fast Refresh had to perform a full reload due to a runtime error.
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "1470004771"
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
- error SyntaxError: Unexpected token R in JSON at position 0
at JSON.parse (<anonymous>)
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
digest: "1470004771"
- warn ./node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/rsingh/Projects/builder-app/node_modules/.pnpm/node-fetch@2.7.0/node_modules/node-fetch/lib'
At this point I give up. I really wish I could use builder since the visual editing experience is so nice but I can’t believe that the team is not even QA’ing the basic setup for Nextjs, the most popular web framework. Keep in mind this is was all just to test SSR in Nextjs and see if it is working better than in Svelte.
Oh and I almost forgot. When I tried to find support I went to:
Under the “Are you looking for support?” headline I found a link to this forum which was linked as https://www.forum.builder.io/ which is not a valid link. I guessed that someone mistakenly put a www before so I managed to find it by removing it 