У меня есть несколько проектов, которые были созданы с create-react-app
и были удалены. Теперь у меня есть некоторые компоненты, которые дублируются в каждом из проектов. Вместо этого я хотел бы иметь один общий компонент в каталоге над каталогами проекта.
Структура каталога будет выглядеть примерно так:
- shared_components
- MySharedComponent.js
- project1
- project2
- project3
Я обновил файлы webpack.config.js
вмои проекты позволяют импортировать файлы вне каталога src
путем добавления моего каталога shared_components
в ModuleScopePlugin
:
{
resolve: {
plugins: [
new ModuleScopePlugin([paths.appSrc, paths.mySharedComponents], [paths.appPackageJson]),
],
}
}
Это успешно позволяет импортировать файлы, но мой каталог shared_components
не делаетКажется, что скомпилировано babel-loader
.
Я получаю следующую ошибку:
SyntaxError: /path/to/shared_components/MySharedComponent.js: Unexpected token <
Эта ошибка возникает в начале JSX в моем компоненте, который предположительноиз-за того, что он никогда не был скомпилирован в обычный Javascript.
Я попытался обновить конфигурацию babel-loader
, чтобы включить мой общий каталог, но он не работает:
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc, paths.mySharedComponents],
loader: require.resolve("babel-loader"),
// ...the rest of the config is just the defaults
}
Как мне получить мойКомпонент JSX для успешной компиляции?