Ошибка Webpack после обновления узла: «Ошибка синтаксического анализа модуля: непредвиденный токен»

Я устраняю ошибку веб-пакета.

Команда: bin/webpack --colors --progress

Выдает эту ошибку:

ERROR in ./node_modules/@flatfile/sdk/dist/index.js 351:361
Module parse failed: Unexpected token (351:361)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           class v extends i {
|             constructor(e, t) {
>               super(e), r(this, "code", "FF-UA-00"), r(this, "name", "UnauthorizedError"), r(this, "debug", "The JWT was not signed with a recognized private key or you did not provide the necessary information to identify the end user"), r(this, "userMessage", "There was an issue establishing a secure import session."), e && (this.debug = e), this.code = t ?? "FF-UA-00";
|             }
|           }
 @ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&) 22:0-41 125:6-14
 @ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&
 @ ./app/javascript/src/app/pages/content_assets/Index.vue
 @ ./app/javascript/packs/app.js

НОТЫ

Похоже, ES2020 был отправлен в папку /dist, поэтому мой загрузчик cra babel не может его проанализировать, чтобы исправить это, мне нужно включить путь в конфигурацию моего веб-пакета.

  • Node v16.13.1
  • Мы используем webpack с проектом Rails через пакет webpacker (@rails/webpacker": "5.4.3"), который зависит от [email protected].
  • Когда я перехожу на Node v14x и перестраиваю node_modules (yarn install), веб-пакет успешно компилируется.
  • Строка, указанная в ошибке (351:361), не существует, когда я иду проверять файл в node_modules/
  • У нас есть файл yarn.lock, который я удаляю и создаю заново перед запуском yarn install. Я также удаляю каталог node_modules, чтобы обеспечить «свежую» загрузку правильных пакетов.
  • У нас есть файл babel.config.js...

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      ["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

В конечном итоге я хочу, чтобы веб-пакет скомпилировался. Если бы у вас был совет по любому из следующих вопросов, это очень помогло бы.

  1. Почему изменение версии Node (только) может привести к другому поведению веб-пакета? Мы не меняем версию веб-пакета или версию пакета @flatfile, которая вызывает ошибку.
  2. Почему ошибка указывает на строку, которой нет в пакете? Является ли это свидетельством какой-то проблемы с кэшированием?
  3. Проливает ли свет на мою проблему обходной путь, упомянутый в связанной проблеме GitHub?
When I change to Node v14x and re-install the node_modules, так что вы не только изменили версию узла.
morganney 08.11.2022 00:35

@morganney Я не понимаю твоего комментария. Возможно, есть путаница в том, что я имел в виду под «переустановить node_modules». Я имел в виду, что после смены версии ноды я запустил yarn install.

emersonthis 08.11.2022 18:22

Это немного проясняет, но такие вещи, как использование файла блокировки, конфигурация Babel или удаление node_modules, до сих пор неизвестны. Semver в сообществе с открытым исходным кодом не всегда проходит гладко, потому что по большей части управление версиями по-прежнему выполняется людьми, что подвержено ошибкам. В любом случае, ваша проблема сводится к тому, что webpack 4 не поддерживает ??, который одна из ваших зависимостей использует в опубликованном исходном коде. Вы можете добавить соответствующий плагин babel, а затем явно запустить эту зависимость через babel-loader в конфигурации вашего веб-пакета, если это необходимо.

morganney 08.11.2022 23:58

@morganney Я обновил примечания дополнительными подробностями, которые вы запросили. You can add the appropriate babel plugin and then explicitly run that dependency through babel-loader in your webpack config if necessary Похоже, это именно то, что мне нужно сделать. Можете ли вы указать мне правильное направление, как это сделать? (Я новичок в настройке babel/webpack) Спасибо!!

emersonthis 09.11.2022 02:50

Очень похоже на этот ответ.

morganney 09.11.2022 03:50
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
5
1 232
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я возьму удар на этом.

Я полагаю, что ваша проблема в том, что webpack 4 не поддерживает нулевой оператор объединения из-за его зависимости от acorn 6. См. эту проблему webpack и этот PR комментарий.

  1. Вы не указали точную вспомогательную версию Node.js 14x, которая работала для вас. Я предполагаю, что это была версия, которая не полностью поддерживала нулевой оператор объединения, или, по крайней мере, версия, которую опция @babel/preset-envtarget понимала как не поддерживающую ??, поэтому она была передана babel, и поэтому веб-пакет не жаловался. Вы можете увидеть, какие версии узла поддерживают нулевое объединение на node.green.

  2. Я не совсем понимаю, о чем вы здесь говорите, поэтому не сосредотачивайтесь на этом в предлагаемом решении.

  3. Я не уверен, что предлагаемый обходной путь находится в связанной проблеме, может быть, комментарий о «включить путь в мою конфигурацию веб-пакета», но да, проблема кажется актуальной, поскольку она указывает на нулевой оператор объединения в качестве источника проблема.

Вы можете попытаться решить это с помощью

  • добавление @babel/plugin-proposal-nullish-coalescing-operator в конфигурацию вашего Babel plugins

  • обновление конфигурации вашего веб-пакета для запуска от @flatfile/sdk до babel-loader для переноса нулевого оператора объединения:

    {
      test: /\.jsx?$/,
      exclude: filename => {
        return /node_modules/.test(filename) && !/@flatfile/sdk/dist/.test(filename)
      },
      use: ['babel-loader']
    }
    

Другая возможность — обновить webpacker до версии, зависящей от webpack v5.

Последнее замечание, когда вы говорите

У нас есть файл yarn.lock, который я удаляю и заново создаю перед запуском программы yarn install.

вам, вероятно, не следует удалять файл блокировки перед каждой установкой, так как это полностью сводит на нет цель файла блокировки.

Спасибо, это супер полезно!! Я собираюсь попробовать это позже сегодня, а пока вот несколько быстрых ответов на ваши вопросы...

emersonthis 09.11.2022 18:51
should not be deleting the lock file before each install Я делал это только между сменами версий Node. Я подумал, что имеет смысл позволить пряже находить обновленные пакеты, соответствующие более новой версии Node. Имеет ли это смысл? Может, это без разницы?
emersonthis 09.11.2022 18:54
2. I don't fully understand the point you are making here Трассировка стека в ошибке webpacker указывает на строку (351), которой нет в соответствующем исходном файле, если я найду ее внутри node_modules. Фактический файл содержит всего около 100 строк кода. Я нахожу это запутанным и загадочным.
emersonthis 09.11.2022 18:57
exact minor version of Node.js 14x that worked v14.17.3
emersonthis 09.11.2022 18:58

Я добавил @babel/plugin-proposal-nullish-coalescing-operator в список плагинов в babel.config.js... и это сработало! 🎉 Мне вообще не пришлось трогать конфиги вебпака. На самом деле я пытался настроить загрузчик, как вы указали, но это вызвало массу ошибок с этим шаблоном: Module parse failed: Unexpected token (13:38) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js С оригинальными конфигурациями веб-пакета (но обновленными конфигурациями Babel) он работает точно так, как ожидалось. Я смущен, почему это сработало таким образом. Имеет ли это смысл для вас?

emersonthis 09.11.2022 22:32

Это действительно трудно сказать, не имея передо мной всей вашей установки для отладки, особенно с вовлеченным веб-упаковщиком, но, как вы заметили, суть проблемы заключалась в том, что babel-loader не транспилировался нулевой оператор объединения, которым задыхается веб-пакет 4.

morganney 09.11.2022 23:11

Еще раз спасибо за помощь. Я думаю, что загрузчик Babel уже применялся к node_modules... но необходимый плагин не был настроен. Я думаю, это объясняет, почему обновление babel.config.js (только) решило проблему. Это звучит правдоподобно для вас? Я знаю, что трудно сказать наверняка.

emersonthis 10.11.2022 00:11

Да, отсюда и мое предположение, что babel-loader уже применялся к node_modules.

morganney 10.11.2022 01:05

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