Неожиданный идентификатор при импорте пакета node_modules

Question

Я пытаюсь использовать этот плагин доступности mapbox , но как только я устанавливаю плагин в свой проект, я получаю следующую ошибку в каждом операторе импорта:

.../node_modules/@mapbox/mapbox-gl-accessibility/index.js:3

import xtend from 'xtend';
       ^^^^^
SyntaxError: Unexpected identifier

Кажется мне, что зависимости пакетов не читаются / не устанавливаются

Я пытался / рассматривал:

• прыжок в пакет из node_modules и запуск команды yarn (которая должна не нужно, потому что у меня есть файл yarn.lock, который делает это для меня)
• изменение синтаксиса для использования требует синтаксиса вместо импорта
• , что в моем проекте нет файла html загрузить "type: module" в теге скрипта

Кто-нибудь сталкивался с этим и знает, как я могу его решить?

Answer 1

Может быть, вы забыли использовать babel для преобразования синтаксиса ES6.

импорт - это синтаксис ES6

Если вы используете веб-пакет, вам необходимо установить babel -loader.

npm install -D babel-loader @babel/core @babel/preset-env webpack

и добавьте конфигурацию в ваш webpack.config. js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

Или вы можете попробовать следовать тому, что требует ваш пакет:

var xtend = require('xtend');