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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting "Unexpected token <" error since using SystemJS #659

Closed
RomainLanz opened this Issue Jun 21, 2017 · 11 comments

Comments

Projects
None yet
4 participants
@RomainLanz
Contributor

RomainLanz commented Jun 21, 2017

Hey 馃憢


Operating System : macOS Sierra
Node.js version : v8.1.2
npm version: 5.0.3


I have switched my loader from RequireJS to SystemJS this morning.
To make the change I have install a new aurelia application and I have compare package.json, tasks/*, aurelia.json and index.html files and made the change needed.

The application bundle correctly, but when I try to launch it in the browser I have the error Unexpected token < at random place.

Note that everything was working fine before making the change.

screen shot 2017-06-21 at 11 48 03

If we take a look to the vendor-bundle.js file at the line 11707 we arrive on the loadModule function.

DefaultLoader.prototype.loadModule = function (id) {
  var _this3 = this;

  return System.normalize(id).then(function (newId) {
    var existing = _this3.moduleRegistry[newId];
    if (existing !== undefined) {
      return Promise.resolve(existing);
    }

    return System.import(newId).then(function (m) {                  // 11707
      _this3.moduleRegistry[newId] = m;
      return ensureOriginOnExports(m, newId);
    });
  });
};

The package @fivb/sdk is a TypeScript package compiled and transpiled to ES5 in different module formats (amd, commonjs, es2015, umd).

In my aurelia.json, I load it as an amd package.

{
  "name": "@fivb/sdk",
  "path": "../node_modules/@fivb/sdk/dist/amd",
  "main": "index"
},

Since SystemJS should handle commonjs as well, I have tried to use this version.

{
  "name": "@fivb/sdk",
  "path": "../node_modules/@fivb/sdk/dist/commonjs",
  "main": "index"
},

Now the error Unexpected token < is gone for @fivb/sdk but happen for axios.

{
  "name": "axios",
  "path": "../node_modules/axios/dist",
  "main": "axios"
},

screen shot 2017-06-21 at 12 16 07

The line 3388 is the definition of SystemJS.

/*
 * SystemJS v0.20.14 Dev
 */
!function(){"use strict" ... }

Note that axios is used by @fivb/sdk.

Here's my current aurelia.json : https://gist.github.com/RomainLanz/cf6738932e73379dc62c994006e1fb18

I can give access to this application repository and to @fivb/sdk if needed.

@JeroenVinke JeroenVinke added the bug label Jun 21, 2017

@JeroenVinke

This comment has been minimized.

Show comment
Hide comment
@JeroenVinke

JeroenVinke Jun 21, 2017

Member

@simonfox could you take a look?

Member

JeroenVinke commented Jun 21, 2017

@simonfox could you take a look?

@simonfox

This comment has been minimized.

Show comment
Hide comment
@simonfox

simonfox Jun 21, 2017

Contributor

Yes no worries @JeroenVinke

@RomainLanz I've created a new project with everything but @fivb/sdk and it works fine so yes if you could provide access to that package that would be good...I will PM you my email on gitter if you would prefer to keep it private.

Also what do your imports look like for that library?

Contributor

simonfox commented Jun 21, 2017

Yes no worries @JeroenVinke

@RomainLanz I've created a new project with everything but @fivb/sdk and it works fine so yes if you could provide access to that package that would be good...I will PM you my email on gitter if you would prefer to keep it private.

Also what do your imports look like for that library?

@simonfox

This comment has been minimized.

Show comment
Hide comment
@simonfox

simonfox Jun 21, 2017

Contributor

Actually looks like it could be because you have @ in the package name (assuming you have an import with a module specifier of @fivb/sdk - I can reproduce if I rename axios for example to @axios in package.json and then import axios from '@axios';).

If that is the case, I'm not sure this is actually a bug. I can't find the module specifier specification, and I know virtually nothing about the details of ES6 spec, but I'm guessing that maybe RequireJS is a little more relaxed about the define id and SystemJS is following the spec.

Can you try replacing the bundle package in aurelia.json with

{
  "name": "fivb/sdk",
  "path": "../node_modules/@fivb/sdk/dist/commonjs",
  "main": "index"
},

and then remove the @ from your imports

Contributor

simonfox commented Jun 21, 2017

Actually looks like it could be because you have @ in the package name (assuming you have an import with a module specifier of @fivb/sdk - I can reproduce if I rename axios for example to @axios in package.json and then import axios from '@axios';).

If that is the case, I'm not sure this is actually a bug. I can't find the module specifier specification, and I know virtually nothing about the details of ES6 spec, but I'm guessing that maybe RequireJS is a little more relaxed about the define id and SystemJS is following the spec.

Can you try replacing the bundle package in aurelia.json with

{
  "name": "fivb/sdk",
  "path": "../node_modules/@fivb/sdk/dist/commonjs",
  "main": "index"
},

and then remove the @ from your imports

@simonfox

This comment has been minimized.

Show comment
Hide comment
@simonfox

simonfox Jun 23, 2017

Contributor

OK I've got to the bottom of this. amodro wraps anonymous amd modules on write - see here.

The two packages causing problems here have source map links in the dist script e.g. the last line of axios is

//# sourceMappingURL=axios.map

Combine those two factors and the result is a bundle that contains

//# sourceMappingURL=axios.map;define('axios', ['axios/axios'], function (main) { return main; });

For better or worse RequireJS handles that case.

