@sentry/nextjs `transpileClientSDK` options not work in yarn berry workspace environment

[codemilli]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.15.0

Framework Version

12.3.1

Link to Sentry event

No response

Steps to Reproduce

1. In next.config.js, I added transpileClientSDK: true option for supporting old browser users.

Expected Result

Sentry source code is transpiled to ES5

Actual Result

Sentry source code is not transpiled to ES5

Additional Resources

• I made a sinppet you can try right away.
  • https://github.com/codemilli/yarn-workspace-sentry-bug-sinppet
• Instead of defining newExclude in nextjs/src/config/webpack.ts:117, below code is working for me (But I am not confident this code would work right in every places).

webpack: (config, options) => {
 config.module.rules.push({
 test: /\.+(js|jsx|mjs|ts|tsx)$/,
 use: options.defaultLoaders.babel,
 include: (filePath) => filePath.includes('@sentry'),
 type: 'javascript/auto',
 });
 return config;
},

References

• https://github.com/getsentry/sentry-javascript/pull/5472/files

[codemilli]

I think that @lobsterkatie might be interested 😃

[AbhiPrasad]

Hey thanks for writing in! @lobsterkatie is the expert on this so I'll leave her to dig in further, but will take a look! If you manage to figure something out before hand, PRs are welcome!

[rhavenz]

@codemilli Did you try to set the experimental.externalDir flag in next.config.js ?

[codemilli]

@codemilli Did you try to set the experimental.externalDir flag in next.config.js ?

Thank you for your comment, and it works !
I am not sure about reason so I think I should investigate why haha.

and I just wanna confirm that this is the right way to config.
cc. @lobsterkatie

[rhavenz]

@codemilli you can find answers here.

If you look at thoses files mentioned by @lobsterkatie, you can see that files outside of the root dir are filtered by the include rule unless you use the experimental.externalDir flag. This is the default behavior in nextjs.

[codemilli]

@rhavenz
Thanks for your comment :)
it means that in monorepo environments experimental.externalDir flag is required, right?

and the above code I wrote works well which even uses include, why the above code works without experimental.externalDir flag?

[rhavenz]

it means that in monorepo environments experimental.externalDir flag is required, right?

Yes

and the above code I wrote works well which even uses include, why the above code works without experimental.externalDir flag?

Because you are defining a new rule with your constraints and doesn't filter files outside of the root dir.

[codemilli]

@rhavenz I appreciate your comments : )
so I think it can be summarized as follows.

1. Next.js use webpack rules that does not include anything out of the its project root dir.
2. Sentry SDK follows the Next.js own webpack rules so that SDK cannot include or exclude files that is out side of a project.
3. However, If I define a new webpack rule without any constraints which Next.js webpack has, we can access the files out side of a project.
   • In another way, set experimetnal.externalDir true in Next.js config.

I think I can close thie issue with above information.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