В базовом c CRA-приложении это прекрасно работает:
import MyMDX from '!babel-loader!mdx-loader!./mdx-file.mdx';
Но когда я пытаюсь сделать то же самое с require.context
, вот так:
const mdxContext = require.context('!babel-loader!mdx-loader!../../../../packages', true, /(\w+)\.(\w+)\.(mdx?)/);
Я получаю целую кучу "неожиданных токенов" ошибок в babel-loader
:
../packages/<file-path>.mdx (../node_modules/babel-loader/lib!../node_modules/mdx-loader!../packages/<file-path>.mdx)
SyntaxError: <file-path>.mdx: Unexpected token (11:9)
9 | const makeShortcode = name => function MDXDefaultShortcode(props) {
10 | console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 11 | return <div {...props}/>
| ^
12 | };
13 |
14 | const layoutProps = {
Кто-нибудь знает почему или как заставить это работать должным образом?
Обновление
Я подозреваю, что проблема связана с этим: https://github.com/babel/babel-loader/issues/198
Но у меня есть файл .babelrc
, содержащий:
{
"presets": ["babel-preset-react-app"]
}
И - как я уже говорил, обычный импорт ES6 работает просто отлично. Так что может показаться, что использование babel-loader
inline как-то игнорирует .babelrc
? babel-loader
Обновление 2
Теперь я убежден, что это связано с этим: https://babeljs.io/docs/en/config-files#monorepos. и что babel-loader
игнорирует .babelrc
не потому, что я использую его встроенным, а потому, что он используется для попытки импорта модулей вне корневой папки Create React App / sr c.
Так что теперь вопрос становится; как мне настроить приложение Create React для использования babel.config.js
на monorepo root через Craco (который я уже использую для поддержки Less)? 10
Я нашел этот полусвязанный вопрос , но ответ требует, чтобы каждый пакет одного брата был указан напрямую. Есть ли способ объединить это с require.context
и динамически включить каждый пакет одного брата?