0

I am trying to include this component in my project: https://www.npmjs.com/package/vuejs-auto-complete

The problem is I am not allowed to use npm install. We are not using npm or webpack on the project (something about a small footprint and minimizing dependencies) so all I have to work with is LibMan.

I found the component on unpkg using LibMan and "installed" it. However this only gave me two files: dist/build.js and build.js.map (I assume this is some webpack thing).

Unlike other components I got from unpkg, (which give me something like component.esm.js to work with) I am unable to import the component from the file:

import { Autocomplete } from "../../lib/vuejs-auto-complete/dist/build.js";

gives me

SyntaxError: import not found: Autocomplete

I have tried the component in a side project, where I used npm install, and it worked fine.

How do I make it work in my scenario?

Shaggydog
  • 3,456
  • 7
  • 33
  • 50

2 Answers2

1

You have to import Autocomplete as a default import like so:

import Autocomplete from '../path/to/dist/build.js';

or use node's require() function:

const Autocomplete = require('../path/to/dist/build.js');

MarcRo
  • 2,434
  • 1
  • 9
  • 24
  • import Autocomplete from "../../lib/vuejs-auto-complete/dist/build.js"; this gives me SyntaxError: import not found: default – Shaggydog Sep 30 '19 at 14:09
  • @Shaggydog Are you transpiling your code down to es5? – MarcRo Sep 30 '19 at 14:13
  • I honestly don't know. I wasn't the one who set up the project, and as you can see I'm new to this whole frontend/javascript/packaging thing. How do I find out? – Shaggydog Sep 30 '19 at 14:15
  • OK I have gone through the plumbing of the project, and I can now say with confidence that there is no transpiling going on, files just get served as they are to the browser. – Shaggydog Sep 30 '19 at 14:28
  • @Shaggydog I am not 100% sure why you encounter this error - I just tried it myself and can load it without problems. You are adding the `type=module` attribute to your script tag? (Vue shouldn't even load if you don't) – MarcRo Sep 30 '19 at 14:35
  • This is in the index.html and main.js has the Vue instance in it. Vue works just fine on the whole. – Shaggydog Sep 30 '19 at 14:39
-2

You have to import it like this:

import Autocomplete from "../../lib/vuejs-auto-complete/dist/build.js";

And then in components section:

components: {Autocomplete}
ascripter
  • 5,665
  • 12
  • 45
  • 68
gtardini
  • 1