vikejs / vike

🔨 Flexible, lean, community-driven, dependable, fast Vite-based frontend framework.

Home Page:https://vike.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Path aliasing doesn't work in `+config.ts` files

w7it opened this issue · comments

Description

I'm trying to use absolute import with path aliasing that I successfully enabled (it works properly in regular components):

import type { Config } from 'vike/types';
import { SITE_NAME } from '~/constants.js';

export default {
    title: SITE_NAME
} satisfies Config;

But it doesn't work in +config file:

> vite build

error during build:
Error: Cannot find package '~' imported from /src/pages/_error/[build-v1zeowuwiuuj]+config.ts.mjs
    at new NodeError (node:internal/errors:406:5)
    at packageResolve (node:internal/modules/esm/resolve:789:9)
    at moduleResolve (node:internal/modules/esm/resolve:838:20)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

As a workaround I've switched to relative imports, but itsnot convenient honestly :)

commented

Define your path aliases at package.json#imports as described in https://vike.dev/path-aliases.

Also see #1547.

@brillout thanks, but it doesn't work :(

I've added imports like this:

  "imports": {
    "#*": "./src/*"
  },

and change my import to this:

import { SITE_NAME } from '#constants.js';

VScode resolves it perfectly, BUT vike doesn't:

9:47:23 AM [vike][config] Failed to execute /pages/+config.ts because:
Error: Cannot find module '/src/constants.js' imported from /src/pages/[build-m63g42x4u3ec]+config.ts.mjs
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:233:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  url: '/src/constants.js',
  code: 'ERR_MODULE_NOT_FOUND'

if I change extension to .mjs vike works well! BUT VScode doesn't ¯\_(ツ)_/¯

import { SITE_NAME } from '#constants.mjs';

maybe you know how to fix it? I've found only one solution: rename constants.ts to constants.mjs and enable allowJs in typescript

commented

Can you create a minimal reproduction?