Hydration error: import_url.fileURLToPath is not a function

[vixalien]

Provide a general summary of the issue here

When using the styles macro in S2, I get this error: import_url.fileURLToPath is not a function

🤔 Expected Behavior?

The error should not be there

😯 Current Behavior

The style macro works correctly on node, but doesn't work on the client, because of a hydration error.

It's caused by importing modules such as fs, path, url, etc... which aren't available on the browser. Here's the trace:

TypeError: import_url.fileURLToPath is not a function
    <anonymous> http://localhost:3000/node_modules/.vite/deps/@react-spectrum_s2_style.js?v=6db6415d:53

💁 Possible Solution

The issue seems to be here:

react-spectrum/packages/@react-spectrum/s2/style/style-macro.ts

Line 18 in daafdd5

const json = JSON.parse(fs.readFileSync(__dirname + '/../package.json', 'utf8'));

Where you import the JSON file manually using fs, etc... instead of importing the package.json normally, as done for properties.json done just 2 lines above.

🔦 Context

No response

🖥️ Steps to Reproduce

Just install and use react spectrum in vite

Version

1.1.0

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

Linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[vixalien]

FYI, here's my patch file (generated with pnpm patch) for solving this issue, #9693, and #9692:

diff --git a/style/dist/style-macro.mjs b/style/dist/style-macro.mjs
index 4162fdcd28211c2f2443c05275aa03c61a1179f8..860acaf90e46e3e4cc691b507cba9196d5990832 100644
--- a/style/dist/style-macro.mjs
+++ b/style/dist/style-macro.mjs
@@ -1,4 +1,7 @@
+import $5VBDY$propertiesmjs from "./properties.mjs";
+import $5VBDY$propertiesmjs1 from "./properties.mjs";
 import $5VBDY$propertiesmjs2 from "./properties.mjs";
+
 import {resolve as $5VBDY$resolve, dirname as $5VBDY$dirname} from "path";
 import {fileURLToPath as $5VBDY$fileURLToPath} from "url";
 import $5VBDY$fs from "fs";
@@ -13,14 +16,10 @@ import $5VBDY$fs from "fs";
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ 
-
-
+ */
 
+import $e3c5b37c91268204$var$json from "../../package.json" with {type: "json"}
 
-var $e3c5b37c91268204$var$$parcel$__dirname = $5VBDY$resolve($5VBDY$dirname($5VBDY$fileURLToPath(import.meta.url)), "..");
-// Postfix all class names with version for now.
-const $e3c5b37c91268204$var$json = JSON.parse((0, $5VBDY$fs).readFileSync($e3c5b37c91268204$var$$parcel$__dirname + '/../package.json', 'utf8'));
 const $e3c5b37c91268204$var$POSTFIX = $e3c5b37c91268204$var$json.version.includes('nightly') ? $e3c5b37c91268204$var$json.version.match(/-nightly-(.*)/)[1] : $e3c5b37c91268204$var$json.version.replace(/[0.]/g, '');
 class $e3c5b37c91268204$export$d03475ad9df06cd2 {
     constructor(property, toCSS){
@@ -158,7 +157,7 @@ function $e3c5b37c91268204$export$25d302a5b900a763(theme) {
         // We also check if this is globalThis, which happens in non-strict mode bundles.
         // Also allow style to be called as a normal function in tests.
         // @ts-ignore
-        if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The style macro must be imported with {type: "macro"}.');
+        // if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The style macro must be imported with {type: "macro"}.');
         // Generate rules for each property.
         let rules = new Map();
         let values = new Map();

[devongovett]

The style macro should be run at build time (as a macro) not in the browser. You commented out the error message that explained this. Make sure you installed unplugin-parcel-macros and imported with {type: 'macro'}. See the docs here: https://react-spectrum.adobe.com/getting-started#framework-setup

[vixalien]

The style macro should be run at build time (as a macro) not in the browser.

Yes, I am aware. I commented out the check because it seems it doesn't work well on vite (maybe it works on parcel). The check itself is a bit cryptic, and I'm unsure of how it works....

[devongovett]

It works. See here for another example: https://github.com/adobe/react-spectrum/tree/main/examples/s2-vite-project

[vixalien]

Okay, I'll check that out later, but that's not the main issue. The package.json should probably be loaded with the with {type: "json"} instead of being manually loaded from the fs. I wanted to create a PR, but getting react-spectrum to build locally was too resource-intensive

[vixalien]

FYI, the s2-vite-project doesn't even run:

Error:   Failed to scan for dependencies from entries:
  /home/alien/sites/react-spectrum/examples/s2-vite-project/index.html

  ✘ [ERROR] Failed to resolve entry for package "react-stately". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]