Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10239-tests-1709145080838.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Tests
---

Suppress Rollup warnings during Cypress tests ([#10239](https://github.com/linode/manager/pull/10239))
26 changes: 26 additions & 0 deletions packages/manager/cypress/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,36 @@
import react from '@vitejs/plugin-react-swc';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Are there any tradeoffs to using swc -- i.e., build differences between e2e and prod?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

No, but only because Cloud also uses @vitejs/plugin-react-swc!

I think we opted to use that for performance reasons (swc is fast), and so I used it here too, but both @vitejs/plugin-react and @vitejs/plugin-react-swc contain the exact same log suppression logic (so either would really work here for the purpose of this ticket).

One thing to note is that this Vite config is only used when building the Cypress *.spec.ts files -- Cloud itself is always built using the Vite config in packages/manager, so while consistency between the configs is good, we're not at risk of ending up in a situation where e.g. Cloud is built differently when running our Cypress tests, resulting in bugs being present (or absent) in our tests but not in Production or vice-versa.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ahh didn't know that. Thanks for the explanation.

import svgr from 'vite-plugin-svgr';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this package related?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I imported both of these plugins to mirror what we're doing in Cloud's Vite config.

plugin-react-swc is really the crucial one, but I opted to include svgr as well for two reasons:

  • As a safeguard in case we ever import a file in src from within a Cypress test, which in turn imports an SVG file (or imports a module which imports a module which imports an SVG, etc.). I would expect that to either cause a warning to get logged, or possibly even prevent the spec from building
  • I figure since it isn't harmful and it makes us more consistent with Cloud's config, why not πŸ€·β€β™‚οΈπŸ˜…

import { defineConfig } from 'vite';
import { URL } from 'url';

// ESM-friendly alternative to `__dirname`.
const DIRNAME = new URL('.', import.meta.url).pathname;

export default defineConfig({
plugins: [react(), svgr({ exportAsDefault: true })],
build: {
rollupOptions: {
// Suppress "SOURCEMAP_ERROR" warnings.
// This is necessary because MUI contains React SSR "use client" module-level
// directive, and Rollup does not support module-level directives.
// `vite-plugin-react` and `vite-plugin-react-swc` both silence this warning,
// but the inability to handle module-level directives also causes Sourcemap
// output errors. The warnings for this are not suppressed by Vite plugins,
// so we need to suppress them ourselves.
//
// See also:
// - https://github.com/vitejs/vite-plugin-react/blob/7f53c63/packages/plugin-react/src/index.ts#L303
// - https://github.com/vitejs/vite-plugin-react-swc/blob/53ecc44/src/index.ts#L262
// - https://github.com/rollup/rollup/issues/4699#issuecomment-1299770973
// - https://github.com/vitejs/vite/issues/15012#issuecomment-1815854072
onwarn(warning, defaultHandler) {
if (warning.code === 'SOURCEMAP_ERROR') {
return;
}
Comment on lines +27 to +29

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is there any reason not to suppress MODULE_LEVEL_DIRECTIVE the same way?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah, the MODULE_LEVEL_DIRECTIVE warning is suppressed by the @vitejs/plugin-react-swc plugin. We could manually suppress it and drop the React and SVGR plugins, but I opted to do it this way since we already have these dependencies installed and we're importing more and more src code from the Cypress tests.

I appreciate these good questions, @hkhalil-akamai!

defaultHandler(warning);
},
},
},
resolve: {
alias: {
'@src': `${DIRNAME}/../src`,
Expand Down