Блог

У меня возникли проблемы с запуском Webpack babel для файла в node_modules . В частности, я пытаюсь преобразовать .svg файл (из FontAwesome или других .svg источников) с помощью пользовательского загрузчика webpack, затем передать его Babel для преобразования в JSX.

Во многих различных конфигурациях, которые я пробовал, проблема обычно проявляется либо:

1. Unexpected token

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

Что указывает на то, что ни пользовательский загрузчик, ни babel не применяются, т. е. файл просто передается без какого-либо загрузчика.

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>;
  

Это указывает на то, что пользовательский загрузчик работает (поскольку для целей теста он жестко запрограммирован на <div>hey</div> ), но что последующий babel-loader не вызывается.

Проблема не возникает, когда .svg не включен node_modules , что означает, что и пользовательский загрузчик, и babel-loader работают должным образом. Либо webpack, либо babel решают не применять преобразования babel к файлам в node_modules , и неясно, как обойти эту проблему.

Единственное предложение, которое я нашел, которое, казалось, имело вес, заключалось в предоставлении аргументов include и exclude для webpack module.rules , но различные перестановки, которые я пробовал, похоже, не сработали.

Воспроизвести

Репозиторий: 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
  

Как описано в ошибке # 736 babel-loader:

… преобразовать .babelrc в babel.config.js с той же конфигурацией, babel-loader [работает] как ожидалось.

Объяснение было:

… потому что .babelrc не «протекает» между разными пакетами (разделяется package.json)