Getting "Unexpected token <" error since using SystemJS

[RomainLanz]

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.

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"
},

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]

@simonfox could you take a look?

[simonfox]

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]

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]

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]

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]

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

[Thanood]

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]

Have you tried with the fix of @simonfox ?

#665

[Thanood]

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]

@Thanood sounds good!

[RomainLanz]

Side note : It works fine with the Webpack bundler