Roots Discourse

Cannot compile 3rd party ES6


#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.


#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!


#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