Using import from a Vue Component?

Question

I have a components.js file that looks like this:

import { lookCoordinate } from './tools.js'; // I get: SyntaxError: Unexpected token {

Vue.component('coordform', {
  template: `<form id="popup-box" @submit.prevent="process" v-if="visible"><input type="text" autofocus refs="coordinput" v-model="coords"></input></form>`,
  data() {
    {
      return { coords: '', visible: false }
    }
  },
  created() {
    window.addEventListener('keydown', this.toggle)
  },
  destroyed() {
    window.removeEventListener('keydown', this.toggle)
  },
  methods: {
    toggle(e) {
      if (e.key == 'g') {
        if (this.visible) {
          this.visible = false;
        } else
          this.visible = true;
      }
    },
    process() {
      lookCoordinate(this.coords) // Tried to import from tools.js
    }
  }
});

But I'm getting: Uncaught SyntaxError: Unexpected token {

How do I import a function from another plain JS file and use it within a Vue component?

Thanks.

Yes, corrected it. JS is not semicolon aware so did not affect the outcome. Thanks. — Gabriel
– Gabriel, Commented May 1, 2019 at 18:35
Can you show us tools.js? And not sure what you mean by JS is not semicolon aware. Missing a semicolon can drastically change how the code is executed due to automatic semicolon insertion. — wjervis
– wjervis, Commented May 1, 2019 at 18:47
Also, this is an issue with import/export, not with Vue. Are you using webpack or rollup (or something else along those lines) to bundle these into a script, or is this being parsed by the browser and throwing the error? — wjervis
– wjervis, Commented May 1, 2019 at 18:49
What browser do you use? - You cant just import {} something from a file if you do not bundle your code. If your app is served from a web-server for example it would not know how to fetch "./tools.js". — Patrick Hollweck
– Patrick Hollweck, Commented May 1, 2019 at 18:58
Yes I totally get that, Importing is a vanilla feature. But if you would, for example, use a browser that does not support es6 modules yet, then it would give you that error. - And most browser do not support it yet, Thats why bundlers like webpack exist. Can you show us how you load the script ? - Aka the html script tag ? — Patrick Hollweck
– Patrick Hollweck, Commented May 1, 2019 at 19:08

Steven Spungin · Accepted Answer · 2019-05-01 19:25:27Z

2

You will get this error if trying to load a Javascript file without ES6 support enabled. The parser does not understand the syntax of import is as it begins parsing the file.

Check your webpack or vue-cli settings to make sure that you are transpiling the code.

For instance, a browser does not know what import means, and neither does plain old node unless enabling experimental support.

You can also change it to:

const  lookCoordinate  = require('./tools.js').lookCoordinate;

and see if that gives you an error. That format does almost exactly the same thing.

If using import from a browser, also enable module support, as suggested by Orkhan Alikhanov in the comments.

It is supported if you add script with type="module". e.g: 
<script type="module" src="main.js"></script>

edited May 1, 2019 at 19:25

answered May 1, 2019 at 19:04

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

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

6 Comments

Gabriel Over a year ago

Import is widely supported: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… I do not want to mess up with Vue Cli or anything like that. I'd embedded the function into the Vue component to avoid this?

Gabriel Over a year ago

Uncaught ReferenceError: require is not defined

Patrick Hollweck Over a year ago

@GabrielA.Zorrilla You cant "just use" the require function - It is not inbuilt. You either use a bundler to pre-process that for you or you use the module type in your script tag in a supported browser

Orkhan Alikhanov Over a year ago

@GabrielA.Zorrilla It is supported if you add script with type="module". e.g: <script type="module" src="main.js"></script>

Gabriel Over a year ago

@OrkhanAlikhanov yes! I forgot to add type="module" to the component.js import line in the main file! Put is as an answer please.

|

Orkhan Alikhanov · Accepted Answer · 2019-05-01 19:18:16Z

1

It is supported if you add script with type="module":

<script type="module" src="main.js"></script>

answered May 1, 2019 at 19:18

Orkhan Alikhanov

10.2k4 gold badges50 silver badges66 bronze badges

Comments

Bhatasana Prashant · Accepted Answer · 2019-05-01 18:55:31Z

0

Can you please try this without {}.

import { lookCoordinate } from './tools.js'

{} is used when you define multiple functions inside tools.js

like,

import { lookCoordinate, lookCoordinate2 } from './tools.js'

answered May 1, 2019 at 18:55

Bhatasana Prashant

1536 bronze badges

3 Comments

Gabriel Over a year ago

Uncaught SyntaxError: Unexpected identifier

wjervis Over a year ago

{} is used for single imports too: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

wjervis Over a year ago

Importing without {} is for importing default exports, which only works if the module declares a default export.

Collectives™ on Stack Overflow

Using import from a Vue Component?

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related