I use Babel 7 with the polyfill and the systemjs plugins, which causes the following error:
Unhandled promise rejection Error: "Unable to resolve bare specifier "core-js/modules/web.dom.iterable" from file:///[...]/target/main.js"
How can I tell Babel to produce transpiled code that can be run in SystemJS without errors?
The transpiled code looks like this:
"use strict";
System.register(["core-js/modules/web.dom.iterable", "core-js/modules/es6.set", "./loadGraphFromSparql.js", "./log.js", "./filter.js", "./menu.js", "./search.js", "./button.js", "./graph.js", "./file.js", "./rdfGraph.js", "./layout.js", "./progress.js"], function (_export, _context) {
"use strict";
package.json:
{
[...]
"dependencies": {
"@babel/polyfill": "^7.0.0",
"cytoscape": "^3.2.17",
"cytoscape-cxtmenu": "^3.0.1",
"cytoscape-euler": "^1.2.1",
"spin.js": "^4.0.0",
"systemjs": "^2.0.1"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-transform-modules-systemjs": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"chai": "^4.2.0",
"docdash": "^1.0.0",
"es6-promise": "^4.2.5",
"eslint": "^5.6.1",
"eslint-plugin-import": "^2.14.0",
"isomorphic-fetch": "^2.2.1",
"jsdoc": "^3.5.5",
"mocha": "^5.2.0",
"node-localstorage": "^1.3.1"
},
[...]
"scripts":
{
"build": "babel js -d target", [...]
}
}
.babelrc
{
"presets":
[[
"@babel/preset-env", {
"targets": {
"chrome": 52,
"browsers": ["Firefox 49", "Edge 12","Chrome 53", "Opera 41", "Safari 10"]
},
"useBuiltIns": "usage"
}]],
"plugins": ["@babel/plugin-transform-modules-systemjs"]
}
Edit: As suggested by @loganfsmyth, I removed the dependency to @babel-polyfill. I also added a systemjs-packagemap to include the bare imports. Unfortunately, this results in the following error:
Unhandled promise rejection Error: Error loading file:///.../myproject/node_modules/core-js/modules/web.dom.iterable from file:///.../myproject/target/main.js
Stack trace:
h.instantiate/</<@file:///.../myproject/node_modules/systemjs/dist/system.min.js:4:4817
core.min.js
It seems as if system.js forgets to add the .js at the end of the file, because web.dom.iterable exists.
The relevant HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/core-js/client/core.min.js"></script>
<script type="systemjs-packagemap">
{
"packages": {
"core-js":
{
"path": "./node_modules/core-js/",
"main": "client/core.min.js"
}
}
}
</script>
<script src="node_modules/systemjs/dist/s.min.js"></script>
<script src="node_modules/systemjs/dist/system.min.js"></script>
</head>
<body>
<script>
System.import("./target/main.js");
</script>
</body>
</html>
Edit: I was unable to fix this problem and moved to Webpack with Babel without SystemJS. However I am still be interested in a solution.
I use Babel 7 with the polyfill and the systemjs plugins, which causes the following error:
Unhandled promise rejection Error: "Unable to resolve bare specifier "core-js/modules/web.dom.iterable" from file:///[...]/target/main.js"
How can I tell Babel to produce transpiled code that can be run in SystemJS without errors?
The transpiled code looks like this:
"use strict";
System.register(["core-js/modules/web.dom.iterable", "core-js/modules/es6.set", "./loadGraphFromSparql.js", "./log.js", "./filter.js", "./menu.js", "./search.js", "./button.js", "./graph.js", "./file.js", "./rdfGraph.js", "./layout.js", "./progress.js"], function (_export, _context) {
"use strict";
package.json:
{
[...]
"dependencies": {
"@babel/polyfill": "^7.0.0",
"cytoscape": "^3.2.17",
"cytoscape-cxtmenu": "^3.0.1",
"cytoscape-euler": "^1.2.1",
"spin.js": "^4.0.0",
"systemjs": "^2.0.1"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-transform-modules-systemjs": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"chai": "^4.2.0",
"docdash": "^1.0.0",
"es6-promise": "^4.2.5",
"eslint": "^5.6.1",
"eslint-plugin-import": "^2.14.0",
"isomorphic-fetch": "^2.2.1",
"jsdoc": "^3.5.5",
"mocha": "^5.2.0",
"node-localstorage": "^1.3.1"
},
[...]
"scripts":
{
"build": "babel js -d target", [...]
}
}
.babelrc
{
"presets":
[[
"@babel/preset-env", {
"targets": {
"chrome": 52,
"browsers": ["Firefox 49", "Edge 12","Chrome 53", "Opera 41", "Safari 10"]
},
"useBuiltIns": "usage"
}]],
"plugins": ["@babel/plugin-transform-modules-systemjs"]
}
Edit: As suggested by @loganfsmyth, I removed the dependency to @babel-polyfill. I also added a systemjs-packagemap to include the bare imports. Unfortunately, this results in the following error:
Unhandled promise rejection Error: Error loading file:///.../myproject/node_modules/core-js/modules/web.dom.iterable from file:///.../myproject/target/main.js
Stack trace:
h.instantiate/</<@file:///.../myproject/node_modules/systemjs/dist/system.min.js:4:4817
core.min.js
It seems as if system.js forgets to add the .js at the end of the file, because web.dom.iterable exists.
The relevant HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="node_modules/core-js/client/core.min.js"></script>
<script type="systemjs-packagemap">
{
"packages": {
"core-js":
{
"path": "./node_modules/core-js/",
"main": "client/core.min.js"
}
}
}
</script>
<script src="node_modules/systemjs/dist/s.min.js"></script>
<script src="node_modules/systemjs/dist/system.min.js"></script>
</head>
<body>
<script>
System.import("./target/main.js");
</script>
</body>
</html>
Edit: I was unable to fix this problem and moved to Webpack with Babel without SystemJS. However I am still be interested in a solution.
Share Improve this question edited Oct 10, 2018 at 9:01 Konrad Höffner asked Oct 6, 2018 at 20:08 Konrad HöffnerKonrad Höffner 12.2k19 gold badges73 silver badges135 bronze badges2 Answers
Reset to default 2@babel/polyfill has been deprecated, so instead use following two,
npm i --save core-js regenerator-runtime
then remove import "@babel/polyfill";
and add these two
import "core-js/stable";
import "regenerator-runtime/runtime";
as described here
https://github./zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
See Babel's docs for preset-env's useBuiltins option: https://babeljs.io/docs/en/babel-preset-env#usebuiltins
This option adds direct references to the core-js module as bare imports. Thus core-js will be resolved relative to the file itself and needs to be accessible. You may need to specify core-js@2 as a top level dependency in your application if there isn't a core-js dependency or there are multiple versions.
so you need a dependency on "core-js": "^2.5.7" in your package.json and then you need to make sure that code is bundled into your application.