@JeroenVinke would you like a PR to just add a newline before the wrapper is appended? Or is there some other consideration I have missed?

Contributor

simonfox commented Jun 23, 2017

OK I've got to the bottom of this. amodro wraps anonymous amd modules on write - see here.

The two packages causing problems here have source map links in the dist script e.g. the last line of axios is

//# sourceMappingURL=axios.map

Combine those two factors and the result is a bundle that contains

//# sourceMappingURL=axios.map;define('axios', ['axios/axios'], function (main) { return main; });

For better or worse RequireJS handles that case.

@JeroenVinke would you like a PR to just add a newline before the wrapper is appended? Or is there some other consideration I have missed?

@simonfox

This comment has been minimized.

Show comment
Hide comment
@simonfox

simonfox Jun 23, 2017

Contributor

Actually I think we will need to strip that sourcemap line completely. The source map will be broken from our bundling anyway. Let me know your thoughts @JeroenVinke

Contributor

simonfox commented Jun 23, 2017

Actually I think we will need to strip that sourcemap line completely. The source map will be broken from our bundling anyway. Let me know your thoughts @JeroenVinke

@JeroenVinke

This comment has been minimized.

Show comment
Hide comment
@JeroenVinke

JeroenVinke Jun 23, 2017

Member

@simonfox yeah we should strip those. It's part of #624 to improve sourcemaps.

Member

JeroenVinke commented Jun 23, 2017

@simonfox yeah we should strip those. It's part of #624 to improve sourcemaps.

@JeroenVinke JeroenVinke added the bundler label Jun 23, 2017

simonfox added a commit to simonfox/cli that referenced this issue Jun 25, 2017

feat(source-maps): remove existing sourcemap links
Some external libraries ship with sourcemaps with the dist package including a `sourcemapUrl` link. This link causes problems during bundling, and is specifically exposed by anonymous amd modules and SystemJS loader (RequireJS). This change modifies amodro to strip any existing `sourcemapURL` link from the source of a referenced library that is being bundled.

closes aurelia#659, related to aurelia#624

simonfox added a commit to simonfox/cli that referenced this issue Jun 26, 2017

fix(source-maps): remove existing sourcemap links
Some external libraries ship with sourcemaps with the dist package including a `sourcemapUrl` link. This link causes problems during bundling, and is specifically exposed by anonymous amd modules and SystemJS loader (RequireJS). This change modifies amodro to strip any existing `sourcemapURL` link from the source of a referenced library that is being bundled.

closes aurelia#659, related to aurelia#624
@Thanood

This comment has been minimized.

Show comment
Hide comment
@Thanood

Thanood Jul 11, 2017

Contributor

I'm getting the same error if I use a library which I load from a separate bundle. So if I add another bundle to the app/vendor pair and .use.plugin('my-plugin') in main.js, I'm getting the same.

The loader in this case is actually loading (from root) /my-plugin.js and returns the index file. It can't parse html and throws with unexpected token <.

Contributor

Thanood commented Jul 11, 2017

I'm getting the same error if I use a library which I load from a separate bundle. So if I add another bundle to the app/vendor pair and .use.plugin('my-plugin') in main.js, I'm getting the same.

The loader in this case is actually loading (from root) /my-plugin.js and returns the index file. It can't parse html and throws with unexpected token <.

@RomainLanz

This comment has been minimized.

Show comment
Hide comment
@RomainLanz

RomainLanz Jul 11, 2017

Contributor

Have you tried with the fix of @simonfox ?

#665

Contributor

RomainLanz commented Jul 11, 2017

Have you tried with the fix of @simonfox ?

#665

@Thanood

This comment has been minimized.

Show comment
Hide comment
@Thanood

Thanood Jul 11, 2017

Contributor

No, as there are no sourcemaps. 馃槂
But moving the configuration into vendor-bundle helped.

Now I see this issue is about sourcemaps mostly. Maybe I should create a separate issue?

Contributor

Thanood commented Jul 11, 2017

No, as there are no sourcemaps. 馃槂
But moving the configuration into vendor-bundle helped.

Now I see this issue is about sourcemaps mostly. Maybe I should create a separate issue?

@JeroenVinke

This comment has been minimized.

Show comment
Hide comment
@JeroenVinke

JeroenVinke Jul 11, 2017

Member

@Thanood sounds good!

Member

JeroenVinke commented Jul 11, 2017

@Thanood sounds good!

@RomainLanz

This comment has been minimized.

Show comment
Hide comment
@RomainLanz

RomainLanz Jul 24, 2017

Contributor

Side note : It works fine with the Webpack bundler

Contributor

RomainLanz commented Jul 24, 2017

Side note : It works fine with the Webpack bundler

dima-v added a commit to dima-v/cli that referenced this issue Sep 12, 2017

feat(source-maps): bundling improvements
multiple fixes to source maps:
- fixes offset problems caused by:
	- prepended scripts;
	- duplicate dependency main module;
- remove sourece map file comments;
- add EOL separator for the anonymous module wrapper;

closes aurelia#659, related to aurelia#624

dima-v added a commit to dima-v/cli that referenced this issue Oct 12, 2017

feat(source-maps): bundling improvements
multiple fixes to source maps:
- fixes offset problems caused by:
	- prepended scripts;
	- duplicate dependency main module;
- remove sourece map file comments;
- add EOL separator for the anonymous module wrapper;

closes aurelia#659, related to aurelia#624
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment