Question 243530 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue3.js and exported namespace

I have a code that was in a .ts file that I wanted to import into a.vue file for consistency.

In the .ts file, I have some functions inside an exported namespace.

The issue is when I keep that in the .vue file, I get the following error:

<script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227

if I remove the export keyword, I get:

SyntaxError: ambiguous indirect export: ...

Structure of /path/to/file.js

<script setup lang="ts">
import { Stuffs } from "package";

export namespace myNS {
   // members here
}
</script>

Structure of /path/to/importer.js

<script setup lang="ts">

import { ref, onMounted } from "vue";
import { myNS } from "@/path/to/file.js";

//Stuffs
</script>

viteJS

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Question:

So How do I export my namespace in this context ?
What are my alternatives instead of exporting ?

I need my functions to be accessible outside of their file and called inside vue3 components.

Thanks

Tags:

2

Answers


  1. 0

    You cannot move code from TS files into script setup by this exact reason –
    You can’t use export in Script Setup

    That’s the whole reason to use TS rather then just using Script Setup

    The only thing Script Setup can export is the implicit default export of the whole component

    If you want a namespace export, use TS file

    If you want a namespace of components, import components as defaults from .vue and reexport into namespace

    Login or Signup to reply.
  2. 0

    In your code, you are trying to export a namespace (myNS) and import from an external package. does not support these features directly. To resolve this issue, you can consider the following approaches: Use Block: If you need to export a namespace or use advanced ES module features, it might be best to use a regular block instead of .

    <script lang="ts">
import { Stuffs } from "package";

export namespace myNS {
  // members here
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search