Nuxt: how can I get sourcemap files and where can I find them in production?

user_13429274 0
Viewed 3852

I have tried alot of solutions (nuxt.config & change the devtool source-map) but nothing work.. I need to get the real source code in production so I can get the real error's line like Sentry for example please can anyone help me...

nuxt.js vue.js
1 Answers

Using the example from the NuxtJS documentation for extending Webpack configuration in nuxt.config.js:

export default {
  build: {
    extend(config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

When you then run npm run build, source maps (*.js.map) will have been generated under .nuxt/dist/ and the bundled JS will reference them.

For example, a bundled JS named .nuxt/dist/client/05439bf.js will have a source map named .nuxt/dist/client/05439bf.js.map and contain a reference comment on its final line:

//# sourceMappingURL=05439bf.js.map

If you then run the build with npm run start, and open the Sources tab in Chrome DevTools, you will now see a webpack:// tree in the Page hierarchy, showing the original source for the Nuxt app, i.e. pages, components, layouts, etc.

When you deploy the build to the production environment, ensure that the *.js.map files under /.nuxt/dist/ are also deployed.

user_65784240
Related