5

On a bundled production build I see a network request for: systemjs-plugin-babel@0.0.21.json from cache... on the same instance where it's unable to load fully all the way through to my app.

It fails to load anything being routed from http://thehost/myapp/jspm_packages/npm

My understanding is that in a bundled JSPM module it shouldn't ever load from this kind of route since everything is bundled into the build.js file.

I currently bundle my application with the following gulp task:

gulp.task('jspm-bundle', plugins.shell.task([
      'node node_modules/jspm/jspm.js bundle myapp/index.jsx' +
      ' + myapp/things/**/*.jsx + myapp/otherthings/**/*.jsx' +
      ' + systemjs-plugin-babel + babel-preset-stage-0 + transform-react-jsx' +
      ' + transform-decorators-legacy' +
      ' --minify --skip-source-maps'
    ])

I'm not sure where to start... could someone tell me a few of the reasons why a bundled app would even attempt to make this kind of request to the browser?

Update 1:

At one point we saw a promise rejection that seemed related as well for this singular client:

Unhandled promise rejection Error: Syntax Error
    Instantiating http://myhost/myapp/jspm_packages/npm/systemjs-plugin-babel@0.0.21.json
    Loading http://myhost/myapp/jspm_packages/npm/systemjs-plugin-babel@0.0.21.json
    Unable to fetch package configuration file http://myhost/myapp/jspm_packages/npm/systemjs-plugin-babel@0.0.21.json
    Resolving plugin-babel to http://myhost/myapp/app/index.jsx
    Resolving myapp/index.jsx
    Loading myapp/index.jsx

Update 2:

My FULL SystemJS config: https://pastebin.com/aJFPqNGn

Update 3 (last update?):

I can recreate the issue in production if I explicitly import from 'npm:systemjs-plugin-babel' but I can't explain why this import would occur in production at the client's installation yet. The syntax error occurs because the request for the non-existent file returns the login html and the syntax error occurs on the first '<' in the html

buddyp450
  • 528
  • 2
  • 10
  • 27
  • You're getting the error because your bundle explicitly includes the transpiler. You're also including a lot of other things you probably don't need to. `jspm bundle myapp/index.jsx` should be sufficient for a react application – Aluan Haddad Feb 18 '18 at 18:52
  • Also the transpiler should be installed as a Dev dependency. – Aluan Haddad Feb 18 '18 at 18:55
  • My app allows the user to write JSX in it and it be interpreted. – buddyp450 Feb 22 '18 at 14:52
  • Also, how does this explain how it would only happen intermittently? – buddyp450 Feb 22 '18 at 14:52
  • Maybe I need to just go look at the code for SystemJS's import :) – buddyp450 Feb 22 '18 at 15:16
  • I'm sorry, I didn't realize it was intermittent nor that you were indeed using the transpiler in production for your end users (that's exactly the kind of thing that SystemJS supports well) – Aluan Haddad Feb 22 '18 at 16:27
  • Regardless, I would place your user facing babel-jsx transformation code in a separate bundle. If you can post some more info, like your version numbers and your config (your manually configured `packages` and `meta` if any) I'd be happy to look into it. – Aluan Haddad Feb 22 '18 at 16:29
  • I don't think I should be using "npm:" anything in my map... (as far as the key to the alias is concerned) – buddyp450 Feb 22 '18 at 20:08
  • That's unlikely. The majority of packages use the npm registry so `npm:` will appear in the values of your map config. Unless customized it points to `/jspm_packages/npm/` – Aluan Haddad Feb 22 '18 at 20:12
  • Right, I clarified to say as far as the keys were concerned. I'm extra confused, I need to paste the rest of my jspm.config including the paths, which I will do here shortly in the main thread. Basically my devConfig map is being used and I don't think it should be? devConfig.map['plugin-babel'] = "npm:systemjs-plugin-babel@0.0.21" and map['plugin-babel'] = undefined but importing from 'plugin-babel' still resolves in production – buddyp450 Feb 22 '18 at 20:29
  • @AluanHaddad check out the new pastebin link if you get the chance – buddyp450 Feb 22 '18 at 20:33
  • I'll take a look at it when I can but note that plugin-babel will being included because you are including it in the bundle. – Aluan Haddad Feb 22 '18 at 20:40
  • I noticed one problem. You have the plugin mapped twice. Once as `plugin-babel` and once as `systemjs-plugin-babel`. you also should update it. – Aluan Haddad Feb 22 '18 at 20:46
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165683/discussion-between-buddyp450-and-aluan-haddad). – buddyp450 Feb 22 '18 at 21:15
  • A bit later if you don't mind – Aluan Haddad Feb 22 '18 at 21:16

0 Answers0