Ошибка при импорте модуля с необязательной цепочкой

Настройка проекта:

  • Vuejs 3
    • Webpack 4
    • Вавилон
    • TS

Мы создали проект с использованием vue-cli и добавили зависимость в библиотеку.

Затем мы импортировали проект (Vue Currency Input v2.0.0), в котором используется дополнительная цепочка. . Но при выполнении serve скрипта мы получаем следующую ошибку:

error  in ./node_modules/vue-currency-input/dist/index.esm.js

Module parse failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     getMinValue() {
|         let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
>         if (this.options.valueRange?.min !== undefined) {
|             min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
|         }

Я читал, что Webpack 4 по умолчанию не поддерживает необязательную цепочку. Итак, мы добавили плагин Babel для необязательного связывания. Это наш babel.config.js файл:

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: ["@babel/plugin-proposal-optional-chaining"],
};

(Но, если я прав, этот плагин теперь включен по умолчанию в babel-preset. Так что эта модификация может быть бесполезной ^^)

Я не понимаю, что мы можем использовать необязательную цепочку в .vue файлах.

Я создал песочницу со всеми файлами: SandBox

Как я мог решить эту ошибку?


webpack typescript vue.js optional-chaining
person Ludovic Mouline    schedule 17.06.2021    source источник
comment
Возможный дубликат stackoverflow.com/questions/52615179/.   -  person Estus Flask    schedule 17.06.2021

Ответы (3)


arrow_upward
2
arrow_downward

Мне удалось решить эту проблему с помощью @babel/plugin-proposal-optional-chaining, но для меня единственный способ заставить Webpack использовать плагин Babel - это пропихнуть конфигурацию babel-loader через параметры Webpack в vue.config.js . Вот минимальный vue.config.js:

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('supportChaining')
      .test(/\.js$/)
        .include
          .add(path.resolve('node_modules/PROBLEM_MODULE'))
          .end()
      .use('babel-loader')
        .loader('babel-loader')
        .tap(options => ({ ...options, 
          plugins : ['@babel/plugin-proposal-optional-chaining']
        }))
        .end()
    }
};

Удивительно, но мне не нужно было устанавливать @babel/plugin-proposal-optional-chaining с NPM. Я провел тест «годен / не годен» с приложением, созданным с помощью @ vue / cli 4.5.13, в моем случае без машинописного текста. Я импортировал модуль NPM, который вызывает у меня горе (@ vime / vue-next 5.0.31 BTW), запустил сценарий serve и получил ошибку Unexpected token в строке, содержащей необязательную цепочку. Затем я вставил указанный выше vue.config.js в корень проекта и снова запустил сценарий serve, на этот раз без ошибок.

Я считаю, что эту проблему можно решить, не сильно загрязняя среду разработки.

Форумы Vue отрицают эту проблему, утверждая, что Vue 3 поддерживает необязательную цепочку. Однако, по-видимому, не в узловых модулях. Сообщение в этой ветке от atflick 26.02.2021 было большим помощь.

person JJJSchmidt    schedule 18.06.2021
comment
Большое спасибо @JJJSchmidt :) Он решает мою проблему лучше, чем то, что я нашел :) - person Ludovic Mouline; 21.06.2021
comment
Рад, что смог помочь. В более крупном проекте это помогает сосредоточить загрузчик на работе только с ошибочными модулями. Я отредактировал ответ, добавив для этого выражение .include. Я обнаружил, что загрузчик babel работает медленно и натыкается на большие модули узлов. Конкретное определение цели позволяет избежать этой проблемы. - person JJJSchmidt; 23.06.2021

arrow_upward
0
arrow_downward

У меня была похожая проблема. Я использую nuxt, но мой .babelrc файл выглядит так, как показано ниже, и у меня он работает.

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins":[
    ["@babel/plugin-transform-runtime",
        {
          "regenerator": true
        }
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        ["transform-regenerator", {
            "regenerator": true
        }],
        "@babel/plugin-transform-runtime"
        ],
      "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": false
        }]
      ]
    }
  }
}
person RuNpiXelruN    schedule 17.06.2021
comment
if (this.options.valueRange?.min !== undefined) - это не то же самое, что if (!!this.options.valueRange?.min). Последнее, очевидно, будет ложным для 0. И !! не нужен в if - person Estus Flask; 17.06.2021
comment
Я просто попробовал ваше решение, но у меня все еще та же проблема: / - person Ludovic Mouline; 17.06.2021
comment
Не могли бы вы предложить дополнительные объяснения? Вам нужно было добавить и плагин, и пресет? Как настроить эти параметры, например. "regenerator: true заставить компилятор обрабатывать необязательную цепочку без Unexpected token ошибки? - person JJJSchmidt; 18.06.2021

arrow_upward
0
arrow_downward

Мне удалось исправить решение, добавив эти строки в package.json:

...
"scripts": {
   "preinstall": "npx npm-force-resolutions",
   ...
},
"resolutions": {
  "acorn": "8.0.1"
},
...
person Ludovic Mouline    schedule 17.06.2021
comment
Предупреждение: хотя это решит проблему при обслуживании приложения, этого не произойдет, если вы используете Terser. - person Ludovic Mouline; 21.06.2021