Конфигурационный файл Babel не работает в Lerna monorepo

Я использую Lerna для создания монорепозитория, содержащего несколько приложений React и некоторые пользовательские библиотеки (утилиты, компоненты UI React и т. Д.).

Вот структура моего монорепозитория на данный момент:

packages
  app1
  app2
  ui-component
  utils

Но когда я пытаюсь использовать свои библиотеки в своих приложениях, у меня возникают две проблемы:

    SyntaxError: ...\packages\ui-component\index.js Support for the experimental syntax 'classProperties' isn't currently enabled (2:8):
    
      1 | class Foo {
    > 2 |   name = 'This is Foo'
        |        ^
      3 | }
    
    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

    SyntaxError: ...\packages\ui-component\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
    
      1 | function Foo() {
      2 |   return (
    > 3 |     <div>Foo React Component</div>
        |     ^
      4 |   );
      5 | }
    
    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Сообщения об ошибках довольно явные, я прочитал о файлах конфигурации Babel здесь и, установив @babel/preset-react и @babel/plugin-proposal-class-properties, создали следующие babel.config.json:

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Но почему-то не учитывается.

Я попытался поместить этот файл в корень своего монорепозитория. Пытался положить в свои пакеты. Пытался переименовать в .babelrc.json. Я пробовал поместить эти настройки в свой package.json в раздел "babel". Но безрезультатно...

Примечание. У меня нет webpack.config.js, и я бы предпочел не выгружать свое приложение.


reactjs babeljs lerna monorepo
person Rodolphe    schedule 09.03.2021    source источник
comment
Вы нашли для этого какое-нибудь решение?   -  person Ashkan    schedule 12.03.2021
comment
да. В конце концов я обнаружил, что упустил. По сути, проблема возникла не из-за моей конфигурации Babel, которая действительно могла быть определена внутри package.json. Моя проблема заключалась в том, что код моего пакета был скопирован как есть в моих модулях узлов приложения. Мне просто не хватало шага транспилирования. Я подробно расскажу об этом в ответе, который опубликую как можно скорее.   -  person Rodolphe    schedule 12.03.2021

Ответы (1)


arrow_upward
3
arrow_downward

Для тех, кто заинтересован, моя проблема заключалась в том, что мой код не был перенесен и был скопирован как есть в папке node_modules моего приложения. Итак, что я сделал:

  1. перемещен index.js в src/index/js
  2. изменил мой package.json на:
{
  "name": "utils",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "transpile": "babel src --watch --out-dir dist --source-maps inline --copy-files"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "dependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0"
  }
}

Затем я запустил npm run transpile, и код моей библиотеки теперь правильно импортирован в мое приложение.

И да, конфигурация Babel отлично работает, если она определена в package.json.

person Rodolphe    schedule 15.03.2021
comment
Я использовал react-app-rewired и customize-cra для решения проблемы: stackoverflow.com/a/66652273/7338291 - person Ashkan; 16.03.2021
comment
Спасибо, что поделились этим другим решением. - person Rodolphe; 16.03.2021
comment
Спасибо, оба работают - person priyanka; 20.05.2021