Issues using jQuery and Vue in new Sage site

[labedzde]

I just set up a site using Trellis/Bedrock/Sage, and I’m having issues using jQuery, a 3rd party jQuery plugins, and Vue.

This is my second site using Sage, my first one getting Trellis/Bedrock/Sage started from the ground up. I have everything up and running on my local machine, however, I’m getting some console errors that lead me to think I must have done something incorrectly or something happened in the build process.

I’m using GravityForms for my site’s contact form. I’m trying to implement Circletype.js for some angled text. And I’m trying to use Vue Burger Menu for the off-canvas navigation. Circletype.js and Vue Burger Menu have been loaded through npm.

Each of these use-cases is throwing a console error, and I can’t figure out why.

I’m attaching some screenshots of the console errors.

I"m trying to follow the methods used from another Sage project where Vue and jQuery were working correctly.

Here’s my main.js file:
require(’./bootstrap’);

// Import external dependencies
import $ from 'jquery';
import 'circletype/dist/circletype.min.js';

		new Vue({
			el: '#app',
		});


//Angled Text

const circleType = new CircleType(document.getElementById('.angled-text'));

// Set the radius to 150 pixels.
circleType.radius(150);

Here’s my bootstrap.js file:
// Pull in dependencies and perform setup that happens globally

import Vue from 'vue';

window.Vue = Vue;

window.axios = require('axios');

window.axios.defaults.headers.common = {

'Accept': 'application/json',

'Content-Type': 'application/json',

'X-Requested-With': 'XMLHttpRequest',

};

import vueSmoothScroll from 'vue2-smooth-scroll';

Vue.use(vueSmoothScroll);

import Vue2TouchEvents from 'vue2-touch-events';

Vue.use(Vue2TouchEvents);

import Icon from 'laravel-mix-vue-svgicon/IconComponent.vue';

Vue.component('icon', Icon);

import SlideNavigation from './components/SlideNavigation';

Vue.component('slide-navigation', SlideNavigation);

I’m also using Laravel Mix. My package.json file looks like this:
{
“name”: “sage”,
“version”: “9.0.9”,
“author”: “Roots team@roots.io”,
“homepage”: “Sage | WordPress Starter Theme | Roots”,
“private”: true,
“repository”: {
“type”: “git”,
“url”: “git://github.com/roots/sage.git”
},
“bugs”: {
“url”: “Issues · roots/sage · GitHub”
},
“licenses”: [
{
“type”: “MIT”,
“url”: “The MIT License | Open Source Initiative”
}
],
“browserslist”: [
“last 2 versions”,
“android 4”,
“opera 12”
],
“scripts”: {
“dev”: “npm run development”,
“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”,
“watch”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”,
“hot”: “cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js”,
“prod”: “npm run production”,
“production”: “cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”
},
“engines”: {
“node”: “>= 8.0.0”
},
“devDependencies”: {
“axios”: “^0.18.0”,
“browser-sync”: “^2.26.7”,
“browser-sync-webpack-plugin”: “^2.0.1”,
“cross-env”: “^5.2.0”,
“laravel-mix”: “^4.0.15”,
“laravel-mix-vue-svgicon”: “^1.1.2”,
“lodash”: “^4.17.15”,
“sass”: “^1.20.1”,
“sass-loader”: "7.* ",
“tailwindcss”: “^1.0.1”,
“vue”: “^2.6.10”,
“vue-click-outside”: “^1.0.7”,
“vue-template-compiler”: “^2.6.10”,
“vue2-smooth-scroll”: “^1.1.0”,
“vue2-touch-events”: “^2.0.0”
},
“dependencies”: {
“jquery”: “^3.5.0”,
“circletype”: “^2.3.0”,
“vue-burger-menu”: “^2.0.5”
}
}

All the pieces seem to be there. Does anyone have a clue what I’m missing?

[alwaysblank]

When you’re having trouble with a library a good place to start is with the GitHub for that library: https://github.com/peterhry/CircleType As per the instructions there, you need to import the CircleType class from the library in order to have access to it.

Your error messages look like something is looking for jQuery but you’re importing $, which might be a problem?

I’d recommend reading up on how exactly the import statement works in JavaScript. It’s easy to have some assumptions about how it behaves (I know I did) that aren’t in line with what it actually does, and those will get you in trouble. MDN has a pretty good write-up: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[labedzde]

Thanks for the tips! I made some adjustments, and now I seem to be getting a different console error.

Does this mean a build issue with Webpack?

[alwaysblank]

Probably not? Hard to say without looking at your code. Have you looked at the lines in your files the error is calling out? My rough guess is that it looks like you’re trying to load something that isn’t a module.