Cannot compile 3rd party ES6

sage
1

I’m trying to use Highway on a project. It’s written in ES6 and I can’t manage to compile it properly with Sage 9 default setup.

 ERROR  Failed to compile with 1 errors                                                           00:34:17

 error  in ./node_modules/@dogstudio/highway/dist/highway.js

Module build failed:
247 :    *
248 :    * @return {object} Promise
249 :    */
250 :   show() {
251 :     return new Promise(async resolve => {
                                   ^
Unexpected token (251:29)

Any ideas?

2

Can you share your main.js or common.js or wherever you are importing it?

3

common.js

import Highway from '@dogstudio/highway';
import Home from "./home.js";

export default {
  init() {
		const H = new Highway.Core({
			renderers: {
				home: Home,
			},
			transitions: {
				//
			},
		});
  },
};

and home.js

import Highway from '@dogstudio/highway';

class Home extends Highway.Renderer {
    onEnter() {
    	// do stuff
    }
}

export default Home;
4

Hey @Wassim,

This:

 import Home './home.js';

Should be:

import Home from "./home.js";

Let me know if that fixes it.

1 Like
5

Sorry @mmirus , that was just a wrong copy/paste when I inserted the code here :sweat_smile:. I’m already doing that.

6

This issue from the repo seems like it might be relevant? https://github.com/Dogstudio/highway/issues/4 From skimming the issues, it looks like using Highway requires some build-process tweaking related to transpiling.

7

@Wassim hm… I wonder if it’s something environmental or something else in your build. After adding your code to those two JS files, I’m able to run yarn build without errors (except for a warning that H is defined but not used, which I fixed by adding console.log(H)).

8

@mmirus That’s because you are not compiling Highway’s es6 by ignoring the node_modules/@Dogstudio folder by default. You should get console errors when you are on a page that make use of Highway renderers.

UPDATE: The project maintainer added an ES5 version which is working just fine. Thanks @everybody!

1 Like
9

Just in general for anybody who might be running into the same issue because it’s still a thing. (I did with vanilla-lazyload):
Always look for an ES5 version as the ES6 code causes the problem. In my case I just imported the ES5 code from the dist folder like so:
common.js

 import LazyLoad from 'vanilla-lazyload/dist/lazyload';

Those are the three options (Thank you verlok)

  • try babel/minify
  • make your webpack configuration to point at the dist/lazyload.js
  • use the already minified file dist/lazyload.min.js
10

I know this is a year old, however I am facing the same issue (sort of). i have a packaged template built with ES6 and nunjucks, scss etc. I integrated the scss with no problems, however the JS is giving problems. The packaged template has a package.json file which I update the dependencies in Sage9 with yarn. The packed template has a js folder with 2 files custom.js and custom-init.js and then a subfolder named /parts with a bunch (32) of JS files that invoke all the dev dependencies in the node_modles. I have kinda hacked the JS by creating a new folder called JS “scripts/js” and put all the files in there. Of course eslint had a fit so I created an .eslintignore and added that directory.

So now Ive added all the imports to in main.js

// import external dependencies
import 'jquery';

// Import everything from autoload
import './autoload/**/*'

import 'ionicons/dist/index';
import 'flickity/dist/flickity.pkgd';
import 'photoswipe/dist/photoswipe';
import 'object-fit-images/dist/ofi.min';
import 'imagesloaded/imagesloaded.pkgd.min';

import { gsap } from 'gsap/dist/gsap.min';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin.min';

gsap.registerPlugin(ScrollToPlugin);

import 'popper.js/dist/umd/popper.min';
import '@fortawesome/fontawesome-free/js/all.min';
import 'sticky-kit/dist/sticky-kit.min';
import 'jarallax/dist/jarallax.min';
import 'jarallax/dist/jarallax-video.min';
import 'flickity/dist/flickity.pkgd.min';
import 'isotope-layout/dist/isotope.pkgd.min';
import 'photoswipe/dist/photoswipe.min';
import 'jquery-validation/dist/jquery.validate.min';
import 'jquery-form/dist/jquery.form.min';
import 'jquery-datetimepicker/build/jquery.datetimepicker.full.min';
import 'jquery-countdown/dist/jquery.countdown.min';
import 'moment/dist/moment';
import 'moment-timezone/builds/moment-timezone-with-data.min';
import 'hammerjs/hammer.min';
import 'typed.js/lib/typed.min';
import 'social-likes/dist/social-likes.min';
import 'nanoscroller/bin/javascripts/jquery.nanoscroller';
import 'soundmanager2/script/soundmanager2-jsmin';
import 'soundmanager2/script/soundmanager2-nodebug-jsmin';
import 'summernote/dist/summernote-bs4.min';
import 'keymaster/keymaster';
import './js/custom';
import './js/custom-init';

// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';

/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
});
// Load Events
jQuery(document).ready(() => routes.loadEvents());

This kinda works however I noticed this line:

// Import everything from autoload
`import './autoload/**/*'`

Here are the devDependencies for the template.

“devDependencies”: {
“@babel/core”: “^7.12.0”,
“@babel/preset-env”: “^7.12.0”,
“@babel/register”: “^7.12.0”,
“babel-loader”: “^8.1.0”,
“browser-sync”: “^2.26.12”,
“del”: “^6.0.0”,
“eslint”: “^7.11.0”,
“eslint-config-airbnb”: “^18.2.0”,
“eslint-plugin-import”: “^2.22.1”,
“eslint-plugin-jsx-a11y”: “^6.3.1”,
“gulp”: “^4.0.2”,
“gulp-autoprefixer”: “^7.0.1”,
“gulp-cdnizer”: “^2.2.0”,
“gulp-changed”: “^4.0.2”,
“gulp-clean-css”: “^4.3.0”,
“gulp-connect-php”: “^1.0.3”,
“gulp-data”: “^1.3.1”,
“gulp-header”: “^2.0.9”,
“gulp-htmltidy”: “^0.2.4”,
“gulp-if”: “^3.0.0”,
“gulp-javascript-obfuscator”: “^1.1.6”,
“gulp-load-plugins”: “^2.0.5”,
“gulp-modify-file”: “^1.0.1”,
“gulp-nunjucks-render”: “^2.2.3”,
“gulp-plumber”: “^1.2.1”,
“gulp-rename”: “^2.0.0”,
“gulp-sass”: “^4.1.0”,
“gulp-sourcemaps”: “^2.6.5”,
“gulp-ssh”: “^0.7.0”,
“gulp-uglify”: “^3.0.2”,
“gulp-vinyl-zip”: “^2.2.1”,
“gulp-watch”: “^5.0.1”,
“husky”: “^4.3.0”,
“merge-stream”: “^2.0.0”,
“npm-run-all”: “^4.1.5”,
“string-template”: “^1.0.0”,
“stylelint”: “^13.7.2”,
“stylelint-config-recommended-scss”: “^4.2.0”,
“stylelint-config-standard”: “^20.0.0”,
“stylelint-order”: “^4.1.0”,
“stylelint-scss”: “^3.18.0”,
“vinyl-named”: “^1.1.0”,
“webpack-stream”: “^6.1.0”
}

At this point in trying to integrate this into Sag9. Any input would be appreciated. Im working in Visual Studio Code.

Thanks.