Rails 6 WebPacker & Yarn Error
It was late on a Sturday and I was creating a new Rails 6 app with WebPacker & Yarn. I was trying to test out some JS tricks without dirtying up my main app. When I ran the new command in the console, the app built but I noticed a graceful error when it came time to run the webpacker bundle process.
[gyp info spawn args ]
No receipt for ‘com.apple.pkg.CLTools_Executables’ found at ‘/’.
No receipt for ‘com.apple.pkg.DeveloperToolsCLILeo’ found at ‘/’.
No receipt for ‘com.apple.pkg.DeveloperToolsCLI’ found at ‘/’.gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
Since the Rails install process continued I actually missed the GYP error. I wasn’t watching the screen. ¯\_ (ツ)_/¯
When I fired up the Rails server and loaded the root page, WebPacker didnt throw an error so I thought everything was all good.
[Webpacker] Compiled all packs in /Users/el_hefe/Documents/Work/nomcre/sandbox/composition/public/packs
[Webpacker] Hash: f7f9dc8a5e50eee5c8f6
Version: webpack 4.41.6
Time: 914ms
Built at: 02/15/2020 9:08:23 PM
Asset Size Chunks Chunk Names
js/application-26231ad2a758bf4d9f43.js 463 KiB application [emitted] [immutable] application
js/application-26231ad2a758bf4d9f43.js.map 521 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
Entrypoint application = js/application-26231ad2a758bf4d9f43.js js/application-26231ad2a758bf4d9f43.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 799 bytes {application} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
+ 9 hidden modulesCompleted 200 OK in 2402ms (Views: 2400.3ms | ActiveRecord: 1.0ms | Allocations: 8493)
It wasn’t until I tried to add jQuery with yarn that I saw the issue.
yarn add jquery
yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > webpack-dev-server@3.10.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨 Building fresh packages...
warning Error running install script for optional dependency: Command failed.
Exit code: 1
Command: node-gyp rebuild
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@5.0.5
gyp info using node@13.5.0 | darwin | x64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"...No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit ...gyp ERR! node -v v13.5.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.4.1
info All dependencies
└─ jquery@3.4.1
✨ Done in 3.71s.
I figured it was an XCode error because the problem looks like plist entries.
Turns out its been a while since I update XCode and yarn moved on without me. So, I updated XCode and restarted the machine. I navigated back to my test project diretory, and ran it again:
yarn add jquery I got the same damn error again! WTF?
After some googleing I found that even though I explicitly gave XCode the instruction to update everything, including dev tools. It didn’t go down like that.
So, the only solution left was to delete the old XCode dev tools, and re-install them.
sudo rm -rf $(xcode-select -print-path)
xcode-select --installThe download and install took a bit longer than 20 minutes, but once it was complete the problem was fixed. Yarn added jQuery like a champ!
