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