How to make sure a function run on the browser before other scripts? #7591
Replies: 2 comments 2 replies
-
|
Remix route modules are setup via inline <!-- preload the modules -->
<link rel="modulepreload" href="/build/entry.client-OXIIAL2C.js"/>
<link rel="modulepreload" href="/build/_shared/chunk-ZWGWGGVF.js"/>
<link rel="modulepreload" href="/build/_shared/chunk-GIAAE3CH.js"/>
<link rel="modulepreload" href="/build/_shared/chunk-VTZRL4E2.js"/>
<!-- setup the remix context -->
<script>window.__remixContext = {...};</script>
<!-- bootstrap the remix client -->
<script type="module" async="">
import "/build/_shared/chunk-4E2RSDIY.js";
import "/build/manifest-DCB7092E.js";
import * as route0 from "/build/root-KTRVIYNK.js";
import * as route1 from "/build/routes/_index-J3K4MZZ2.js";
window.__remixRouteModules = {"root":route0,"routes/_index":route1};
// execute entry.client module here
import("/build/entry.client-OXIIAL2C.js");
</script>If you need to inject code into this process, you'll need to add a // app/root.tsx
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<script
dangerouslySetInnerHTML={{
__html: `console.log('run before bootstrap')`,
}}
/>
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Yes, but an inline script would be outside the build system, but I actually need to do that within the build system. For example, you cannot refer to the "some-npm-pkg" shared with the rest of the app written in typescript and bundled in the inline script. |
Beta Was this translation helpful? Give feedback.
-
|
That's fine. I'm just telling you how Remix works. I hope you'll be able to find a solution to your problem. |
Beta Was this translation helpful? Give feedback.
-
|
It seems if Remix forbids us from touching the esbuild, the only way is use import { extendZodWithMobxZodForm } from "@monoid-dev/mobx-zod-form";
import { z } from "zod";
extendZodWithMobxZodForm(z);
export * from "zod";Then add a plugin using const { withEsbuildOverride } = require("remix-esbuild-override");
/**
* Define callbacks for the arguments of withEsbuildOverride.
* @param option - Default configuration values defined by the remix compiler
* @param isServer - True for server compilation, false for browser compilation
* @param isDev - True during development.
* @return {EsbuildOption} - You must return the updated option
*/
withEsbuildOverride((option) => {
option.plugins = [
{
name: "patch-zod",
setup(build) {
build.onResolve({ filter: /^zod$/ }, async ({ path, importer }) => {
if (!importer.endsWith("/patched-zod.ts")) {
return {
path: require.resolve("./src/utils/patched-zod.ts"),
external: false,
sideEffects: true,
};
}
});
},
},
...(option.plugins ?? []),
];
option.treeShaking = false;
return option;
});
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
// ...
};Note that the plugin must be the first one so that the package you want to package, e.g. But I don't think using |
Beta Was this translation helpful? Give feedback.
-
I'm required to run a setup function to monkey patch a package, but the same stuff applies to other stuff, like polyfill.
Now I am running it on
entry.client.ts.Inside
utils/setup, it actually runs thesetupfunction as a side-effect. I export the setup function and run it again to avoid it from being treeshaken.However, in my route modules, it seems the route module is evaluated before
setupfunction. So is there anyway to make sure the setup function runs before any modules, or at least those route modules?Thanks in advance.
Beta Was this translation helpful? Give feedback.
All reactions