Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught SyntaxError: Unexpected token import #392

Open
LarsVoith opened this issue Oct 17, 2016 · 4 comments
Open

Uncaught SyntaxError: Unexpected token import #392

LarsVoith opened this issue Oct 17, 2016 · 4 comments

Comments

@LarsVoith
Copy link

geting this error in Chrome (Uncaught SyntaxError: Unexpected token import) with this line of code

"import GitHub from 'github-api';"??

@clayreimann
Copy link
Member

This library is written in ES2015 which, while finalized, is not fully supported in any browser. How are you bringing in the library?

@LarsVoith
Copy link
Author

I'm using a Cordova/PhoneGap app on ios10 but testing in Safari 10 (Mac) which should support it??


From: Clay Reimann [notifications@github.com]
Sent: Thursday, October 20, 2016 10:54 AM
To: michael/github
Cc: Johnson, Lars; Author
Subject: Re: [michael/github] Uncaught SyntaxError: Unexpected token import (#392)

This library is written in ES2015 which, while finalized, is not fully supported in any browser. How are you bringing in the library?


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com//issues/392#issuecomment-255129860, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMpZItZ6TSJL_SKkOFaSyuVlAZnMJtc2ks5q14CrgaJpZM4KZDEV.

@clayreimann
Copy link
Member

Again, ES2015 is not fully supported, and I'm 95% confident that no-one supports the import syntax. If it works in your Cordova app it's because they're pre-processing your sources just like web-devs do with webpack/browserify

@alundiak
Copy link
Contributor

alundiak commented Sep 9, 2017

Not sure how relevant my comment is going to be here, but if issue still open, and I've recently spotted on the same error, I decided to add my 5 cents here.

First of all, I use Chrome Canary v63, where import/export is already supported. + since Chrome 60 (w/ flag), and since 61 released. Looks like not yet stable but still gives me the touch to the feature (because I don't like web community is so *** slow regarding standards but *** fast regarding enormous number of libraries, frameworks, wrappers, etc.)

My existed code uses import/export, and I was a bit surprised, when I did a few lines of code with github-tools/github-api. Before that, I've already tested GitHub API v3 by my own using Fetch API and GitHub API v4 using GraphQL stuff.

So...

Note: Bower-related variants can be ignored, due to the fact that Bower died. And github-api is available via npm and yarn.

Variant ==A==
bower install github-api => 3.1.0, then added code to my one of my modules. My index.html => <script type="module" src="./index.js"></script> and index.js has code import GitHub from 'bower_components/github-api/lib/GitHub.js' which gave me errors:

GitHub.js:9 GET http://localhost:8080/bower_components/github-api/lib/Gist net::ERR_ABORTED
GitHub.js:10 GET http://localhost:8080/bower_components/github-api/lib/User net::ERR_ABORTED
GitHub.js:11 GET http://localhost:8080/bower_components/github-api/lib/Issue net::ERR_ABORTED
GitHub.js:12 GET http://localhost:8080/bower_components/github-api/lib/Search net::ERR_ABORTED
GitHub.js:13 GET http://localhost:8080/bower_components/github-api/lib/RateLimit net::ERR_ABORTED
GitHub.js:14 GET http://localhost:8080/bower_components/github-api/lib/Repository net::ERR_ABORTED
GitHub.js:15 GET http://localhost:8080/bower_components/github-api/lib/Organization net::ERR_ABORTED
GitHub.js:16 GET http://localhost:8080/bower_components/github-api/lib/Team net::ERR_ABORTED
GitHub.js:17 GET http://localhost:8080/bower_components/github-api/lib/Markdown net::ERR_ABORTED
GitHub.js:18 GET http://localhost:8080/bower_components/github-api/lib/Project net::ERR_ABORTED

By changing code in GitHub.js from import Gist from './Gist'; to import Gist from './Gist.js'; fixed errors, but it's not the way I would like to fix the issue :)

Variant ==A.1==
Changing code import GitHub from 'bower_components/github-api/lib/GitHub.js' to import GitHub from 'bower_components/github-api/lib/GitHub' (no js ext.) gives me only one error:

GET http://localhost:8080/bower_components/github-api/lib/GitHub net::ERR_ABORTED

Variant ==B==
In my index.html I add a line

<script type="application/javascript" src="bower_components/github-api/lib/GitHub.js"></script> -->

And I receive an error:

Uncaught SyntaxError: Unexpected token import

Variant ==C==
In my index.html I add a line

<script type="module" src="bower_components/github-api/lib/GitHub.js"></script>

added type="module" and receive an error:

GET http://localhost:8080/bower_components/github-api/lib/Gist net::ERR_ABORTED

Variant ==D==
Using CDN unpkg.com

<script src="https://unpkg.com/github-api/dist/GitHub.min.js"></script>

I kinda got it, that it's such a ability to have ONLY GitHub.js, but for what reason, if it can be used?
So I have an error:

Uncaught Error: Cannot find module 'axios'

"axios" means, that some code in GitHub.js depends on Requestable.js, right? if so, then GitHub.js CAN NOT be used independently. README.md file should either add a line CDN url ro Requestable.js from Yahoo or better way to fix the code of GitHub.js which should NOT call and dependnt code in nested JS files like Repository.js or Gist.js.

Variant ==E== - my winner at the moment.

<script src="https://unpkg.com/github-api/dist/GitHub.bundle.min.js"></script>

and all works fine window has object GitHub and I can then code my logic.

Variant ==E.1==
Using

<script type="application/javascript" src="node_modules/github-api/dist/GitHub.bundle.min.js"></script>

also works fine with simple HTML/JS/ES6 import/export syntax.

Variant ==F==
Using nodeJS syntax.
I have node v8.4.0 and npm v5.3.0 => npm install github-api => 3.1.0 in node_modules and my test.js file has a line code suggested from README.md:

var GitHub = require('github-api');
var gh = new GitHub({});
var clayreimann = gh.getUser('clayreimann');
clayreimann.listStarredRepos(function(err, repos) {
   console.log(JSON.stringify(repos.length) + ' starred repos');
});

gives me success response 24 starred repos which is sign, that NodeJS module github-api works fine in NodeJS env.

But if only I change first line to this import GitHub from 'github-api'; or import GitHub from './node_modules/github-api/dist/GitHub.js';:

the running command node ./test.js or node --harmony ./test.js fails:

node ./test.js
/Users/alund/prj/behind-the-code/test.js:1
(function (exports, require, module, __filename, __dirname) { import GitHub from 'github-api';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:537:28)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Function.Module.runMain (module.js:609:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:598:3

And it's is ok so far, because of:

node --v8-options | grep "in progress"
  --harmony_array_prototype_values (enable "harmony Array.prototype.values" (in progress))
  --harmony_function_sent (enable "harmony function.sent" (in progress))
  --harmony_tailcalls (enable "harmony tail calls" (in progress))
  --harmony_sharedarraybuffer (enable "harmony sharedarraybuffer" (in progress))
  --harmony_do_expressions (enable "harmony do-expressions" (in progress))
  --harmony_class_fields (enable "harmony public fields in class literals" (in progress))
  --harmony_async_iteration (enable "harmony async iteration" (in progress))
  --harmony_dynamic_import (enable "harmony dynamic import" (in progress))
  --harmony_promise_finally (enable "harmony Promise.prototype.finally" (in progress))

Not sure, if @clayreimann is main maintainer so far, and I have no idea where this library/tool is used, and what is roadmap, etc, and despite the fact, GitHub API v4 exists, I would kindly suggest:

  • Review README.md, by providing clean text for explicit usage within import/export and require/nodejs.
  • Run tests of github-api again/within Chrome Canary, so that this library would be closer to the future, and when people spot on this lib, they will not have need to fix the behavior of lib anymore...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants