Node_modules за пределами каталога проекта не транспилируются Babel (7)

Я пишу приложение на основе Symfony4 и ReactJS и использую webpack encore для сборки пакета. Также каталог node_modules находится за пределами проекта и имеет символическую ссылку - возможно, это главный виновник, но мне нужно держать node_modules вне каталога проекта.

Проблема, с которой я столкнулся, связана с использованием некоторых пакетов npm (например, @foes/react-i18n-routing), которые состоят из компонентов / HOC React, поэтому их необходимо транспилировать, но Babel этого не делает, и в результате я получаю ошибку, подобную этой:

error  in ./node_modules/@foes/react-i18n-routing/dist/esm/component/withI18nRouting.js

Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
|
| export default Component => props => (
>   <I18nRoutingContext.Consumer>{context => <Component i18nRouting = {context} {...props} />}</I18nRoutingContext.Consumer>
| );

Насколько я знаю, когда я использую Babel 7, мне нужно изменить свой файл .babelrc на babel.config.js, чтобы обеспечить широкую конфигурацию проекта, но этого недостаточно, я все еще сталкиваюсь с проблемой.

Может ли кто-нибудь указать мне правильное направление?

Пробовал разные конфиги и остановился на настройке babelrcRoots. Может быть, это ключ, но я не смог установить это правильно.

Вот структура каталогов:

ROOT/
├── node_modules/
└── project/
    ├── assets/
    ├── package.json
    ├── babel.config.js
    └── webpack.config.js

Вот babel.config.js

module.exports = function(api) {
  api.cache(true);

  const presets = ['@babel/preset-env', '@babel/preset-react'];
  const plugins = [
    '@babel/plugin-proposal-class-properties',
    'transform-es2015-modules-commonjs',
    'babel-plugin-dynamic-import-node'
  ];

  // const babelrcRoots = ['.', '../node_modules/*']; ????

  return {
    presets,
    plugins
  };
};


А вот и webpack.config.js

const Encore = require('@symfony/webpack-encore');
const path = require('path');

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/js/app.jsx')
  .splitEntryChunks()
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableLessLoader()
  .enableReactPreset();


let config = Encore.getWebpackConfig();
config.resolve.alias['App'] = path.resolve(__dirname, 'assets/js');
// config.resolve.modules = [path.resolve('./node_modules'), path.resolve('../node_modules')]; here's the another try with no luck

module.exports = config;

А вот и package.json

{
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@symfony/webpack-encore": "^0.27.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "core-js": "^3.0.0",
    "less-loader": "^4.1.0",
    "prop-types": "^15.7.2",
    "webpack-notifier": "^1.6.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@foes/react-i18n-routing": "^0.8.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "history": "^4.9.0",
    "lodash.flatmap": "^4.5.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-router-named-routes": "0.0.23"
  }
}


Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
1 135
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать настроить rootMode:"upward" параметр, упомянутый здесь, следующим образом:

babel --root-mode upward src -d lib

или в вебпаке

module: {
        rules: [{
            loader: "babel-loader",
            options: {
                rootMode: "upward",
            }
        }]
    }

Спасибо! После добавления загрузчика babel с опцией rootMode «вверх» в мою конфигурацию веб-пакета веб-пакет запускается без каких-либо ошибок. Теперь у меня есть другая проблема, но она, вероятно, связана с пакетом npm "@foes/react-i18n-routing", поэтому я создал там новую проблему ( github.com/FriendsOfECMAScript/ReactI18nRouting/issues/22 )

Gnato 15.05.2019 12:28

Другие вопросы по теме