vike 0.4.168-commit-7678a7d → 0.4.168-commit-42406a9

package/dist/esm/node/plugin/plugins/importUserCode/index.js

@@ -9,7 +9,7 @@ import { isVirtualFileIdImportUserCode } from '../../../shared/virtual-files/vir
 import { vikeConfigDependencies, reloadVikeConfig, isVikeConfigFile } from './v1-design/getVikeConfig.js';
 import pc from '@brillout/picocolors';
 import { logConfigInfo, clearLogs } from '../../shared/loggerNotProd.js';
-import { getFilePathResolved } from '../../shared/getFilePath.js';
+import { getModuleFilePath } from '../../shared/getFilePath.js';
 function importUserCode() {
     let config;
     let configVike;
@@ -122,10 +122,7 @@ function isVikeConfigModule(filePathAbsoluteFilesystem) {
 }
 function reloadConfig(filePath, config, op) {
     {
-        const { filePathToShowToUserResolved } = getFilePathResolved({
-            filePathAbsoluteFilesystem: filePath,
-            userRootDir: config.root
-        });
+        const filePathToShowToUserResolved = getModuleFilePath(filePath, config);
         const msg = `${op} ${pc.dim(filePathToShowToUserResolved)}`;
         logConfigInfo(msg, 'info');
     }

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getConfigValuesSerialized.d.ts

@@ -1,5 +1,5 @@
 export { getConfigValuesSerialized };
 export { assertConfigValueIsSerializable };
-import type { ConfigEnvInternal, ConfigValueSource, DefinedAt, PageConfigBuildTime } from '../../../../../shared/page-configs/PageConfig.js';
+import type { ConfigEnvInternal, ConfigValueSource, DefinedAtData, PageConfigBuildTime } from '../../../../../shared/page-configs/PageConfig.js';
 declare function getConfigValuesSerialized(pageConfig: PageConfigBuildTime, isEnvMatch: (configEnv: ConfigEnvInternal, configValueSource?: ConfigValueSource) => boolean): string;
-declare function assertConfigValueIsSerializable(value: unknown, configName: string, definedAt: DefinedAt): void;
+declare function assertConfigValueIsSerializable(value: unknown, configName: string, definedAtData: DefinedAtData): void;

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getConfigValuesSerialized.js

@@ -9,7 +9,7 @@ import { getConfigValueSourcesNotOverriden } from '../../../shared/getConfigValu
 function getConfigValuesSerialized(pageConfig, isEnvMatch) {
     const lines = [];
     Object.entries(pageConfig.configValuesComputed).forEach(([configName, configValuesComputed]) => {
-        const { value, configEnv } = configValuesComputed;
+        const { configEnv } = configValuesComputed;
         if (!isEnvMatch(configEnv))
             return;
         // configValeSources has higher precedence
@@ -17,9 +17,11 @@ function getConfigValuesSerialized(pageConfig, isEnvMatch) {
             return;
         const configValue = pageConfig.configValues[configName];
         assert(configValue);
-        const { definedAt } = configValue;
-        const valueSerialized = getConfigValueSerialized(value, configName, definedAt);
-        serializeConfigValue(lines, configName, { definedAt, valueSerialized });
+        const { value, ...common } = configValue;
+        assert(value === configValuesComputed.value);
+        const valueSerialized = getConfigValueSerialized(value, configName, configValue.definedAtData);
+        const configValueSerialized = { valueSerialized, ...common };
+        serializeConfigValue(lines, configName, configValueSerialized);
     });
     getConfigValueSourcesNotOverriden(pageConfig).forEach((configValueSource) => {
         const { configName, configEnv } = configValueSource;
@@ -29,18 +31,19 @@ function getConfigValuesSerialized(pageConfig, isEnvMatch) {
         if (!isEnvMatch(configEnv, configValueSource)) {
             return;
         }
-        const { value, definedAt } = configValue;
-        const valueSerialized = getConfigValueSerialized(value, configName, definedAt);
-        serializeConfigValue(lines, configName, { definedAt, valueSerialized });
+        const { value, ...common } = configValue;
+        const valueSerialized = getConfigValueSerialized(value, configName, configValue.definedAtData);
+        const configValueSerialized = { valueSerialized, ...common };
+        serializeConfigValue(lines, configName, configValueSerialized);
     });
     const code = lines.join('\n');
     return code;
 }
-function assertConfigValueIsSerializable(value, configName, definedAt) {
+function assertConfigValueIsSerializable(value, configName, definedAtData) {
     // Contains asserts
-    getConfigValueSerialized(value, configName, definedAt);
+    getConfigValueSerialized(value, configName, definedAtData);
 }
-function getConfigValueSerialized(value, configName, definedAt) {
+function getConfigValueSerialized(value, configName, definedAtData) {
     const valueName = `config${getPropAccessNotation(configName)}`;
     let configValueSerialized;
     try {
@@ -58,7 +61,7 @@ function getConfigValueSerialized(value, configName, definedAt) {
           serializationErrMsg = 'see serialization error printed above'
         }
         */
-        const configValueFilePathToShowToUser = getConfigValueFilePathToShowToUser({ definedAt });
+        const configValueFilePathToShowToUser = getConfigValueFilePathToShowToUser(definedAtData);
         assert(configValueFilePathToShowToUser);
         assertUsage(false, `${pc.cyan(configName)} defined by ${configValueFilePathToShowToUser} must be defined over a so-called "pointer import", see https://vike.dev/config#pointer-imports`);
     }

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn.d.ts

@@ -5,8 +5,9 @@ export type { ConfigDefinitions };
 export type { ConfigDefinitionInternal };
 export type { ConfigNameGlobal };
 export type { ConfigEffect };
-import type { ConfigEnvInternal, ConfigEnv, ConfigValueSources, DefinedAtFileFullInfo } from '../../../../../../shared/page-configs/PageConfig.js';
+import type { ConfigEnvInternal, ConfigEnv, ConfigValueSources, DefinedAtFilePath } from '../../../../../../shared/page-configs/PageConfig.js';
 import type { Config, ConfigNameBuiltIn } from '../../../../../../shared/page-configs/Config.js';
+import type { ConfigDefinedAt } from '../../../../../../shared/page-configs/getConfigDefinedAt.js';
 /** The meta definition of a config.
  *
  * https://vike.dev/meta
@@ -46,13 +47,13 @@ type ConfigEffect = (config: {
      *
      * https://vike.dev/meta
      */
-    configDefinedAt: `Config ${string}`;
+    configDefinedAt: ConfigDefinedAt;
 }) => Config | undefined;
 /** For Vike internal use */
 type ConfigDefinitionInternal = Omit<ConfigDefinition, 'env'> & {
     _computed?: (configValueSources: ConfigValueSources) => unknown;
     _valueIsFilePath?: true;
-    _userEffectDefinedAt?: DefinedAtFileFullInfo;
+    _userEffectDefinedAtFilePath?: DefinedAtFilePath;
     env: ConfigEnvInternal;
 };
 type ConfigDefinitions = Record<string, ConfigDefinitionInternal>;

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/filesystemRouting.d.ts

@@ -12,9 +12,9 @@ export { getLogicalPath };
  *
  * Each config value is assigned with a `locationId` value. That's the source-of-truth for determining inheritance between config values.
  *
- * For Vike extensions, `locationId` is different than the config value's `definedAt`, for example the `onRenderHtml()` hook of `vike-react`:
+ * For Vike extensions, `locationId` is different than the config value's `definedAtFilePath`, for example the `onRenderHtml()` hook of `vike-react`:
  *  - `locationId === '/pages'` (the directory of `/pages/+config.js` which extends `vike-react`)
- *  - `definedAt.filePathAbsoluteFilesystem === '/home/rom/code/my-vike-app/node_modules/vike-react/dist/renderer/onRenderHtml.js'` (the file where the value is defined)
+ *  - `definedAtFilePath.filePathAbsoluteFilesystem === '/home/rom/code/my-vike-app/node_modules/vike-react/dist/renderer/onRenderHtml.js'` (the file where the value is defined)
  *
  *  This is an important distinction because the Vike extension's config should only apply to where it's being extended from, for example:
  *  ```js

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/loadFileAtConfigTime.js

@@ -6,10 +6,9 @@ import { assert, assertUsage, hasProp, assertIsNotProductionRuntime } from '../.
 import { transpileAndExecuteFile } from './transpileAndExecuteFile.js';
 import { assertPlusFileExport } from '../../../../../../shared/page-configs/assertPlusFileExport.js';
 import pc from '@brillout/picocolors';
-import { parseImportData } from './transformFileImports.js';
+import { parsePointerImportData } from './transformFileImports.js';
 import { getConfigFileExport } from '../getConfigFileExport.js';
-import { assertImportPath, resolveImportPath } from './resolveImportPath.js';
-import { getFilePathResolved } from '../../../../shared/getFilePath.js';
+import { resolvePointerImport } from './resolvePointerImport.js';
 assertIsNotProductionRuntime();
 // Load fake import
 async function loadImportedFile(import_, userRootDir, importedFilesLoaded) {
@@ -56,13 +55,11 @@ function assertNoInfiniteLoop(visited, filePathAbsoluteFilesystem) {
     assertUsage(idx === -1, `Infinite extends loop ${[...loop, filePathAbsoluteFilesystem].join('>')}`);
 }
 async function loadExtendsConfigs(configFileExports, configFilePath, userRootDir, visited) {
-    const extendsImportData = getExtendsImportData(configFileExports, configFilePath);
+    const extendsPointerImportData = getExtendsPointerImportData(configFileExports, configFilePath);
     const extendsConfigFiles = [];
-    extendsImportData.map((importData) => {
-        const { importPath: importPathAbsolute } = importData;
-        const filePathAbsoluteFilesystem = resolveImportPath(importData, configFilePath);
-        assertImportPath(filePathAbsoluteFilesystem, importData, configFilePath);
-        const filePath = getFilePathResolved({ filePathAbsoluteFilesystem, userRootDir, importPathAbsolute });
+    extendsPointerImportData.map((pointerImportData) => {
+        const filePath = resolvePointerImport(pointerImportData, configFilePath, userRootDir);
+        assert(filePath.filePathAbsoluteFilesystem);
         extendsConfigFiles.push(filePath);
     });
     const extendsConfigs = [];
@@ -74,7 +71,7 @@ async function loadExtendsConfigs(configFileExports, configFilePath, userRootDir
     const extendsFilePaths = extendsConfigFiles.map((f) => f.filePathAbsoluteFilesystem);
     return { extendsConfigs, extendsFilePaths };
 }
-function getExtendsImportData(configFileExports, configFilePath) {
+function getExtendsPointerImportData(configFileExports, configFilePath) {
     const { filePathToShowToUser } = configFilePath;
     const configFileExport = getConfigFileExport(configFileExports, filePathToShowToUser);
     const wrongUsage = `${filePathToShowToUser} sets the config ${pc.cyan('extends')} to an invalid value, see https://vike.dev/extends`;
@@ -91,10 +88,10 @@ function getExtendsImportData(configFileExports, configFilePath) {
     else {
         assertUsage(false, wrongUsage);
     }
-    const extendsImportData = extendList.map((importDataSerialized) => {
-        const importData = parseImportData(importDataSerialized);
-        assertUsage(importData, wrongUsage);
-        return importData;
+    const extendsPointerImportData = extendList.map((importString) => {
+        const pointerImportData = parsePointerImportData(importString);
+        assertUsage(pointerImportData, wrongUsage);
+        return pointerImportData;
     });
-    return extendsImportData;
+    return extendsPointerImportData;
 }

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/resolvePointerImport.d.ts

@@ -0,0 +1,12 @@
+export { resolvePointerImportOfConfig };
+export { resolvePointerImport };
+export { clearFilesEnvMap };
+import type { ConfigEnvInternal, DefinedAtFilePath } from '../../../../../../shared/page-configs/PageConfig.js';
+import { type PointerImportData } from './transformFileImports.js';
+import type { FilePath, FilePathResolved } from '../../../../../../shared/page-configs/FilePath.js';
+type PointerImportResolved = DefinedAtFilePath & {
+    fileExportName: string;
+};
+declare function resolvePointerImportOfConfig(configValue: unknown, importerFilePath: FilePathResolved, userRootDir: string, configEnv: ConfigEnvInternal, configName: string): null | PointerImportResolved;
+declare function resolvePointerImport(pointerImportData: PointerImportData, importerFilePath: FilePathResolved, userRootDir: string): FilePath;
+declare function clearFilesEnvMap(): void;

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/resolvePointerImport.js

@@ -0,0 +1,123 @@
+export { resolvePointerImportOfConfig };
+export { resolvePointerImport };
+export { clearFilesEnvMap };
+import pc from '@brillout/picocolors';
+import { assert, assertIsNpmPackageImport, assertPosixPath, assertUsage, deepEqual, isPathFilesystemAbsolute, requireResolve } from '../../../../utils.js';
+import { parsePointerImportData } from './transformFileImports.js';
+import path from 'path';
+import { getFilePathAbsoluteUserRootDir, getFilePathResolved, getFilePathUnresolved } from '../../../../shared/getFilePath.js';
+const filesEnvMap = new Map();
+function resolvePointerImportOfConfig(configValue, importerFilePath, userRootDir, configEnv, configName) {
+    if (typeof configValue !== 'string')
+        return null;
+    const pointerImportData = parsePointerImportData(configValue);
+    if (!pointerImportData)
+        return null;
+    const { importPath, exportName } = pointerImportData;
+    const filePath = resolvePointerImport(pointerImportData, importerFilePath, userRootDir);
+    const fileExportPathToShowToUser = exportName === 'default' || exportName === configName ? [] : [exportName];
+    assertFileEnv(filePath.filePathAbsoluteFilesystem, importPath, configEnv, configName);
+    return {
+        ...filePath,
+        fileExportName: exportName,
+        fileExportPathToShowToUser
+    };
+}
+function resolvePointerImport(pointerImportData, importerFilePath, userRootDir) {
+    const { importPath } = pointerImportData;
+    const filePathAbsoluteFilesystem = resolveImportPathWithNode(pointerImportData, importerFilePath);
+    let filePath;
+    // - importPath is one of the following. (See `transpileAndExecuteFile()`.)
+    //   - A relative import path
+    //   - A filesystem absolute path
+    //   - An npm package import
+    // - importPath cannot be a path alias (since esbuild resolves path aliases, see transpileAndExecuteFile.ts)
+    assertPosixPath(importPath);
+    if (importPath.startsWith('.') || isPathFilesystemAbsolute(importPath)) {
+        if (importPath.startsWith('.')) {
+            assert(importPath.startsWith('./') || importPath.startsWith('../'));
+        }
+        assertImportPath(filePathAbsoluteFilesystem, pointerImportData, importerFilePath);
+        const filePathAbsoluteUserRootDir = getFilePathAbsoluteUserRootDir({ filePathAbsoluteFilesystem, userRootDir });
+        // This assert() is guarenteed, see assertUsage() in the onResolve() esbuild hook in transpileAndExecuteFile.ts
+        assert(filePathAbsoluteUserRootDir);
+        // Imports are included in virtual files, thus the relative path of imports need to resolved.
+        // ```
+        // [vite] Internal server error: Failed to resolve import "./onPageTransitionHooks" from "virtual:vike:pageConfigValuesAll:client:/pages/index". Does the file exist?
+        // ```
+        filePath = getFilePathResolved({ filePathAbsoluteUserRootDir, userRootDir });
+    }
+    else {
+        const importPathAbsolute = importPath;
+        // importPath cannot be a path alias (since esbuild resolves path aliases, see transpileAndExecuteFile.ts)
+        assertIsNpmPackageImport(importPathAbsolute);
+        if (filePathAbsoluteFilesystem) {
+            filePath = getFilePathResolved({
+                userRootDir,
+                filePathAbsoluteFilesystem,
+                importPathAbsolute
+            });
+        }
+        else {
+            filePath = getFilePathUnresolved({
+                importPathAbsolute
+            });
+        }
+    }
+    return filePath;
+}
+function resolveImportPathWithNode(pointerImportData, importerFilePath) {
+    const importerFilePathAbsolute = importerFilePath.filePathAbsoluteFilesystem;
+    assertPosixPath(importerFilePathAbsolute);
+    const cwd = path.posix.dirname(importerFilePathAbsolute);
+    // We can't use import.meta.resolve() as of Junary 2023 (and probably for a lot longer)
+    // https://stackoverflow.com/questions/54977743/do-require-resolve-for-es-modules#comment137174954_62272600:~:text=But%20the%20argument%20parent%20(aka%20cwd)%20still%20requires%20a%20flag
+    // filePathAbsoluteFilesystem is expected to be null when pointerImportData.importPath is a Vite path alias
+    const filePathAbsoluteFilesystem = requireResolve(pointerImportData.importPath, cwd);
+    return filePathAbsoluteFilesystem;
+}
+function assertImportPath(filePathAbsoluteFilesystem, pointerImportData, importerFilePath) {
+    const { importPath: importPath, importStringWasGenerated, importString } = pointerImportData;
+    const { filePathToShowToUser } = importerFilePath;
+    if (!filePathAbsoluteFilesystem) {
+        const importPathString = pc.cyan(`'${importPath}'`);
+        const errIntro = importStringWasGenerated
+            ? `The import path ${importPathString} in ${filePathToShowToUser}`
+            : `The import ${pc.cyan(importString)} defined in ${filePathToShowToUser}`;
+        const errIntro2 = `${errIntro} couldn't be resolved: does ${importPathString}`;
+        if (importPath.startsWith('.')) {
+            assert(importPath.startsWith('./') || importPath.startsWith('../'));
+            assertUsage(false, `${errIntro2} point to an existing file?`);
+        }
+        else {
+            assertUsage(false, `${errIntro2} exist?`);
+        }
+    }
+}
+function assertFileEnv(filePathAbsoluteFilesystem, importPath, configEnv, configName) {
+    let key;
+    if (filePathAbsoluteFilesystem) {
+        key = filePathAbsoluteFilesystem;
+    }
+    else {
+        assertIsNpmPackageImport(importPath);
+        key = importPath;
+    }
+    assertPosixPath(key);
+    if (!filesEnvMap.has(key)) {
+        filesEnvMap.set(key, []);
+    }
+    const fileEnv = filesEnvMap.get(key);
+    fileEnv.push({ configEnv, configName });
+    const configDifferentEnv = fileEnv.filter((c) => !deepEqual(c.configEnv, configEnv))[0];
+    if (configDifferentEnv) {
+        assertUsage(false, [
+            `${key} defines the value of configs living in different environments:`,
+            ...[configDifferentEnv, { configName, configEnv }].map((c) => `  - config ${pc.cyan(c.configName)} which value lives in environment ${pc.cyan(JSON.stringify(c.configEnv))}`),
+            'Defining config values in the same file is allowed only if they live in the same environment, see https://vike.dev/config#pointer-imports'
+        ].join('\n'));
+    }
+}
+function clearFilesEnvMap() {
+    filesEnvMap.clear();
+}

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/transformFileImports.d.ts

@@ -1,13 +1,13 @@
 export { transformFileImports };
-export { parseImportData };
-export { isImportData };
-export type { ImportData };
+export { parsePointerImportData };
+export { isPointerImportData };
+export type { PointerImportData };
 declare function transformFileImports(code: string, filePathToShowToUser2: string, pointerImports: Record<string, boolean> | 'all', skipWarnings?: true): string | null;
 /**
- * Data Structure holding info about import statement:
+ * Data Structure for [pointer imports](https://vike.dev/config#pointer-imports):
  *   `import { someExport as someImport } from './some-file'`
  * <=>
- *   `importData === {`
+ *   `pointerImportData === {`
  *      `importPath: './some-file',`
  *      `exportName: 'someExport',`
  *      `importString: 'import:./some-file:someExport',`
@@ -15,14 +15,14 @@ declare function transformFileImports(code: string, filePathToShowToUser2: strin
  *    `}`
  * We discard the import name `someImport` because we don't need it.
  */
-type ImportData = {
+type PointerImportData = {
     importPath: string;
     exportName: string;
     importString: string;
     importStringWasGenerated: boolean;
 };
-declare function isImportData(str: string): boolean;
-declare function parseImportData(importString: string): null | ImportData;
+declare function isPointerImportData(str: string): boolean;
+declare function parsePointerImportData(importString: string): null | PointerImportData;
 declare module 'estree' {
     interface BaseNodeWithoutComments {
         start: number;

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/transformFileImports.js

@@ -1,6 +1,6 @@
 export { transformFileImports };
-export { parseImportData };
-export { isImportData };
+export { parsePointerImportData };
+export { isPointerImportData };
 // Playground: https://github.com/brillout/acorn-playground
 // Notes about `with { type: 'pointer' }`
 // - It works well with TypeScript: it doesn't complain upon `with { type: 'unknown-to-typescript' }` and go-to-definition & types are preserved: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes
@@ -90,7 +90,7 @@ skipWarnings) {
                 }
                 return importLocalName;
             })();
-            const importString = serializeImportData({ importPath, exportName, importStringWasGenerated: true });
+            const importString = serializePointerImportData({ importPath, exportName, importStringWasGenerated: true });
             replacement += `const ${importLocalName} = '${importString}';`;
         });
         spliceOperations.push({
@@ -118,16 +118,16 @@ function getImports(code) {
 const import_ = 'import';
 const SEP = ':';
 const zeroWidthSpace = '\u200b';
-function serializeImportData({ importPath, exportName, importStringWasGenerated }) {
+function serializePointerImportData({ importPath, exportName, importStringWasGenerated }) {
     const tag = importStringWasGenerated ? zeroWidthSpace : '';
     // `import:${importPath}:${importPath}`
     return `${tag}${import_}${SEP}${importPath}${SEP}${exportName}`;
 }
-function isImportData(str) {
+function isPointerImportData(str) {
     return str.startsWith(import_ + SEP) || str.startsWith(zeroWidthSpace + import_ + SEP);
 }
-function parseImportData(importString) {
-    if (!isImportData(importString)) {
+function parsePointerImportData(importString) {
+    if (!isPointerImportData(importString)) {
         return null;
     }
     let importStringWasGenerated = false;

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/transpileAndExecuteFile.js

@@ -7,10 +7,11 @@ import fs from 'fs';
 import path from 'path';
 import pc from '@brillout/picocolors';
 import { import_ } from '@brillout/import';
-import { assertPosixPath, getRandomId, assertIsNotProductionRuntime, assert, assertWarning, isObject, toPosixPath, assertUsage, isJavaScriptFile, createDebugger, assertPathIsFilesystemAbsolute } from '../../../../utils.js';
+import { assertPosixPath, getRandomId, assertIsNotProductionRuntime, assert, assertWarning, isObject, toPosixPath, assertUsage, isJavaScriptFile, createDebugger, assertPathFilesystemAbsolute, assertIsNpmPackageImport } from '../../../../utils.js';
 import { transformFileImports } from './transformFileImports.js';
 import { vikeConfigDependencies } from '../getVikeConfig.js';
 import 'source-map-support/register.js';
+import { getFilePathAbsoluteUserRootDir } from '../../../../shared/getFilePath.js';
 assertIsNotProductionRuntime();
 const debug = createDebugger('vike:pointer-imports');
 async function transpileAndExecuteFile(filePath, userRootDir, isConfigFile) {
@@ -111,13 +112,21 @@ async function transpileWithEsbuild(filePath, userRootDir, transformImports) {
                         return resolved;
                     }
                     assert(resolved.path);
-                    resolved.path = toPosixPath(resolved.path);
+                    const importPathResolved = toPosixPath(resolved.path);
+                    const importPathOriginal = args.path;
+                    // Esbuild resolves path aliases.
+                    // - Enabling us to use:
+                    //   ```js
+                    //   isNpmPackageImport(str, { cannotBePathAlias: true })
+                    //   assertIsNpmPackageImport()
+                    //   ```
+                    assertPathFilesystemAbsolute(importPathResolved);
                     // vike-{react,vue,solid} follow the convention that their config export resolves to a file named +config.js
                     //  - This is temporary, see comment below.
-                    const isVikeExtensionConfigImport = resolved.path.endsWith('+config.js');
+                    const isVikeExtensionConfigImport = importPathResolved.endsWith('+config.js');
                     const isPointerImport = transformImports === 'all' ||
                         // .jsx, .vue, .svg, ... => obviously not config code
-                        !isJavaScriptFile(resolved.path) ||
+                        !isJavaScriptFile(importPathResolved) ||
                         // Import of a Vike extension config => make it a pointer import because we want to show nice error messages (that can display whether a configas been set by the user or by a Vike extension).
                         //  - We should have Node.js directly load vike-{react,vue,solid} while enforcing Vike extensions to set 'name' in their +config.js file.
                         //    - vike@0.4.162 already started soft-requiring Vike extensions to set the name config
@@ -126,21 +135,52 @@ async function transpileWithEsbuild(filePath, userRootDir, transformImports) {
                         //  - For example if esbuild cannot resolve a path alias while Vite can.
                         //    - When tsconfig.js#compilerOptions.paths is set, then esbuild is able to resolve the path alias.
                         resolved.errors.length > 0;
-                    pointerImports[resolved.path] = isPointerImport;
-                    assertPosixPath(resolved.path);
+                    assertPosixPath(importPathResolved);
                     const isExternal = isPointerImport ||
                         // Performance: npm package imports that aren't pointer imports can be externalized. For example, if Vike eventually adds support for setting Vite configs in the vike.config.js file, then the user may import a Vite plugin in his vike.config.js file. (We could as well let esbuild always transpile /node_modules/ code but it would be useless and would unnecessarily slow down transpilation.)
-                        resolved.path.includes('/node_modules/');
+                        importPathResolved.includes('/node_modules/');
+                    const filePathAbsoluteUserRootDir = getFilePathAbsoluteUserRootDir({
+                        filePathAbsoluteFilesystem: importPathResolved,
+                        userRootDir
+                    });
+                    let importPathTranspiled;
+                    assertPosixPath(importPathOriginal);
+                    if (importPathOriginal.startsWith('./') || importPathOriginal.startsWith('../')) {
+                        // - We need this assertUsage() because we didn't find a way (yet?) to use filesystem absolute import paths in virtual files.
+                        // - Alternatively, we can again try one of the following for generating the imports of virtual files. (Last time we tried none of it worked.)
+                        //   - ~~~js
+                        //     assert(filePathAbsoluteFilesystem.startsWith('/'))
+                        //     filePath = `/@fs${filePathAbsoluteFilesystem}`
+                        //     ~~~
+                        //   - ~~~js
+                        //     assert(filePathAbsoluteUserRootDir.startsWith('../'))
+                        //     filePathAbsoluteUserRootDir = '/' + filePathAbsoluteUserRootDir
+                        //     ~~~
+                        assertUsage(filePathAbsoluteUserRootDir, `Import ${pc.cyan(importPathOriginal)} resolves to ${importPathResolved} outside of ${userRootDir} which is forbidden: make sure your relative import paths resolve inside ${userRootDir}, or import from an npm package.`);
+                        importPathTranspiled = importPathResolved;
+                    }
+                    else {
+                        // importPathOriginal is either:
+                        //  - Npm package import
+                        //  - Path alias
+                        if (filePathAbsoluteUserRootDir) {
+                            // importPathOriginal is most likely a path alias. (Is it even possible for an npm package import to resolved inside `userRootDir`?)
+                            importPathTranspiled = importPathResolved;
+                        }
+                        else {
+                            // importPathOriginal is an npm package import. (Assuming path aliases always resolve inside `userRootDir`.)
+                            assertIsNpmPackageImport(importPathOriginal);
+                            importPathTranspiled = importPathOriginal;
+                        }
+                    }
                     if (debug.isActivated)
-                        debug('onResolved()', { args, resolved, isPointerImport, isExternal });
-                    // We need esbuild to resolve path aliases so that we can use:
-                    //   isNpmPackageImport(str, { cannotBePathAlias: true })
-                    //   assertIsNpmPackageImport()
-                    assertPathIsFilesystemAbsolute(resolved.path);
+                        debug('onResolved()', { args, resolved, importPathTranspiled, isPointerImport, isExternal });
+                    pointerImports[importPathTranspiled] = isPointerImport;
                     if (isExternal) {
-                        return { external: true, path: resolved.path };
+                        return { external: true, path: importPathTranspiled };
                     }
                     else {
+                        resolved.path = importPathTranspiled;
                         return resolved;
                     }
                 });