importing js file in Vue project throws error

Question

I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr

I did a npm install mobius1-selectr

and imported it in my main.js

import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';

but as soon I import I get this exception:

You must supply either a HTMLSelectElement or a CSS3 selector string.

which comes from the source of selectr.

Is the import not to be done this way in webpack / main.js?

What am I doing wrong? Any help is appreciated.

Have you tried solutions proposed at: github.com/Mobius1/Selectr/issues/31 or laracasts.com/discuss/channels/laravel/… ? — yuriy636
– yuriy636, Commented Nov 15, 2017 at 12:27

dfsq · Accepted Answer · 2017-11-15 12:21:57Z

1

Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:

import Selectr from 'mobius1-selectr'

edited Nov 15, 2017 at 12:21

answered Nov 15, 2017 at 12:18

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tim Liberty Over a year ago

thank you but that doesn't help. I tried import {Selectr} from 'mobius1-selectr/dist/selectr.min.js'; as well as import Selectr from 'mobius1-selectr/dist/selectr.min.js'; and import Selectr from 'mobius1-selectr'` still getting the same error. Any ideas?

dfsq Over a year ago

import Selectr from 'mobius1-selectr' is how you should do it. Show how you are using Selectr.

Tim Liberty Over a year ago

import Selectr from 'mobius1-selectr' doesn't work. Still getting the same error. Further I have not used Selectr at all. I am just trying to integrate the library but as soon as I import I get this error.

dfsq Over a year ago

Well here is a proof that it should work: codesandbox.io/s/l99y6m401z. If it doesn't for you then there is something else. Also this error indicates the you are using Selectr, as this error is thrown when you invoke this function (with incorrect parameters).

dfsq Over a year ago

I checked source code and saw that this package uses UMD patten (see package.json main field). Also you almost never want to use path to import stuff (maybe only CSS). Then since you are using Webpack you can import this library with either require or import.

|

Collectives™ on Stack Overflow

importing js file in Vue project throws error

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related