#Vite path aliases

1 messages · Page 1 of 1 (latest)

trim forge
#

Hi, I'm trying to configure vite path alias. So the imports in ./load-context are configured correctly.

I've tried adding path alias, but it doesn't seem to be working and npm run dev fails with Cannot find package '~' imported

Here is my vite.config.ts

import { getLoadContext } from "./load-context";
import path from 'path';
export default defineConfig({
  resolve: {
    alias: {
      '~/': path.resolve(__dirname, './app/'),
    },
  },
  plugins: [Inspect(), remixCloudflareDevProxy({ getLoadContext }), mdx({
    remarkPlugins: [
      remarkFrontmatter,
      remarkMdxFrontmatter,
    ],
  }), remix(), tsconfigPaths()],
  server: {
    port: 3000,
    fs: {
      // Restrict files that could be served by Vite's dev server.  Accessing
      // files outside this directory list that aren't imported from an allowed
      // file will result in a 403.  Both directories and files can be provided.
      // If you're comfortable with Vite's dev server making any file within the
      // project root available, you can remove this option.  See more:
      // https://vitejs.dev/config/server-options.html#server-fs-allow
      allow: ["app"],
    },
  },
});

The paths in my tsconfig.json

"paths": { "~/*": ["./app/*"] },

#

@tranquil sandal were you able to get this working?

surreal belfry
#

The load-context file doesn't actually get processed by Vite, so you can't rely on Vite-specific aliases for it. Vite is working on a new Environment API that we'll eventually use for CF that will solve this and vastly simplify things, but for now, the workaround is to not rely on Vite for anything within the load-context file

tranquil sandal
misty seal
#

I actually am slamming into this. I thought we could work around it, but it’s just leading to some odd code. I was actually playing with buildEnd appending getLoadContext out of entry.server.tsx onto the server.ts of the build only to realize I’m still in trouble in the vite config.

#

Was mostly attempting to put this import in the vite code path rather than outside. Gets pretty gnarly attempting to keep all the paths relative in a TS project with auto imports.

mystic turtle
#

vite.config.ts should not need a separate alias configuration. Remove it and it works fine on my end.

coarse jasper
misty seal
#

I'm going to throw this out there as it may have just worked for me. https://github.com/vitejs/vite/issues/5370#issuecomment-1824673761

The gist is using tsx as a node import loader which will pickup the local tsconfig and not yell any longer.

NODE_OPTIONS='--loader tsx/esm' pnpm dev // node 18
NODE_OPTIONS='--import tsx' pnpm dev // node 20
GitHub
`vite.config.ts` can't import untranspiled ts files from other pack...

Describe the bug If we import something from symlink and the importee is ts file. We counter a such error: failed to load config from /Users/zheeeng/Workspace/foo/bar/baz/vite.config.ts error when ...

#

I will point out that this won't solve getting access to Vite's build process, but it will allow use of alias'

mystic turtle
coarse jasper
mystic turtle
coarse jasper