vue3-sfc-loader icon indicating copy to clipboard operation
vue3-sfc-loader copied to clipboard

Getting "TypeError: t is not a function" when trying to replicate script import issue

Open SMen1 opened this issue 1 year ago • 1 comments
trafficstars

I was getting the following error when trying to use vue.js composables and import a script js file.

'import' and 'export' may appear only with 'sourceType: "module"' (1:0)

I have tried to replicate the solutions here:
https://github.com/FranckFreiburger/vue3-sfc-loader/issues/44 and here https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-758794153

Specifically this solution:

async getFile(url) { const res = await fetch(url); if (!res.ok) throw Object.assign(new Error(url + " " + res.statusText), { res }); let content = await res.text(); content = url.endsWith("/test.js") ? { content: content, type: ".mjs" } : content; return content; },

Where the test.js file is :

export const user = { userName: "root", password: "zfs1111" }

is giving me the error: TypeError: t is not a function in the console. I get the same error trying to import a non-test js file.

Is this an old solution that is no longer viable? What is the new solution if yes?

using Vue3.js

Versions

  • Browser (name & version):
  • vue3-sfc-loader:

Additional context

SMen1 avatar Nov 14 '24 13:11 SMen1

hello SMen1,

yes, the solution you are talking about is quite old { content: content, type: ".mjs" } is not valid any more.

In order to handle binary files (ex. png) I managed to change 'content' property into getContentData: (asBinary: Boolean) => Promise<ContentData>

Now, your option.getFile function should look like this:

      async getFile(url) {
        
        const res = await fetch(url);
        if ( !res.ok )
          throw Object.assign(new Error(res.statusText + ' ' + url), { res });

        // make test.js be treated as an mjs file
        if ( url.endsWith("/test.js") ) {
          return {
              getContentData: async (asBinary) => { // asBinary is unused here, we know it is a text file
                
                return await res.text();
              },
              type: ".mjs",
          }          
        }

        return {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
        }
      },

FranckFreiburger avatar Nov 22 '24 14:11 FranckFreiburger