Es6 import in hugo

support
1

I am trying to add vue.js to render sections in a page

in this script the ‘import’ statement produces the Cannot use import statement outside a module in {{ define “main” }} - error in Chrome

<script>
  import { createApp } from 'vue'

  const app = createApp({
    data() {return {count: 0} },
    delimiters: ['[[', ']]'],
  }) 

  app.mount('#app') 
</script>

<div id="app">
  <button @click="count++">[[ count ]]  </button>
</div>

{{ end }}
2 
{{ define "main" }}

<script type="importmap">
  { "imports": {
      "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
      "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js"
  } }
</script>  

<script type="module" >
  import { createApp } from 'vue'

  const app = createApp({
    data() {return {count: 0} },
    delimiters: ['[[', ']]'],
  }) 

  app.mount('#app') 
</script>

<div id="app">
  <button @click="count++">[[ count ]]  </button>
</div>

{{ end }}
3

Your solution is NOT a solution. The ES6 “cannot use import statement outside of a module” error is solved differently. Either add "type": "module" to your package.json or change the file extension to .mjs.

4

@technosprout

When posting code, configuration, or data on this forum, please wrap the text within backticks or use the </> button in the menu.

```
my code
```

I’ve edited both of your posts.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.