Search code examples
webpackbabeljsbabel-loader

Babel not running on imports from `node_modules` via Webpack loader

I'm having trouble getting Webpack to run babel on a file in node_modules. In particular, I'm trying to transform a .svg file (from FontAwesome or other .svg sources) with a custom webpack loader, then pass that to Babel for a transform to JSX.

Across the many different configurations I've tried, the problem typically exhibits as either:

1. Unexpected token

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<svg ...></svg>

Which indicates that neither the custom loader nor babel is being applied i.e. the file is simply being passed through without any loader.

2. Syntax Error

SyntaxError: /Users/bmh/Repos/bug-reports/node_modules/icon/ad.svg: 
  Unexpected token (2:20)
1 |
2 |     const element = <div>hey</div>;

Which indicates that the custom loader is working (since for the purpose of the test it's hard-coded to a <div>hey</div>), but that the subsequent babel-loader isn't being called.

The issue does not occur when the .svg is not in node_modules, meaning that both the custom loader and the babel-loader are working as expected. Either webpack or babel is deciding to not apply babel transforms to files in node_modules, and it's not clear how to workaround this problem.

The one suggestion I found that seemed to have weight was to provide include and exclude arguments to the webpack module.rules, but the various permutations I tried didn't seem to work.

Reproduce

Repository: https://github.com/brianmhunt/bug-reports/tree/jsx-svg-import

$ git clone git@github.com:brianmhunt/bug-reports.git`
$ git checkout jsx-svg-import
$ make
Solution

  • As detailed in bug #736 of babel-loader:

    ... convert .babelrc to babel.config.js with same configuration, babel-loader [works] as expected.

    The explanation was:

    ... because .babelrc doesn't "leak" across different packages (delimited by package.json)