Search code examples
babeljsaureliagulp-babel

Aurelia CLI, babel runtime and async transforms


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?


Solution

  • 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!