Next.js: Webpack plugin (Sentry's) breaks client side app

[coluccini]

I'm trying to upload sourcemaps to sentry using their sentry-webpack-plugin and everything seams to be working fine, except that when I enable the plugin the app stop working on the client side. The SSR works, the scripts src points to the right paths and you can see the right content on those path. But the app doesn't work (it reload everything on each click). If I disable the plugin everything starts working again…

I've set a minimal repo from a clean copy of one of next's examples and it happens there too, does someone know why this can be happening?

You can find the test repo here: https://github.com/coluccini/next-webpack-issue

If you comment the config.plugins.push(new SentryPlugin({... from next.config.js and make a build/start everything will work. If you uncomment/build/start it will stop working 😬

Thank for any kind of help you can give me!

[arunoda]

@coluccini Did you change the devtool as mentioned here: https://zeit.co/blog/next5#optional-external-sourcemaps-in-production
And only enable this plugin only in the production mode.

@timneutkens did you try this plugin?

[arunoda]

@coluccini seems like you've done it all. I just checked the sample app.
Could you try this only for the client side.

You also get an field called isServer along with dev and buildId.
Do not do modify the webpack config in that case.

[coluccini]

That makes sense. But I've tried and still having problem. The weird thinks is that sometimes works, sometimes fails, sometimes the build create all the bundled files and sometimes just a few. Could this be related to the plugins triggering timeouts o reaching memory limits so the build process doesn't end up as it should?

[devcorpio]

Hi, @arunoda and @timneutkens,

Do you have any clue with that issue? We don't know how face that problem yet, no one of our tests are working :/

[khrome83]

@coluccini - I do not know if you are using Heroku, but I setup a buildpack to upload sourcemaps. Once you configure next.config.js to produce the sourcemaps, you just have to add the config variables and the buildpack.

I did this to make it seamless across my node projects.

Read more here if your interested. I included a Next.js specific example.
https://github.com/WebGrind/buildpack-sentry-sourcemaps

[devcorpio]

@khrome83 @arunoda @timneutkens

https://github.com/devcorpio/next-webpack-issue/blob/master/next.config.js

I identified a symptom that can generate the weird behavior.

Without sentry-webpack-plugin:

yarn build
yarn start

Generates .next/bundles and .next/dist This behavior is correct.

With sentry-webpack-plugin:

`/* eslint-disable import/no-extraneous-dependencies */
const SentryPlugin = require('@sentry/webpack-plugin');

module.exports = {
// Webpack configuration
webpack: (config, { dev, buildId, isServer }) => {
if (!dev && !isServer) {
config.devtool = 'source-map'; // eslint-disable-line no-param-reassign
config.plugins.push(new SentryPlugin({
release: '1',
include: './.next',
urlPrefix: ~/_next/${buildId}/,
}));
}

return config;

},
};
`

yarn build
yarn start

With && !isServer Generates ONLY .next/dist/bundles
With && isServer Generates ONLY .next/bundles
Using only if (!dev) { doesn't generate nothing. Only .next/dist/main file.

This behavior is the problem, that generates the issue that @coluccini said

Any ideas? :)

[khrome83]

The only thing I did was make sure isServer was set to true to add the plugin and that dev was false.

I did not notice this behavior at all.

--

Zane MIlakovic
InsideRx.com
m: 410.618.7727

On Feb 19, 2018, 8:11 AM -0600, Alberto Delgado Roda [e-mail], wrote:

@khrome83 @arunoda @timneutkens
I identified a symptom that can generate the weird behavior.
Without sentry-webpack-plugin:
yarn build
yarn start
Generates .next/bundles and .next/dist. This behavior is correct.
With sentry-webpack-plugin:
yarn build
yarn start
Generates ONLY .next/dist. This behavior is incorrect. That provoke, that client-side doesn't work as my peer @coluccini said.
Any ideas? :)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[devcorpio]

@khrome83

Our dependencies versions are:

{
"name": "active-class-name",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"author": "Remy Sharp [e-mail]",
"dependencies": {
"sentry/webpack-plugin": "^1.3.2",
"next": "^5.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"license": "ISC"
}

You can see the details here:

https://github.com/devcorpio/next-webpack-issue.

[khrome83]

@devcorpio - I think the issue is that you are using the Sentry plugin from the client. I believe the plugin only works from WebPack as part of a build process, not in the universal way WebPack is currently utilized in Next.js v5.

Try this -

const SentryPlugin = require('@sentry/webpack-plugin');
const git = require('git-rev-sync');
const { SOURCE_VERSION } = process.env;

module.exports = {
  // Webpack configuration
  webpack: (config, { dev, buildId, isServer }) => {
    if (!dev) {
       config.devtool = 'source-map'; // eslint-disable-line no-param-reassign
    }

    if (!dev && isServer) {
      config.plugins.push(new SentryPlugin({
        release: process.env.SOURCE_VERSION || git.log(),
        include: './.next',
        urlPrefix: `~/_next/${buildId}/`,
      }));
    }

    return config;
  },
};

SOURCE_VERSION is provided to me by a Heroku. You may not have a equivalent, but git.log() can provide the same information assuming you have the repo. Otherwise you will need to eject the value of git.log() into a enviroment config.

[devcorpio]

@khrome83 thanks for your quick answer. Unfortunately, after execute "yarn build", still only creates .next/bundles, but doesn't create .next/dist/bundles.

From my point of view (my knowledge of how works webpack and nextjs internally is basic), I think it is weird that behavior.

• Why without use the plugin, create the both folders?(the normal behavior)

• Why using !dev && isServer creates .next/bundles, but not .next/dist/bundles?

• Why using !dev && !isServer creates .next/dist/bundles, but not .next/bundles?
• Why using !dev doesn't create anything?

Seems that the process is cancelled and doesn't finish correctly. Using console log inside of the function show us that the console.log is executed two times in that function. Maybe the SentryPlugin async behavior provoke that weird issue?, does that can affect to the whole build process?

[formatlos]

it's rather an issue in the sentry-webpack-plugin than in next. They injecting code into the entries but don't support dynamic entry. I already filed a PR https://github.com/getsentry/sentry-webpack-plugin/pull/33. Until it's getting merged you can use my fork yarn add git+https://github.com/formatlos/sentry-webpack-plugin.git#add-dynamic-entry-support

[timneutkens]

I'm going to close this as the with-sentry example was updated.