Search code examples
javascriptvue.jsimportcdn

How to import a variable from a JS file in another JS file that uses Vue CDN? - Uncaught SyntaxError: Unexpected identifier

I'm new to Vue, and been trying to import a variable that consists of API key necessary for my app.js where Vue CDN is used. But I received this error:

Uncaught SyntaxError: Unexpected identifier app.js:1

Everything else works fine, only I have issue with importing.

The preview of my code:

//---config.js---


export const key = 'someKey';


//---app.js---

import key from './config.js'

new Vue({
  ...,
  components: {
    key
  },
  ...

P.S. is there a way to make it work without using Vue CLI?

Solution

  • if you want to use import/export you should add type="module" in script tag in html. Like this.

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

    And as you used export instead of default export when importing use:

    import {key} from './config.js'