Replies: 2 comments 3 replies
-
|
I used the instructions from Vite+Cloudflare documentation https://remix.run/docs/en/main/future/vite#augmenting-load-context I'm not sure how your If See Epic Stack https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/031-imports.md [Fixed doc link] // package.json
{
"imports": {
"#*": "./*"
},
}import { dispatch } from "#app/dipatch";// load-context.ts
import { type AppLoadContext } from "@remix-run/cloudflare";
import { type PlatformProxy } from "wrangler";
import { dispatch } from "./app/dipatch";
// When using `wrangler.toml` to configure bindings,
// `wrangler types` will generate types for those bindings
// into the global `Env` interface.
// Need this empty interface so that typechecking passes
// even if no `wrangler.toml` exists.
interface Env {}
type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
declare module "@remix-run/cloudflare" {
interface AppLoadContext {
cloudflare: Cloudflare;
extra: string; // augmented
dispatch: typeof dispatch;
}
}
type GetLoadContext = (args: {
request: Request;
context: { cloudflare: Cloudflare }; // load context _before_ augmentation
}) => AppLoadContext;
// Shared implementation compatible with Vite, Wrangler, and Cloudflare Pages
export const getLoadContext: GetLoadContext = ({ context }) => {
return {
...context,
extra: "stuff",
dispatch,
};
};// app/dispatch.ts
export function dispatch(message: string) {
return message;
}// appp/routes/test.tsx
export function loader({ context }: LoaderFunctionArgs) {
const { extra, dispatch } = context;
console.log("dispatch", dispatch("hello world"));
return json({ extra });
} |
Beta Was this translation helpful? Give feedback.
-
|
@kiliman thank you very much for the support! I do appreciate it 🙏 I've been looking into Node's path alias (First time I'm doing it via node). I don't know where I'm screwing up as I'm having the following issue:
Package.json {
"name": "narrate-flow",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": " remix vite:build",
"dev": "remix vite:dev",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "remix-serve ./build/server/index.js",
"typecheck": "tsc",
"extract": "lingui extract --clean",
"compile": "lingui compile",
"prisma:generate": "prisma generate",
"deploy": "wrangler pages deploy ./build/client",
"typegen": "wrangler types"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.540.0",
"@aws-sdk/lib-storage": "^3.540.0",
"@aws-sdk/s3-request-presigner": "^3.540.0",
"@lingui/core": "^4.7.2",
"@lingui/macro": "^4.7.2",
"@lingui/react": "^4.7.2",
"@prisma/client": "5.11.0",
"@remix-run/cloudflare": "^2.8.1",
"@remix-run/cloudflare-pages": "^2.8.1",
"@remix-run/react": "^2.8.1",
"@remix-run/serve": "^2.8.1",
"@supabase/supabase-js": "^2.41.1",
"@tailwindcss/typography": "^0.5.10",
"clsx": "^2.1.0",
"daisyui": "^4.8.0",
"form-data": "^4.0.0",
"http-status-codes-by-hutu": "^0.0.5",
"isbot": "^4.1.0",
"mailgun.js": "^10.2.1",
"miniflare": "^3.20240320.1",
"module-alias": "^2.2.3",
"oxide.ts": "^1.1.0",
"prisma": "^5.11.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"remix-params-helper": "^0.5.1",
"zod": "^3.22.4"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20240329.0",
"@lingui/cli": "^4.7.2",
"@lingui/conf": "^4.7.2",
"@lingui/vite-plugin": "^4.7.2",
"@remix-run/dev": "^2.8.1",
"@remix-run/node": "^2.8.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"autoprefixer": "^10.4.19",
"babel-plugin-macros": "^3.1.0",
"eslint": "^8.38.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"node-fetch": "^3.3.2",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.1",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-plugin-babel-macros": "^1.0.6",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.41.0"
},
"engines": {
"node": ">=18.0.0"
},
"imports": {
"#server/*": "./app/.server/*",
"#atoms/*": [
"./app/components/atoms/*"
],
"#molecules/*": [
"./app/components/molecules/*"
],
"#organisms/*": [
"./app/components/organisms/*"
],
"#templates/*": [
"./app/components/templates/*"
],
"#utils/*": [
"./app/utils/*"
],
"#types/*": [
"./app/types/*"
],
"#remix-server": [
"./app/types/remix.ts"
]
},
"_moduleAliases": {
"#server/*": "./app/.server/*",
"#atoms/*": "./app/components/atoms/*",
"#molecules/*": "./app/components/molecules/*",
"#organisms/*": "./app/components/organisms/*",
"#templates/*": "./app/components/templates/*",
"#utils/*": "./app/utils/*",
"#types/*": "./app/types/*",
"#remix-server": "./app/types/remix.ts",
"~/*": "./app/*"
}
}
I even installed Here's my vite.config.ts: import "module-alias/register";
import {
vitePlugin as remix,
cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { lingui } from "@lingui/vite-plugin";
import macrosPlugin from "vite-plugin-babel-macros";
import tailwindcss from "tailwindcss";
import { getLoadContext } from "./load-context";
export default defineConfig({
plugins: [
{
...tsconfigPaths(),
enforce: "pre",
},
remixCloudflareDevProxy({
getLoadContext,
}),
remix(),
macrosPlugin(),
lingui(),
],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
});My updated import { type AppLoadContext } from "@remix-run/cloudflare";
import { type PlatformProxy } from "wrangler";
import { dispatchWithContext } from "#server/shared/config";
// When using `wrangler.toml` to configure bindings,
// `wrangler types` will generate types for those bindings
// into the global `Env` interface.
// Need this empty interface so that typechecking passes
// even if no `wrangler.toml` exists.
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface Env {}
type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
declare module "@remix-run/cloudflare" {
interface AppLoadContext {
cloudflare: Cloudflare;
dispatch: ReturnType<typeof dispatchWithContext>;
}
}
type GetLoadContext = (args: {
request: Request;
context: { cloudflare: Cloudflare }; // load context _before_ augmentation
}) => AppLoadContext;
// Shared implementation compatible with Vite, Wrangler, and Cloudflare Pages
export const getLoadContext: GetLoadContext = ({ context }) => {
return {
...context,
dispatch: dispatchWithContext(),
};
};It's getting stuck on the first aliased import: Here's my file tree:
|
Beta Was this translation helpful? Give feedback.
-
|
@kiliman I Just wanted to say that I nuked (removed) all the path aliases, and now it's working!!! If anyone in the future stumbles upon this post, please, do not barrel the exports (unless they're used together). Ex: // index.ts
export * from "./commands/CreateUserWithPasswordCommand.ts
export * from "./commands/ConnectRepoWithUserCommand.ts"As this can kill tree shaking and bundler splitting. |
Beta Was this translation helpful? Give feedback.
-
|
I agree. I would rather be explicit so there are no surprises. The only alias I would have is the |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Thank you very much!!! 🤗 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi everyone 🤗
I'm spearheading a project with Remix V2. First of all, thanks for this fantastic framework. It's a productivity powerhouse!
I posted this question in Stack Overflow:
https://stackoverflow.com/questions/78260782/injecting-custom-context-in-remix-v2-resolving-path-aliases-before-running-vi
But I wanted to keep this simple here.
I use Remix V2 with the default Vite builder and Cloudflare as the backend.
How or where can I inject a custom context?
Note that the custom context will include a dispatcher with a mediator to call commands and queries. I've had difficulties registering directly in Vite as it has path aliases, and it runs before Vite can do any transformations (See Stack Overflow question for more info)
Beta Was this translation helpful? Give feedback.
All reactions