SyntaxError: Unexpected token: name (Renderer) about highway HOT 12 CLOSED

Hi @jesperwestlund1,

Can you share your complete code so I can have a look and spot the issue ?
I might need to see the code where you use Highway and the Gulp task throwing the error as well.

Thanks,
Anthodpnt

from highway.

Hi @Anthodpnt , yes of cource.

main.js

import Highway from '@dogstudio/highway'

console.log('hello');

javascript gulp.

'use strict';

var gulp = require('gulp');
var watchify = require('watchify');
var browserify = require('browserify');
var babelify = require('babelify');
var changed = require('gulp-changed');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gutil = require('gulp-util');
var assign = require('lodash.assign');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

var customOpts = {
    entries: ['assets/js/main.js'],
    debug: true
};

var opts = assign({}, watchify.args, customOpts);
var bundler = watchify(browserify(opts).transform(babelify, {presets: ["es2015"]}));
var destination = './build';

gulp.task('js', bundle);
bundler.on('update', bundle);
bundler.on('log', gutil.log);

function bundle() {
  return bundler.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('app'))
    .pipe(changed(destination))
    .pipe(rename({ extname: '.js' }))
    .pipe(gulp.dest(destination))
    .pipe(buffer())
    .pipe(uglify().on('error', gutil.log))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(destination))
}

from highway.

Hello @jesperwestlund1,
In order to test faster & have the most similar environment / configuration, could you zip your test & drop it here ? This way we can try to reproduce & solve your issue in the best conditions :-)

( delete the node_modules, just keep the package.json )

from highway.

Hi @ThaoD5 , Yes here you have!

kendo-theme.zip

from highway.

@jesperwestlund1,

I think the issue comes from the configuration of babelify in your package.json.

For now only the files coming from assets/js are compiled by babelify using presets-2015. This means that Highway is never compiled since it comes from the node_modules folder and it needs to pass through babelify as explained in the documentation if you want to support all browsers.

I guess you can easily fix this issue by changing the only parameter of babelify with a regex including highway like /(assets\/js|node_modules\/@dogstudio\/highway\/dist)/ or something.

Or you can just add Highway in your assets/js/lib folder like you do for GSAP.

Let me know if the issue came from this configuration :).

Best regards,
Anthony

from highway.

@Anthodpnt Hmm... okey, I tried to import it manually like you say, I put highway.js in assets/js/lib then I import it like this in main.js

import highway from './lib/highway'

and this is how it's look in my package.json

  "browser": {
    "config": "./assets/js/config.js",
    "highway": "./assets/js/lib/highway.js",
    "gsap-splitext": "./assets/js/lib/gsap/src/uncompressed/utils/SplitText.js",
    "gsap-scrollto": "./assets/js/lib/gsap/src/uncompressed/plugins/ScrollToPlugin.js"
  },

But it's not working.. the gulp file will not be completed.. when I run gulp

from highway.

@jesperwestlund1 Do you use babelify on Highway ?

from highway.

@Anthodpnt babelify

from highway.

@jesperwestlund1,

The problem is that Babelify skips all node_modules folders but since Highway is part of the node_modules folders it's never transpiled into ES5 by Babelify.

Based on this explanation you have to change a bit your javascript.js file with this:

// YOUR CODE

var bundler = browserify(opts).transform(babelify, {
    global: true,
    ignore: /\/node_modules\/(?!@dogstudio\/highway\/)/,
    presets: ["env"]
});

// YOUR CODE

This will ignore all node_modules folders except for node_modules/@dogstudio/highway. So now Highway should be properly transpiled into ES5. This will solve the initial issue about Renderer apparently.

When testing I came across other errors I managed to fix by installing babel-preset-env instead of babel-preset-es2015. Check the Babel documentation about this preset.

Finally, there is one last thing to do that I couldn't manage to fix with your stack. You need to import babel-polyfill in you main.js file. But for a reason I ignore this always throw an Unexpected end of input error in the browser console... Check the Babel documentation about this polyfill.

Unfortunately I'm not used to work with Browserify and Babelify so you'll have to find a way to import babel-polyfill properly at the top of the main.js and fix the Unexpected end of input error by yourself.

I hope that it will help you and don't hesitate to keep me in touch.

Best regards,
Anthodpnt

from highway.

@jesperwestlund1

An easier solution to properly transpile Highway to ES5 using Babelify is to:

1. Put Highway in your assets/lib folder
2. Add "highway": "./assets/js/lib/highway/highway.js", in the package.json like earlier
3. Install babel-preset-env (check the documentation)
4. Update your javascript.js file with this:

// YOUR CODE

var bundler = browserify(opts).transform(babelify, { presets: ["env"] });

// YOUR CODE

This should also fix the initial Renderer issue from this thread.
But again you'll still have to add babel-polyfill and fix the error explained in previous comment.

Best regards,
Anthodpnt

from highway.

@Anthodpnt Yes! thanks! that did the work! 👍

from highway.

@jesperwestlund1 Perfect, I close the issue then!

from highway.