[Bug]: New Install - Error in setup: "TypeError: Cannot read property '$i18n' of undefined"

[mrboomer]

Expected Behavior

Since this is a new install following the docs, I was expecting the front end to load up and see the UI.

Actual Behavior

After running npm run dev and receiving a No issues found. message followed by a Listening on: http://localhost:3001/ message, clicking on that link opens up the webpage and I'm presented with an error that says

TypeError: Cannot read property '$i18n' of undefined

Possible Solution

At this moment, I'm not sure what the possible solution may be. Console logging the context argument from setup prints:

{
    attrs: [Getter],
    slots: [Getter],
    emit: [Function: bound ],
    expose: [Function: expose]
  }

There is no root property as it expects:

...

setup(props, context) {
    const { locales, locale } = context.root.$i18n;

...

Steps to reproduce

Follow the installation doc https://docs.vuestorefront.io/v2/getting-started/installation.html and select Vendure as backend.

What version of vendure integration are you using?

1.6.3

What version of Node.js are you using?

12.22.12

What browser (and version) are you using?

Chrome 103.0.5060.53, Firefox 101.0.1

What operating system (and version) are you using?

macOS Catalina 10.15.7

Relevant log output

ERROR  [Vue warn]: Error in setup: "TypeError: Cannot read property '$i18n' of undefined"

found in

---> <LocaleSelector> at components/LocaleSelector.vue
       <SFTopBar> at node_modules/@storefront-ui/vue/src/components/organisms/SfTopBar/SfTopBar.vue
         <TopBar> at components/TopBar.vue
           <Anonymous>
             <LazyHydrate>
               <DefaultLayout> at layouts/default.vue
                 <Root>

Code of Conduct

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

[Baroshem]

Hey @mrboomer

Have you tried running the project and installing dependencies with Yarn?

We usually use it with this package manager so maybe there are some issues with npm

[mrboomer]

I went ahead and installed yarn v1.22.19.

The docs probably need to be updated, as vsf is not available after running yarn global add @vue-storefront/cli. It seems like cli is what is being used in its place.

After I figured out that issue, I was able to then run cli generate store on node 14.20.0. I then cd into my project directory and ran yarn and finally yarn dev. Everything seems to be good, no errors, but then loading up http://localhost:3001/ gives me different errors:

[VSF][error]:  [Network error]: TypeError: Only absolute URLs are supported

[VSF][error]:  useUser/load Request failed with status code 500

[VSF][error]:  [Network error]: TypeError: Only absolute URLs are supported

[VSF][error]:  useCategory/undefined/search Request failed with status code 500

[Vue warn]: Error in render: "TypeError: Cannot read property 'map' of undefined"

I then switched over to node 16.16.0 and started the entire install over again similar to what I did above. Even before I open the webage up, I see this error:

 ERROR  (node:4373) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/mrboomer/vue-storefront-test/node_modules/@vue-storefront/nuxt-theme/package.json' of 'lib/module.js'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

Opening up the http://localhost:3001/ then again generates the same errors as I saw above using node 14.

[Baroshem]

@mrboomer

For the errors you are getting you are getting after visiting localhost 3001, it probably seems that VSF cannot connect to tour Vendure server. Could you paste here your middleware.config.js file? Also, what host and port is your server running?

For the second error about main field, this is an error with package.json that will not affect your build

[mrboomer]

Thanks for helping me figure this out. You're right, it wasn't connecting to Vendure properly. I took a look at the middleware.config.js file, and saw the api block had a process.env value for the uri property:

        api: {
          uri: process.env.GRAPHQL_API,
          tokenMethod: process.env.TOKEN_METHOD
        },

I also just saw the solution for this documented on another page, so I missed it. I copied the example environment file to .env and all is good now now, I was able to load up the storefront. Thanks, @Baroshem for helping me resolve my issue.

[Baroshem]

No worries! I am glad that I could help 🙂