Problems with importing vue component

The CMS Questions
1

Hi there,

when i try to import a vue component i get following error message:

Uncaught SyntaxError: Cannot use import statement outside a module

Here is my JS:

import HeroBanner from './components/hero-banner'

panel.plugin('akiyele87/hero-banner', {
  blocks: {
    hero: {
      template: `
        <div>
          <p>{{content.blockbgimg[0].image.url}}</p>
          <img :src="content.blockbgimg[0].image.url">
        </div>`,
    },
  },
})

When i remove the import the template code works, but with the import it crashes.
kirby-3.6.2 is used.

I tried it with the google answer to add "type":"module" to the package.json, but it wasn’t working.

Any advice?

Best regards
Stefan

2

You probably should import it with the file extension?

import HeroBanner from './components/hero-banner.vue'
3

You can’t use an import statement in your main index.js. You would have to make : your banner a component, see example Creating a custom block type from scratch | Kirby CMS

4

Ah thanks.
I had to reread the part where you generate the main index.js file.
It works now.
Problem solved :slight_smile: