[Bug]: Error: This must be called within a setup function

[end0cr1ne]

Describe the Bug

I get the error: Error: This must be called within a setup function
While following the install instructions as per the document: npx @vue-storefront/cli generate store

Please help, I'm not sure what the cause is.

Current behavior

In visiting localhost:3001 Error: This must be called within a setup function

Expected behavior

The page renders

Steps to reproduce

bootstrap a new project using the cli then run npm un dev and visit the homepage

What version of Vue Storefront are you using?

2.5.6

What version of Node.js are you using?

16.16.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

macOS@latest

Relevant log output

ERROR  [Vue warn]: Error in setup: "Error: This must be called within a setup function."                                                                          00:06:15

found in

---> <DefaultLayout> at layouts/default.vue
       <Root>

Able to fix / change the documentation?

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

[levarberry]

Getting the same problem. I find 5 files where the date() is being called inside of a page that is using COMPOSITION API. That would be the source of the problem.

[dmarkowski]

Same for me. After bootstrapping a new project the page is not rendering but throwing an error 'Error: This must be called within a setup function'

[Fifciu]

What integration do you use?

[dmarkowski]

shopify

[WojtekTheWebDev]

and what version of vue and nuxtjs/composition-api are you using in the integration?

[SirDannyMunn]

@WojtekTheWebDev I am also getting this error. I am using the default versions which are installed with vuestorefront/shopify. nuxtjs/composition-api v0.29.3 and the vue v2.6.12

[WojtekTheWebDev]

@tpccdaniel I saw this error with new version of vue and composition api, verify if there are no other package that is upgrading your version of those packages in it's dependencies

[SirDannyMunn]

@WojtekTheWebDev Thank you. Can I clarify, you mean I should look through the packages included in the package.json of the VSF installation and ensure that these packages' dependencies are not using a higher version of Vue or composition API?

I did actually scan through the package-lock.json and found that there are multiple versions of the nuxt/composition-api as dependencies of other packages.

Is this an issue with the installation templates or is it only occurring on certain machines? Thanks 🙏

[GuillaumeDgr]

Hi, I have exactly same problem when trying to deploy app with prestashop integration. All my nuxtjs/composition-api versions are v0.29.3 too. Any update on this pls ? Many thanks

[bryarb]

This is an issue mainly because the 2.7.* version of vue is built using a newer babel version, which then modifies how Nuxt loads vue templates. Nuxt is unable to load any vue components that have a vue-storefront dependency because those were built with babel 7 and its trying to use babel 8 to load.

Looking for an answer @Fifciu @bartoszherba please help

[connyg]

In "general issues" I have just submitted an issue saying exactly this:
I have the impression that the integration packages that others provide (Vendure, Spree, Shopify, ...) are outdated and either fail immediately upon setup or a bit later when you notice that you need to upgrade something to follow e.g. the integration guide of VSF.
So I did with a vendure package. After initial setup I had a variety of versioning problems that took me days to fix as I am new to the js/nuxt/vue space (though a it guy including a dev career for 20+ years).
Then I was trying to integrate Strapi according the integration pattern proposed, had to upgrade nuxt/composition-api and BAM - the versioning issues started from scratch again.

So I think there are two issues:

• VSF is a complex project and has lots of dependencies, making it fragile
• The integration templates provided (at least the opensource ones) seem outdated and you have start with issues right away

[Christo44]

For what it's worth this project with a combination of Yarn, Node >= 16 has worked for me => https://github.com/vuestorefront/template-shopify

[filrak]

Hey @connyg thanks for your feedback. The truth is, we pushed a bit into quantity vs quality with the external integrations and we're fixing it now. Watch the February Live Stream to learn more! Also, can you dm me on Discord? I would love to have a chat with you about your experiences with VSF. We are doing quite big changes reg. DX this year and all feedback is priceless.

Cheers!

[Fifciu]

Generally, almost always when Error: This must be called within a setup function. occurred - it meant we have 2+ versions of nuxt-composition-api in our project. In order to fix that, we have to make sure only one version is installed in the whole project.

[jorismak]

When I scaffold a new project with @vue-storefront/cli, it works.

The moment I try to pick some other dependencies, I get this error quickly. Reverting the yarn.lock changes, removing node_modules, doing a fresh yarn install and then everything works again.

The dependency tree seems very 'fragile' in storefront :).

[connyg]

Yes, exactly, very fragile. Exact the same experience here. Once I start to add something things break with high likelihood and the search begins.
I was trying to use the Vendure template and wanted to add the Strapi integration and was not able to resolve it in a reasonable time (a few evenings) and gave up for some time as I did not want to burn my time with dependency debugging.
Project on hold since that time.

[skirianov]

Hey @jorismak and @connyg, Dev advocate here can you please describe your issue in more detail? I will try to push for the further investigation here