Javascript - импорт не найден

Question

Я пытаюсь сделать так, чтобы репозиторий GitHub с текстовой маской работал с моим проектом laravel. При этом я хочу использовать определенный аддон, который позволяет мне маскировать поле ввода в качестве цены. Репозиторий GitHub, о котором я говорю, связан здесь

Аддон называется createNumberMask и на своей странице github он говорит следующее в своей документации:

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
   prefix: '',
   suffix: ' $' // This will put the dollar sign at the end, with a space.
})

// ...then pass `numberMask` to the Text Mask component as the mask

Теперь, когда я пытаюсь реализовать это в моем собственном проекте, выдается ошибка, в которой говорится, что импорт не может быть найден. Что вызывает это?

У меня есть блейд-файл, в нижней части которого есть теги скрипта Файл лезвия выглядит следующим образом:

@section('content')
<div class="row " style="color: white; width: 100%; margin: 0;" id="showEffect">
    <div class="col-md-12 text-center" style="margin-top: 10rem">
        <div class="row justify-content-md-center">
            <div class="col-md-2">
                <input type="text" class="myInput form-control depth-5">
            </div>
        </div>

    </div>
</div>


<script type="module">

    import createNumberMask from '/node_modules/text-mask-addons/dist/createNumberMask'

    const numberMask = createNumberMask({
        prefix: '€',
        suffix: '',
        allowDecimal: true,
    });

    var myInput = document.querySelector('myInput');

    var maskedInputController = vanillaTextMask.maskInput({
        inputElement: document.querySelector('myInput'),
        mask: numberMask
    });


</script>

@endsection

Почему импорт не работает? Файл js находится внутри папки node_modules.

APP.JS

require('./bootstrap');

import TextMask from 'vanilla-text-mask/dist/vanillaTextMask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

window.Vue = require('vue');

window.events = new Vue();

window.flash = function (message) {
    window.events.$emit('flash', message);
};


Vue.component('flash', require('./components/Flash.vue'));

// Vue.component('product-view', require('./components/Products.vue'));
// Vue.component('wysiwyg', require('./components/Wysiwyg.vue'));

const app = new Vue({
el: '#app',
});

const numberMask = createNumberMask({
prefix: '€',
suffix: '',
allowDecimal: true,
});

var myInput = document.querySelector('myInput');

var maskedInputController = vanillaTextMask.maskInput({
    inputElement: document.querySelector('myInput'),
    mask: numberMask
});

Answer 1

Код включен в шаблон блэйда, а не через resources/assets/js/app.js или какой-либо другой компилятор javascript (в данном случае «webpack»)

Проблема в том, что, хотя большинство браузеров понимают ~ ES6, существуют ограничения на импорт / требование.

Поскольку node_modules находится на стороне сервера, веб-интерфейс не может просто получить к нему доступ.

Итак, что вы могли бы / нужно сделать, это добавить это к упомянутому файлу javascript тем или иным образом и скомпилировать его с npm run dev или подобным.

Answer 2

Убедитесь, что вы используете ES6 Transpiler, т.е. Babel