Search code examples
jquerycompiler-errorsbootstrap-4codekit

Bootstrap 4 compiling javascript vendors error using Codekit 3

I'm a little bit old school with how I compile stuff. I'm still using codekit rather than npm, grunt etc. I'm not good with terminal.

Anyway... I can compile the SCSS files fine from my Bootstrap 4 repo. But I'm getting error when I'm trying to compile the javascript vendors. It's a simple error but if anyone can shed some light that would be great!

See below how I have compiled all my bootstrap js vendors into my main.js javascript file. I've not included jQuery because of old habits I normally put the latest CDN jQuery inline.

// bootstrap 4 core js
// @codekit-prepend "js/src/alert"
// @codekit-prepend "js/src/button"
// @codekit-prepend "js/src/carousel"
// @codekit-prepend "js/src/collapse"
// @codekit-prepend "js/src/dropdown"
// @codekit-prepend "js/src/index"
// @codekit-prepend "js/src/modal"
// @codekit-prepend "js/src/tooltip"
// @codekit-prepend "js/src/popover"
// @codekit-prepend "js/src/scrollspy"
// @codekit-prepend "js/src/tab"
// @codekit-prepend "js/src/tooltip"
// @codekit-prepend "js/src/util"

// my shizzle
(function ($) {

  alert("WTF!");

});

So when I run this block of code using Codekit 3 to watch and compile.

enter image description here enter image description here

I can compile it fine without minifying it. But when I minify it, I think it uses UglifyJS (I think) from the message and this is the error I get...

UglifyJS minification failed with this error: Parse error at /Users/joshmoto/Sites/joshmoto.wtf/development/assets/.codekit-cache/alert.js:1,7
import $ from 'jquery'
       ^
SyntaxError: Unexpected token: name ($)
    at JS_Parse_Error.get (eval at <anonymous> (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:384:40
    at time_it (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:620:15)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/uglify-js/bin/uglifyjs:345:9
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

Is something broken, or does this new Bootstrap 4 require jquery in the compiled file?

Any help would be hugely appreciated as I don't get this problem with bootstrap 3.

I just tried to use the non minified script file and I get this error in chrome debugger...

enter image description here

So yeah its proper ballsed.

Solution

  • I finally found a solution to my main javascript file compiling problem.

    The only way I could get the file to compile was to do this...

    /**
 ** Bootstrap 4 Core JS
 **/
// @codekit-prepend "vendor/jquery-3.3.1"
// @codekit-prepend "vendor/popper.min"

// @codekit-prepend "js/dist/alert"
// @codekit-prepend "js/dist/button"
// @codekit-prepend "js/dist/carousel"
// @codekit-prepend "js/dist/collapse"
// @codekit-prepend "js/dist/dropdown"
// @codekit-prepend "js/dist/tooltip"
// @codekit-prepend "js/dist/modal"
// @codekit-prepend "js/dist/popover"
// @codekit-prepend "js/dist/scrollspy"
// @codekit-prepend "js/dist/tab"
// @codekit-prepend "js/dist/util"

// jQuery
(function ($) {

    alert("Boom!");

})(jQuery);