Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`@babel/plugin-proposal-dynamic-import` does not support `URL`s #11127

Open
SimenB opened this issue Feb 11, 2020 · 2 comments · May be fixed by babel/website#2173
Open

`@babel/plugin-proposal-dynamic-import` does not support `URL`s #11127

SimenB opened this issue Feb 11, 2020 · 2 comments · May be fixed by babel/website#2173

Comments

@SimenB
Copy link
Contributor

@SimenB SimenB commented Feb 11, 2020

Bug Report

  • I would like to work on a fix!

Current Behavior
@babel/plugin-proposal-dynamic-import & @babel/plugin-transform-modules-commonjs transforms import(new URL()) to require(new URL().toString()) (ish, details below) which breaks.

Input Code

// file.js
const { pathToFileURL } = require('url');

const filePath = require.resolve('./otherFile');
const fileUrl = pathToFileURL(filePath);

import(fileUrl).then(console.log, err => {
  console.error(err);
  process.exitCode = 1;
});
// otherFile.js
module.exports = 'hello!';

Expected behavior/code
For these to work the same (minus the experimental warning).

$ node file
(node:54452) ExperimentalWarning: The ESM module loader is experimental.
[Module] { default: 'hello!' }
$ yarn babel-node file
yarn run v1.21.1
$ /Users/simen/babel-import-url/node_modules/.bin/babel-node file
Error: Cannot find module 'file:///Users/simen/babel-import-url/otherFile.js'
Require stack:
- /Users/simen/babel-import-url/file.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at /Users/simen/babel-import-url/file.js:6:1
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/simen/babel-import-url/file.js' ]
}

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: .babelrc
{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-dynamic-import"
  ]
}

Environment

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v13.7.0/bin/npm
  npmPackages:
    @babel/core: ^7.8.4 => 7.8.4
    @babel/node: ^7.8.4 => 7.8.4
    @babel/plugin-proposal-dynamic-import: ^7.8.3 => 7.8.3
    @babel/plugin-transform-modules-commonjs: ^7.8.3 => 7.8.3
  • Monorepo: n/a
  • How you are using Babel: @babel/node

Possible Solution
The transform turns import(fileUrl) into require(`${fileUrl}`) (wrapped in a promise) which essentially calls toString() on the passed in URL - it probably needs to do something more clever. On node you can pass it through url's fileURLToPath but that probably won't work in the browser?

If that's not possible, it should at least be warned about in the docs

Additional context/Screenshots
n/a

@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Feb 11, 2020

Hey @SimenB! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Feb 12, 2020

The toString call on import specifier was introduced in airbnb/babel-plugin-dynamic-import-node#2 for spec compliance. Converting URL to string should not break the app, that said, it comes from different loader behaviours: the Node.js esm loader supports absolute file:// URL while its cjs loader doesn't.

There is not much can be done on Babel side because we don't know if the import specifier is a URL or a string.

If that's not possible, it should at least be warned about in the docs

Node.js has documented the difference of these two module systems: https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs I think we can link it at the babel docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants
You can’t perform that action at this time.