Upgrade prettier

[brophdawg11]

Trying to upgrade prettier to support import ... with syntax - we had to ignore an RSC integration file in 78b374b because it was breaking the format workflow.

Upgrading was simple, and it causes bunch of changes which seem harmless. I did have to set trailingComma:es5 to get the minimal set of changes (~100 files instead of 400-500 with the new default all option). We can do that in this PR if we want or do it in a separate PR.

However, the latest version of prettier now fails with a new syntax error which I think we would need to add "type": "module" to package.json to support - and that feels like a bigger undertaking. Our other option is to add this file to the .eslintignore file but that feels risky since we may miss syntax errors in there?

packages/react-router-dev/vite/static/refresh-utils.cjs
[error] packages/react-router-dev/vite/static/refresh-utils.cjs: SyntaxError: import.meta may appear only with 'sourceType: "module"' (160:1)
[error]   158 | window.__reactRouterRouteModuleUpdates = new Map();
[error]   159 |
[error] > 160 | import.meta.hot.on("react-router:hmr", async ({ route }) => {
[error]       | ^
[error]   161 |   window.__reactRouterClearCriticalCss();
[error]   162 |
[error]   163 |   if (route) {

[changeset-bot]

⚠️ No Changeset found

Latest commit: cb9eb72

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ngbrown]

@brophdawg11

Since using import.meta outside of a module (including direct eval() within a module) is a syntax error, would renaming refresh-utils.cjs to refresh-utils.mjs be an option? It looks like the usage of that file are just reading the file contents from the file system. reactRouterVitePlugin concats the contents together with another file and exposes the result as a ES Modules style export.

I did the rename locally and tests in integration\vite-hmr-hdr-test.ts passed.

[brophdawg11]

We'd have to check with @pcattori - I think that's a CJS file specifically because it gets copied directly to the dist folder for use with HMR/HDR

[ngbrown]

@brophdawg11

We'd have to check with @pcattori - I think that's a CJS file specifically because it gets copied directly to the dist folder for use with HMR/HDR

I alluded to this in my comment, but if you search the code base, the refresh-utils.cjs file is only copied, and then from the copy it is concatenated into an ES Module text string (with an export default ...) within reactRouterVitePlugin. So it's never used for a Common JS context.

[pcattori]

@ngbrown is correct; refresh-utils.cjs only ever gets executed in the browser after getting concatenated into an ES module. Probably should have been .mjs from the start though I think we might have just copied the .cjs from @vitejs/plugin-react when we did the initial Vite work.

[brophdawg11]

oh ok awesome - I'm going to hold off on merging this until I land some in-progress JSDoc updates since they're probably goin to conflict a bunch and I'll re-run the prettier formatting from scratch in here once I land those in dev

[github-actions]

🤖 Hello there,

We just published version 7.7.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!