Nuxt.js: Nuxt.js Tryes to fetch source map in asyncData function.

[alanaasmaa]

Hi,

I use (noty)[https://github.com/needim/noty] in my project and i have loaded it like this.

nuxt.config.js

  css: [
    '~/assets/scss/main.scss',
    'noty/lib/noty.css'
  ]

noty.css contains source mapping url at bottom /*# sourceMappingURL=noty.css.map*/

For that reason my async functions are trying to parse /api/v1/products/noty.css.map and for that reason im getting 404 errors.

Im using nuxt axios module.

EDIT: I also noticed that it sometimes trys to fetch favicon.ico

_{This question is available on Nuxt.js community (#c2350)}

[Cogitoergo]

Solution for now would be to either add the plugins to vendor array in build object, or by disablind the source maps in general, by adding cssSourceMap: false in build object in nuxt.cfg.js.

[alanaasmaa]

@Cogitoergo It is in vendor array

vendor: [
      'js-cookie',
      'noty',
      'vue-i18n'
    ]

[alanaasmaa]

I fixed this by importing styles via main.scss and im importying scss not css file.

[nicroto]

I am experiencing a very similar issue: my page's fetch () method is called on a request for a css sourcemap of bootstrap-vue.

---

pages/
--| _item/
-----| index.vue
--| index.vue

With the above routing I handle requests to / and /<item-slug-url>.

The issue I am having is the fetch () method of the item page, gets called not only for the /<item-slug-url>, but it also is called for /bootstrap.css.map.

fetch: async function ({store, params: { item }, error}) {
...
}

in here item is first the correct slug-url I am navigating to, but then it's called with that resource map's filename. (this all happens on the server, on the client it's not an issue since this page is SSR)

Aside from installing it with npm, I am adding bootstrap-vue to my project, like this:

// nuxt.config.js
export default {
    ...
    modules: [
        ...
        "bootstrap-vue/nuxt"
    ],
    ...
};

P.S.

Disabling css maps from the nuxt.config.js does patch it up. But I don't think this is a solution.

Here is my package.json's deps spec, in case it can give any clues about env specifics:

{
  ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@fortawesome/vue-fontawesome": "^0.1.0",
    "@nuxtjs/axios": "^5.3.0",
    "@nuxtjs/component-cache": "^1.1.1",
    "@nuxtjs/google-analytics": "^2.0.2",
    "@nuxtjs/pwa": "2.0.8",
    "bootstrap-vue": "^2.0.0-rc.11",
    "express": "^4.16.3",
    "nuxt-edge": "^2.0.0-25375479.ba18127",
    "strapi-sdk-javascript": "^0.2.1",
    "vue-masonry": "^0.11.4",
    "vue-no-ssr": "^0.2.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-vue": "^4.4.0",
    "prettier": "^1.11.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

[vestingpanel]

Hi. I'm using coffee as pre-processors. asyncData is also trying to render app.js.map.

I see this in the console:

nuxt:render Data fetching /admin/: 58ms +2s
nuxt:render Rendering url /admin/app.js.map +904ms

What can I do to avoid this?

[alanaasmaa]

@vestingpanel

I havent actually found a correct fix yet. I have created some kind of filter. That it filters out map files.

[zerosym]

@nicroto I am encountering the same issue, but with plugins/modules. It seems modules such as nuxt/axios and nuxt/auth are also loaded for each .css.map url rendering. In the case of nuxt auth, where there is a built in call to fetchUser on plugin init this leads to 3x API calls to fetch the user from backend on the initial server side rendering of the page.

[Atinux]

Please re-create an issue by submitting a bug report with https://cmty.app/nuxt/issues/new

[ram-you]

Have the same issue with v2.2.0.
@Cogitoergo solution works but don't think this is the better solution.

_PS: It still an issue with or without the bug report !_

[opgbaudouin]

I have the same with using Vuetify and Nuxt 2.2.0 nuxtServerInit is called Many times for a single page load causing all kinds of issues. I added the

build: {
        cssSourceMap: false
}

but i still got other _nuxt/...js.map sourcemaps as well.
so i now do:

const actions = {
   async nuxtServerInit({commit, dispatch}, {req, route}) {
        if(route.name === null) {
            return;   //you could also check if req.url end with .map 
        }
       ...cookies, stores etc. Only happens once per route.
   } 
}

Not sure if it a BUG per se. Just something that needs to be in documentation

[kpturner]

Why is this closed? I have components that crash because css.map requests find their way to the asyncData functions even if I try to filter them out in nuxtServerInit so this cannot be right can it? It begs the question, where exactly is the browser supposed to get the maps from because it must be failing to do so.

[opgbaudouin]

Also noted these tend to get to any middleware (i.e. your /middleware 'router' plugins) as well. Apparantly this only occurs when debugging your application (i.e. a browser with production should not request them even if they are listed). I believe the dev team are aware of this though...

[aldarund]

https://github.com/nuxt/nuxt.js/pull/4323

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.