Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(nextjs): Match loader files exactly #6013

Merged
merged 2 commits into from Oct 25, 2022

Conversation

lforst
Copy link
Member

@lforst lforst commented Oct 21, 2022

Probably resolves #6012

I couldn't really reproduce #6012 but I noticed that we're applying our proxy loader to JSON files because our loader regex matches on .js and .js happens to be a substring of .json.

In this PR we attempt to fix this by making the loader RegExp an exact match.

Comment on lines 97 to 99
`^${escapeStringForRegex(projectDir)}${
shouldIncludeSrcDirectory ? '/src' : ''
}/pages/.*\\.(${pageExtensionRegex})`,
}/pages/.*\\.(${pageExtensionRegex})$`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have to admit this feels a bit risky because of file path shenanigans (windows paths?). I am open to other suggestions.

Making it an exact match should be fine in combination with our query-string import approach because we don't want to process these files anyways. Maybe we can even remove the exit condition (if (this.resourceQuery.includes('__sentry_wrapped__')) return userCode;)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have two regex - one for windows and one for Unix if this one does not support windows imo

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh, right, I always forget about windows path separators. Good call, @AbhiPrasad.

I don't think we need to do it in two regexes, though. We actually already know the pages directory, so I claim we can do this:

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah perfect, let’s do that then!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Katie that change gets rid of the solution for the src folder problematic: #5978

I like however that we build the path to the Next.js pages before we pass it to escapeStringForRegex() so I opted for a hybrid approach. 43f2823

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Katie that change gets rid of the solution for the src folder problematic: #5978

If their pages folder is in a src folder, that should be included in pagesDir, no?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we shouldn't include both! It's either pages or src/pages.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I mean: If a user has their pages in /pages, then that will be reflected in the value of pagesDir. If a user has their pages in src/pages, that will also be reflected in the value of pagesDir. Either way, we don't need to recalculate the value.

If I do

console.log(pagesDir);
console.log(pagesDirectory);

depending on whether or not I'm using a src directory I get either

/Users/Katie/Documents/Sentry/test-apps/next-js-test/src/pages
/Users/Katie/Documents/Sentry/test-apps/next-js-test/src/pages

or

/Users/Katie/Documents/Sentry/test-apps/next-js-test/pages
/Users/Katie/Documents/Sentry/test-apps/next-js-test/pages

Update: Opened #6044 to remove the extra calculation.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry got confused and didn't realize that pagesDir was a thing. I'll approve that PR!

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's get this in to unblock users who break, we can re-examine the regex stuff later though.

@github-actions
Copy link
Contributor

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 19.48 KB (-0.02% 🔽)
@sentry/browser - ES5 CDN Bundle (minified) 60.31 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 18.11 KB (-0.01% 🔽)
@sentry/browser - ES6 CDN Bundle (minified) 53.64 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 19.85 KB (0%)
@sentry/browser - Webpack (minified) 65.05 KB (0%)
@sentry/react - Webpack (gzipped + minified) 19.88 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 45.8 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 26.26 KB (-0.01% 🔽)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 24.64 KB (-0.01% 🔽)

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I like the logic re-arrange

@@ -86,18 +86,17 @@ export function constructWebpackConfigFunction(
// if `pages` is present in the root directory"
// - https://nextjs.org/docs/advanced-features/src-directory
const shouldIncludeSrcDirectory = !fs.existsSync(path.resolve(projectDir, 'pages'));
const pagesDirectory = shouldIncludeSrcDirectory // We're intentionally not including slashes in the paths because we wanne let node do the path resolution for Windows
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Less than l: I would remove the comment, don’t think that context is needed.

Suggested change
const pagesDirectory = shouldIncludeSrcDirectory // We're intentionally not including slashes in the paths because we wanne let node do the path resolution for Windows
const pagesDirectory = shouldIncludeSrcDirectory

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm gonna leave it just so there's some awareness around windows in that file. That was the original reason I even left a comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Build fails since proxyLoader parses non-Sentry JSON file
3 participants