Nuxt js project do not work on netlify

Support
, ,
1

Hello,

I have two netlify website.
The first in linked to my main git branch and the auto deploy is enabled
The second is linked to my staging branch.
I used to develop on a third branch “dev” and do merge request when I need to see my works on netlify.

As you can see on the main branch : https://hunaa.netlify.app/ , my old version of code works like a charm on netlify.
But in staging : https://hunaa-staging.netlify.app/ , it stop to works few days ago. I don’t know exactly which commit make it bug.

The two netlify websites have the same config and same environments variables. Just the branch is different. And the first day when I setup this two sites, it was working very well.

When I do
npm run dev in local, on the staging branch, it works too.

See screenshot of few differences between staging and main branch : Dropbox - screencapture-gitlab-hunaa-hunaa-nuxt3-compare-main-staging-2022-08-22-11_00_08.pdf - Simplify your life
As you can see, I installed :

  • Babel
  • vuetify
  • jest
  • and i updated sass

Log error in staging link :

entry-8d1317b0.mjs:4 TypeError: Cannot read properties of null (reading 'hero_placeholder')
    at Proxy.<anonymous> (index-5c8f835a.mjs:1:722)
    at br (entry-8d1317b0.mjs:4:3917)
    at Yi.q [as fn] (entry-8d1317b0.mjs:4:37307)
    at Yi.run (entry-8d1317b0.mjs:1:4668)
    at V.update (entry-8d1317b0.mjs:4:37588)
    at j (entry-8d1317b0.mjs:4:37614)
    at entry-8d1317b0.mjs:4:8343

hero_placeholder is a property fetched by my backend api. My backend api is well working because it works in local and production website (linked to main branch). and because in google chrome inspector / networks tab, the api well return the field : https://i.imgur.com/cqduwC3.png

Regards,

Thank’s for your help

2

Hi @dbconception,

Sorry for the delay. This appears to be a code issue. While the backend is responding correctly, chances are the variable you’re trying to assign it to is not behaving correctly.

For example, if you do something like:

let foo = null
foo = fetch('api').then(response => response.json())
const image = foo.hero_placeholder

…you’d get the error you just got. This is because, the fetch needs time to complete. However, because you did not use await, JavaScript went to the next line and tried to access the property from foo which is still null (because fetch has not yet completed).

This is just a simple example, but you’d have to determine why your code is accessing the property before the variable is accessible or initialised. It can happen due to a lot of more factors.

3

Hello,

I fix my issue today by updating nuxt to the rc-8. And update pinia.
When I installed pinia, I use config of nuxt 2 instead of nuxt 3. That’s why, the fetch was a success but when I saved the data in my store then returl the state of my store, I received null.

Here a part of my package.json

"devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "babel-jest": "^28.1.3",
    "jest": "^28.1.3",
    "nuxt": "3.0.0-rc.8",
    "sass": "^1.54.0",
    "sass-loader": "^13.0.2"
  },
  "dependencies": {
    "@nuxtjs/composition-api": "^0.33.0",
    "@pinia/nuxt": "^0.4.1",
    "pinia": "^2.0.16",
    "vuetify": "^3.0.0-beta.9"
  }

and my nuxt.config.js

modules: [
     
      ['@pinia/nuxt'],
    ]

I replace “buildModules” by just “modules”, for nuxt3

4

thanks for coming back and sharing! This will help future Forums members who encounter something similar get unstuck!