tiny gale
I've got a client side component and I'm trying to use Walmart's JSONtoSDL package and unfortunately it has a conditional where it checks process.env.NODE_DEBUGGER which errors the component since it's running client side
Are there any workarounds to this?
tawny pawn
If you really need to use that library on the client side and there is no way to make it not go through that line than you can just provide those variables:
window.process = {env: {}};
Anything that tries to access an environment variable from process.env will behave as if the variable was not set
If you want to expose some environment variable to the client side you can expose it to astro build (or to the server in case of SSR) with the prefix PUBLIC_ and then refer to it when building that object:
window.process = {env: {
SOME_ENV: import.meta.env.PUBLIC_SOME_ENV,
}};
Remeber that anything that goes to the client is completely public, so never add something secret
tiny gale
This doesn't appear to be working.
I'm importing the package at the top of the component, and JUST importing the package throws the error.
I then tried moving it to a subcomponent so that maybe the window would be available at that point (and my main component is currently client:only) and I'm still getting the error that process isn't defined (in the browser console, i can run process and window.process and get the object back with the code you sent, but it's not recognizing it in the package import
Subcomponent:
export default function SubComponent() {
window.process = {env: {}}
console.log(window)
return (<>
<h1>hello</h1>
</>)
}
Main component
import { useState } from "react";
import SubComponent from "@components/SubComponent";
export default function JsonToSDL() {
window.process = { env: {} };
console.log(window);
const [schema, setSchema] = useState("");
console.log(schema);
return (
<>
<h1>hello</h1>
<SubComponent />
<label htmlFor="source" className="text-sm block mb-1 font-medium">
Input JSON *
</label>
<textarea
onChange={(e) => {
console.log(e.target.value);
convertStringToSDL(e.target.value);
setSchema(e.target.value);
}}
value={schema}
className="text-[#2D3A5F] h-[250px] md:h-[500px] text-sm leading-6 font-code p-4 border border-[#CED5E1] rounded-lg w-full focus:border-[#5B4CFF] focus:outline-none mb-4"
/>
</>
);
}
MDX page primarily just has
<JsonToSDL client:only />
on it
tawny pawn
Right, two points here:
window will only work on the clientprocessIt seems process is accessed when you import the package, in that case you need to add it to window before importing.
Vite will reorder your imports anyway, so one thing you could do is add the hack in a <script is:inline> in the Astro component that uses your React component, then it will run before.
You can also add it to your layout so it works everywhere
tiny gale
Got this working locally (though it required some finessing the structure)
Now, the build fails because Vite is worried it might "break the application at runtime"
So working on figuring out adding an exception in the config with vite.rollupOptions
tiny gale
error [vite]: Rollup failed to resolve import "@components/JsonToSDL.jsx" from "/vercel/path0/src/content/docs/tools/json-to-sdl.mdx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
Error: [vite]: Rollup failed to resolve import "@components/JsonToSDL.jsx" from "/vercel/path0/src/content/docs/tools/json-to-sdl.mdx".
I've tried doing what it mentions, but then the build fails because it can't find the file.
The .jsx file is a React component and it's being used as client:only
tiny gale
I haven't been able to solve this issue yet. I've tried a few different methods. Also, can't get this to error locally, so each test is a deployment which is tough to test on.
Any thoughts on a potential solution?
sand compass