SyntaxError: Неожиданный импорт токена - reactjs

В нашем приложении мы использовали библиотеку иконок, которая была создана первыми разработчиками и больше не поддерживалась новой версией react (16.0 and higher)

Мы решили оставить их прежний вид, лишь немного изменив код, чтобы он работал, и сделать как Component.

Вот как это выглядит сейчас:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import * as icons from 'icons';

class Icon extends Component {
    static propTypes = {
        type: PropTypes.oneOf(Object.keys(icons)).isRequired
    };

    render() {
        const {type, ...other} = this.props;
        const IconComponent = icons[type];

        return IconComponent ? (
            <IconComponent {...other}/>
        ) : null;
    }
}

export * from '/icons';
export default Icon;

По идее все должно работать нормально, так как другие компоненты в этом каталоге написаны аналогичным образом.

Но есть ошибка, с которой я никогда раньше не сталкивался:

00:14:58 App /home/cpt/Desktop/prod/local/app/components/Base/Elements/IconSocial/index.js:3
00:14:58 App import _Object$defineProperty from 'babel-runtime/core-js/object/define-property';
00:14:58 App ^^^^^^
00:14:58 App SyntaxError: Unexpected token import

Ошибка указывает на эту строку: import * as icons from 'icons';

Мы используем babel-core": "6.26.3"

Подскажите, пожалуйста, что может быть? Заранее спасибо за любой ваш совет.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
682
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Это вавилонская проблема. Здесь вы можете прочитать об этом: https://github.com/babel/babel/issues/2877

Возможным решением было бы добавить это к плагинам:

"plugins": [
    ["transform-runtime", { "polyfill": false }]
]

Не понял как это работает, но помогло, спасибо большое :)

A.Burdonskaya 10.04.2019 23:52

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