@babel/plugin-syntax-dynamic-import not working in imported node module

Question

I have ["@babel/plugin-syntax-dynamic-import"] in my .babelrc file, and I am successfully able to use dynamic imports on Vue files that are in my own project, but when trying to import a node/npm module with import App from '@something/app'; I get this error when building with Webpack:

SyntaxError: \node_modules\@something\app\src\SomeApp.vue: Support for the experimental syntax 'dynamicImport' isn't currently enabled (16:19):

  14 |  name: 'SomeApp',
  15 |  components: {
> 16 |      SomeCompontent: () => import('./some-dir/SomeCompontent.vue'),
     |                      ^


Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.

@babel/plugin-syntax-dynamic-import is enabled as plugin in my project and the node module being imported, but Babel just isn't respecting that for some reason.

Is there anything extra I need to do to be able to make Babel apply this plugin when importing a node module?

Thanks

Answer 1

So as I wrote in the comments, this is expected behaviour in Babel. But solving it isn't super straight forward so I am logging how to do so in case anyone else every needs it.

You need to use babel.config.js instead of .babelrc, this is a more global configuration method. Docs are here: https://babeljs.io/docs/en/configuration Really though it is can be as simple as copy and pasting your .babelrc to babel.config.js and adding module.exports = before the object.

Once you are applying Babel to your node_modules you are going to create different issues. You need to prevent Babel from Babelling itself and core-js. This is prevented by adding ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/] to your babel.config.js.

And then finally you need to prevent Babel from messing up your exports since you can't mix usage of modules.exports and export default. This fix seems a little hacky to me, but ¯\_(ツ)_/¯. The last thing we need to do is add 'sourceType': 'unambiguous' also to your babel.config.js.

The steps above so far are working perfectly for me, if I discover any other road bumps I'll be sure to update this answer.