Menu
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
834
First clean up the config files you created, and make sure you have babel-plugin-import installed. This will give you a config folder with 2 webpack config files for dev/prod environments. Open those files and locate the place where you need to insert the plugins property as documented on the instructions page.
Whenever you import a file in your code, Webpack will look for it in the project directory and copy it to the build folder with a new name, then Webpack replaces the import code in your bundled JavaScript file with the path to the newly copied file.
Dynamic imports allows one to circumvent the syntactic rigidity of import declarations and load a module conditionally or on demand.
Using a PluginIf the plugin is on npm, you can pass in the name of the plugin and Babel will check that it's installed in node_modules . This is added to the plugins config option, which takes an array. You can also specify an relative/absolute path to your plugin.
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.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
