Aurelia CLI, babel runtime and async transforms

Question

I'm in the process of porting an existing Aurelia app from JSPM/SystemJS to Aurelia CLI.

I'm having trouble getting babel-runtime and associated transform to work for au build. I think the problem is due to the babel-runtime dependency required in aurelia.json - I can't work out what it should be, currently it looks something like the following:

...
{
   "name": "babel-runtime",
   "path": "../node_modules/babel-runtime",
   "main": "core-js",
   "resources": [
     "./regenerator/index.js"
   ]
}
...

I have the following (relevant) devDependencies:

...
"babel-plugin-syntax-flow": "^6.8.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-es2015-modules-systemjs": "^6.9.0",
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-1": "^6.5.0",
"babel-register": "^6.9.0"
...

And (relevant) dependencies:

"babel-runtime": "^6.23.0",

And my .babelrc:

{
  "sourceMap": true,
  "moduleIds": false,
  "comments": false,
  "compact": false,
  "code": true,
  "presets": [
    ["es2015", {"loose": true}],
    "stage-1"
  ],
  "plugins": [
    "syntax-flow",
    "transform-decorators-legacy",
    "transform-async-to-generator",
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
    "transform-flow-strip-types",
    ["transform-builtin-extend", {
        "globals": ["Array"]
    }]
  ]
}

On au build I get the following class of errors:

File not found or not accessible: D:/code/.../node_modules/babel-runtime/regenerator.js. Requested by D:\code\...
File not found or not accessible: D:/code/.../node_modules/core-js/library/fn/symbol.js. Requested by D:\code\...

Could someone who has successfully set up babel-runtime in an Aurelia CLI app please help?

Update

I've managed to get the build working by listing all the babel-runtime and core-js dependencies that it seems to reference....Is this the correct approach?

{
  "name": "babel-runtime",
  "path": "../node_modules/babel-runtime",
  "main": "core-js"
},
{
  "name": "babel-runtime/regenerator",
  "path": "../node_modules/babel-runtime/regenerator",
  "main": "index"
},
{
  "name": "babel-runtime/core-js",
  "path": "../node_modules/babel-runtime/core-js"
},
{
  "name": "core-js",
  "path": "../node_modules/core-js",
  "main": "index"
},
{
  "name": "core-js/library",
  "path": "../node_modules/core-js/library",
  "main": "index"
},
{
  "name": "regenerator-runtime",
  "path": "../node_modules/regenerator-runtime",
  "main": "runtime-module"
},
...

However I now see runtime errors from require which seem to indicate that my dependencies are not being loaded in the correct order

Uncaught Error: Module name "_export" has not been loaded yet for context: _. Use require([])
Uncaught Error: Module name "shim" has not been loaded yet for context: _. Use require([])

Can anyone help with this?

Make sure that the library you're trying to load (babel-runtime) is in AMD. It looks like maybe it's got some strange syntax it's using to load up dependencies... — Andrew, Apr 07 '17 at 13:41

score 1 · Accepted Answer · answered May 12 '17 at 00:28

I have managed to get this to work....I started from an empty slate and added the moving parts one by one, but there have also been a couple of updates to Aurelia CLI so I'm not entirely sure if it was something I was doing wrong, or there was an issue in the CLI that has been resolved.

My .babelrc is now very simple, the stage-1 preset has enough to make the async transforms work:

{
  "sourceMap": true,
  "moduleIds": false,
  "comments": false,
  "compact": false,
  "code": true,
  "presets": [
    ["es2015", {"loose": true}],
    "stage-1"
  ],
  "plugins": [
    "transform-runtime",
    "transform-decorators-legacy"
  ]
}

The core-js and babel-runtime related bundle dependencies in aurelia.json are:

"dependencies": [
  {
    "name": "core-js",
    "path": "../node_modules/core-js",
    "main": "client/core",
    "deps":[
      "../node_modules/core-js/shim",
      "../node_modules/core-js/library/**/*.js",
      "../node_modules/core-js/modules/**/*.js"
    ]
  },
  {
    "name": "regenerator-runtime",
    "path": "../node_modules/regenerator-runtime",
    "main": "runtime"
  },
  {
    "name": "babel-runtime",
    "path": "../node_modules/babel-runtime",
    "main": "regenerator/index",
    "deps": [
      "../node_modules/babel-runtime/core-js/**/*.js",
      "../node_modules/babel-runtime/helpers/**/*.js"
    ]
  },
  {
    "name": "babel-runtime/regenerator",
    "path": "../node_modules/babel-runtime/regenerator",
    "main": "index"
  },

  ...

And package.json relevant bits:

"dependencies": {
    ...
    "babel-runtime": "^6.23.0",
    "core-js": "^2.4.1",
    ...
  },
  "devDependencies": {
    ...
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-amd": "^6.8.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-stage-1": "^6.5.0",
    ....
  }

Hope this helps anyone else trying to make this work!

Aurelia CLI, babel runtime and async transforms

1 Answers1