SyntaxError: Cannot use import statement outside a module

[IsraelDCastro]

Describe the bug

I try to use a library called share-buttons-links, and when I run the project locally everything works without any problem, when I try to make a build of the project I get this error:

import ButtonGroup from './ButtonGroup.vue'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1078:15) at Module._compile (node:internal/modules/cjs/loader:1113:27) at Module._extensions..js (node:internal/modules/cjs/loader:1203:10) at Module.load (node:internal/modules/cjs/loader:1027:32) at Module._load (node:internal/modules/cjs/loader:868:12) at ModuleWrap. (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:193:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:526:24)

Before the error said I had to add "type": "module", but the error still persist, I changed thepostcss.config.jsto.cjsfile andtailwind.config.jsto.cjs`.

Reproduction

Happen when I run yarn docs:build

Expected behavior

I expect the project builds successfully and run yarn build:serve to test the production mode and deploy in Netlify.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 91.89 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 103.0.2
    Safari: 15.6.1
  npmPackages:
    vitepress: ^1.0.0-alpha.19 => 1.0.0-alpha.19

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[kiaking]

You have to use import statement inside <script> tag 👀 Will this fix?

<script setup>
import ButtonGroup from './ButtonGroup.vue'
</script>

<ButtonGroup ... />

[IsraelDCastro]

@kiaking thank you, It worked, but it was not the idea I had.

My idea was to use one unique import from an index.js file for each component. As you can see below in the image. But for the moment I will let in that way.

[kiaking]

In order to do that, you need to create share-button-links/components/buttons/index.js file and export all component there. Then your syntax will work 👍