vike 0.4.153-commit-3e842bb → 0.4.153-commit-e631897

package/dist/esm/node/plugin/shared/loggerNotProd.js

@@ -14,15 +14,16 @@ export { clearLogs };
 import { isAbortError } from '../../../shared/route/abort.js';
 import { getViteConfig } from '../../runtime/globalContext.js';
 import { overwriteRuntimeProductionLogger } from '../../runtime/renderPage/loggerRuntime.js';
-import { assert, assertIsNotProductionRuntime, getAssertErrMsg, isUserHookError, overwriteAssertProductionLogger, stripAnsi, warnIfErrorIsNotObject } from '../utils.js';
+import { assert, assertIsNotProductionRuntime, formatHintLog, getAssertErrMsg, isUserHookError, overwriteAssertProductionLogger, stripAnsi, warnIfErrorIsNotObject } from '../utils.js';
 import { getHttpRequestAsyncStore } from './getHttpRequestAsyncStore.js';
 import { isErrorDebug } from './isErrorDebug.js';
 import { isErrorWithCodeSnippet, getPrettyErrorWithCodeSnippet } from './loggerNotProd/errorWithCodeSnippet.js';
 import { getConfigExecutionErrorIntroMsg, getConfigBuildErrorFormatted } from '../plugins/importUserCode/v1-design/transpileAndExecuteFile.js';
-import { logWithVikeTag, logWithViteTag, logDirectly, isFirstLog, screenHasErrors, clearScreen } from './loggerNotProd/log.js';
+import { logWithVikeTag, logWithViteTag, logDirectly, isFirstLog, screenHasErrors, clearScreen, applyViteSourceMapToStackTrace } from './loggerNotProd/log.js';
 import pc from '@brillout/picocolors';
 import { setAlreadyLogged } from '../../runtime/renderPage/isNewError.js';
 import { isConfigInvalid } from '../../runtime/renderPage/isConfigInvalid.js';
+import { onRuntimeError } from '../../runtime/renderPage/loggerProd.js';
 assertIsNotProductionRuntime();
 overwriteRuntimeProductionLogger(logRuntimeError, logRuntimeInfo);
 overwriteAssertProductionLogger(assertLogger);
@@ -102,6 +103,7 @@ function logErr(err, httpRequestId = null) {
         logFallbackErrIntro(category);
     }
     logDirectly(err, 'error');
+    onRuntimeError(err);
 }
 function logConfigError(err) {
     clearLogs({ clearAlsoIfConfigIsInvalid: true });
@@ -154,6 +156,7 @@ function handleAssertMsg(err, category) {
     return true;
 }
 function assertLogger(thing, logType) {
+    applyViteSourceMapToStackTrace(thing);
     const category = getCategory();
     const res = getAssertErrMsg(thing);
     /* Risk of infinite loop
@@ -193,11 +196,7 @@ function logErrorDebugNote() {
             return;
         store.errorDebugNoteAlreadyShown = true;
     }
-    const msg = pc.dim([
-        '┌──────────────────────────────────────────────────────────┐',
-        "│ Error isn't helpful? See https://vike.dev/errors#verbose │",
-        '└──────────────────────────────────────────────────────────┘'
-    ].join('\n'));
+    const msg = pc.dim(formatHintLog("Error isn't helpful? See https://vike.dev/errors#verbose"));
     logDirectly(msg, 'error');
 }
 function getCategory(httpRequestId = null) {

package/dist/esm/node/plugin/shared/loggerVite.js

@@ -5,6 +5,7 @@ import { isErrorWithCodeSnippet } from './loggerNotProd/errorWithCodeSnippet.js'
 import { getHttpRequestAsyncStore } from './getHttpRequestAsyncStore.js';
 import { removeSuperfluousViteLog } from './loggerVite/removeSuperfluousViteLog.js';
 import { isErrorDebug } from './isErrorDebug.js';
+import { onRuntimeError } from '../../runtime/renderPage/loggerProd.js';
 function improveViteLogs(config) {
     intercept('info', config);
     intercept('warn', config);
@@ -45,6 +46,8 @@ function intercept(logType, config) {
         // Vite's default logger preprends the "[vite]" tag if and only if options.timestamp is true
         const prependViteTag = options.timestamp || !!store?.httpRequestId;
         logViteAny(msg, logType, store?.httpRequestId ?? null, prependViteTag);
+        if (options.error)
+            onRuntimeError(options.error);
     };
 }
 function cleanFirstViteLog(msg) {

package/dist/esm/node/prerender/runPrerender.js

@@ -26,14 +26,29 @@ import { loadUserFilesServerSide } from '../runtime/renderPage/loadUserFilesServ
 import { getHookFromPageConfig, getHookFromPageConfigGlobal, getHookTimeoutDefault, setIsPrerenderering } from '../../shared/hooks/getHook.js';
 import { noRouteMatch } from '../../shared/route/noRouteMatch.js';
 import { getVikeConfig } from '../plugin/plugins/importUserCode/v1-design/getVikeConfig.js';
+import { logHintForCjsEsmError } from '../runtime/renderPage/logHintForCjsEsmError.js';
 async function runPrerenderFromAPI(options = {}) {
     await runPrerender(options, 'prerender()');
 }
 async function runPrerenderFromCLI(options) {
-    await runPrerender(options, '$ vike prerender');
+    try {
+        await runPrerender(options, '$ vike prerender');
+    }
+    catch (err) {
+        console.error(err);
+        logHintForCjsEsmError(err);
+        process.exit(1);
+    }
 }
 async function runPrerenderFromAutoFullBuild(options) {
-    await runPrerender(options, null);
+    try {
+        await runPrerender(options, null);
+    }
+    catch (err) {
+        console.error(err);
+        logHintForCjsEsmError(err);
+        process.exit(1);
+    }
 }
 async function runPrerender(options, manuallyTriggered) {
     checkOutdatedOptions(options);

package/dist/esm/node/runtime/globalContext/loadImportBuild.js

@@ -1,7 +1,7 @@
 export { loadImportBuild };
 export { setImportBuildGetters };
 import { loadServerBuild } from '@brillout/vite-plugin-import-build/loadServerBuild.js';
-import { assert, autoRetry } from '../utils.js';
+import { assert } from '../utils.js';
 const buildGetters = (globalThis.__vike_buildGetters = globalThis.__vike_buildGetters || {
     getters: null
 });
@@ -11,10 +11,6 @@ function setImportBuildGetters(getters) {
 async function loadImportBuild(outDir) {
     if (!buildGetters.getters) {
         await loadServerBuild(outDir);
-        // Await dist/server/importBuild.cjs
-        await autoRetry(() => {
-            assert(buildGetters.getters);
-        }, 2000);
         assert(buildGetters.getters);
     }
     const [pageFiles, clientManifest, pluginManifest] = await Promise.all([

package/dist/esm/node/runtime/renderPage/logHintForCjsEsmError/errors.d.ts

@@ -0,0 +1 @@
+export declare const errror_cannot_use_import_outside_of_module = "\nimport{useRunner as e}from\"react-runner\";export*from\"react-runner\";import t,{useState as r,useEffect as n,Fragment as a,useCallback as l,useRef as o,useMemo as c,createContext as s,useContext as i}from\"react\";import p from\"react-simple-code-editor\";import m,{Prism as u}from\"prism-react-renderer\";function g(){return g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},g.apply(this,arguments)}function y(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(a[r]=e[r]);return a}const d=[\"initialCode\",\"transformCode\"],h=t=>{let{initialCode:a=\"\",transformCode:l}=t,o=y(t,d);const[c,s]=r(a),{element:i,error:p}=e(g({code:l?l(c):c},o));return n(()=>{s(a)},[a]),{element:i,error:p,code:c,onChange:s}},f={plain:{color:\"#ffffff\",backgroundColor:\"#282c34\"},styles:[{types:[\"comment\",\"block-comment\",\"prolog\",\"doctype\",\"cdata\"],style:{color:\"#b2b2b2\"}},{types:[\"property\",\"number\",\"function-name\",\"constant\",\"symbol\",\"deleted\"],style:{color:\"#5a9bcf\"}},{types:[\"boolean\"],style:{color:\"#ff8b50\"}},{types:[\"tag\"],style:{color:\"#fc929e\"}},{types:[\"string\",\"attr-value\"],style:{color:\"#8dc891\"}},{types:[\"punctuation\"],style:{color:\"#88c6Be\"}},{types:[\"selector\",\"char\",\"builtin\",\"inserted\"],style:{color:\"#d8dee9\"}},{types:[\"function\"],style:{color:\"#79b6f2\"}},{types:[\"operator\",\"entity\",\"url\",\"variable\"],style:{color:\"#d7deea\"}},{types:[\"keyword\"],style:{color:\"#c5a5c5\"}},{types:[\"atrule\",\"class-name\"],style:{color:\"#fac863\"}},{types:[\"important\"],style:{fontWeight:\"400\"}},{types:[\"bold\"],style:{fontWeight:\"700\"}},{types:[\"italic\"],style:{fontStyle:\"italic\"}},{types:[\"entity\"],style:{cursor:\"help\"}},{types:[\"namespace\"],style:{opacity:.7}}]},b=[\"children\",\"language\",\"theme\",\"Prism\",\"padding\",\"noWrapper\",\"noWrap\",\"className\",\"style\"],C=e=>{let{children:r,language:n=\"jsx\",theme:l=f,Prism:o=u,padding:c=10,noWrapper:s,noWrap:i,className:p,style:d}=e,h=y(e,b);/*#__PURE__*/return t.createElement(m,{code:r||\"\",language:n,Prism:o,theme:l},({className:e,style:r,tokens:n,getLineProps:l,getTokenProps:o})=>{const m=n.map((e,r)=>/*#__PURE__*/t.createElement(a,{key:r},/*#__PURE__*/t.createElement(\"span\",l({line:e}),e.map((e,r)=>/*#__PURE__*/t.createElement(\"span\",o({token:e,key:r})))),\"\\n\"));return s?m:/*#__PURE__*/t.createElement(\"pre\",g({className:p?:e,style:g({},r,{margin:0,padding:c,whiteSpace:i?\"pre\":\"pre-wrap\"},d)},h),m)})},v=[\"defaultValue\",\"value\",\"language\",\"theme\",\"Prism\",\"highlight\",\"padding\",\"onChange\"],E=e=>{let{defaultValue:n,value:a,language:s=\"jsx\",theme:i=f,Prism:m,highlight:u,padding:d=10,onChange:h}=e,b=y(e,v);const[E,P]=r(n||\"\"),k=void 0!==a,W=l(e=>/*#__PURE__*/t.createElement(C,{language:s,theme:i,Prism:m,noWrapper:!0},e),[s,i,m]),j=o(h);j.current=h;const x=l(e=>{k||P(e),null==j.current||j.current(e)},[k]),O=c(()=>g({},i.plain,b.style),[i.plain,b.style]);/*#__PURE__*/return t.createElement(p,g({},b,{highlight:u||W,padding:d,value:k?a:E,onValueChange:x,style:O}))},P=s({}),k=()=>i(P),W=[\"children\",\"code\",\"language\",\"theme\"],j=e=>{let{children:r,code:n=\"\",language:a=\"jsx\",theme:l=f}=e,o=y(e,W);const{element:c,error:s,code:i,onChange:p}=h(g({initialCode:n},o));/*#__PURE__*/return t.createElement(P.Provider,{value:{element:c,error:s,code:i,onChange:p,language:a,theme:l}},r)},x=e=>{const{code:r,language:n,theme:a,onChange:l}=k();/*#__PURE__*/return t.createElement(E,g({value:r,language:n,theme:a,onChange:l},e))},O=[\"Component\"],w=e=>{let{Component:r=\"div\"}=e,n=y(e,O);const{element:a}=k();/*#__PURE__*/return t.createElement(r,n,a)},N=e=>{const{error:r}=k();return r?/*#__PURE__*/t.createElement(\"pre\",e,r):/*#__PURE__*/t.createElement(t.Fragment,null)};export{C as CodeBlock,E as CodeEditor,P as LiveContext,x as LiveEditor,N as LiveError,w as LivePreview,j as LiveProvider,f as defaultTheme,k as useLiveContext,h as useLiveRunner};\n^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n        at Object.compileFunction (node:vm:360:18)\n        at wrapSafe (node:internal/modules/cjs/loader:1084:15)\n        at Module._compile (node:internal/modules/cjs/loader:1119:27)\n        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)\n        at Module.load (node:internal/modules/cjs/loader:1033:32)\n        at Function.Module._load (node:internal/modules/cjs/loader:868:12)\n        at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)\n        at ModuleJob.run (node:internal/modules/esm/module_job:193:25)\n        at processTicksAndRejections (node:internal/process/task_queues:96:5)\n        at async Promise.all (index 0)\n";

package/dist/esm/node/runtime/renderPage/logHintForCjsEsmError/errors.js

@@ -0,0 +1,17 @@
+// https://github.com/vikejs/vike/discussions/571#discussioncomment-6137618
+export const errror_cannot_use_import_outside_of_module = `
+import{useRunner as e}from"react-runner";export*from"react-runner";import t,{useState as r,useEffect as n,Fragment as a,useCallback as l,useRef as o,useMemo as c,createContext as s,useContext as i}from"react";import p from"react-simple-code-editor";import m,{Prism as u}from"prism-react-renderer";function g(){return g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},g.apply(this,arguments)}function y(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(a[r]=e[r]);return a}const d=["initialCode","transformCode"],h=t=>{let{initialCode:a="",transformCode:l}=t,o=y(t,d);const[c,s]=r(a),{element:i,error:p}=e(g({code:l?l(c):c},o));return n(()=>{s(a)},[a]),{element:i,error:p,code:c,onChange:s}},f={plain:{color:"#ffffff",backgroundColor:"#282c34"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#b2b2b2"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string","attr-value"],style:{color:"#8dc891"}},{types:["punctuation"],style:{color:"#88c6Be"}},{types:["selector","char","builtin","inserted"],style:{color:"#d8dee9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:"#c5a5c5"}},{types:["atrule","class-name"],style:{color:"#fac863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"700"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["namespace"],style:{opacity:.7}}]},b=["children","language","theme","Prism","padding","noWrapper","noWrap","className","style"],C=e=>{let{children:r,language:n="jsx",theme:l=f,Prism:o=u,padding:c=10,noWrapper:s,noWrap:i,className:p,style:d}=e,h=y(e,b);/*#__PURE__*/return t.createElement(m,{code:r||"",language:n,Prism:o,theme:l},({className:e,style:r,tokens:n,getLineProps:l,getTokenProps:o})=>{const m=n.map((e,r)=>/*#__PURE__*/t.createElement(a,{key:r},/*#__PURE__*/t.createElement("span",l({line:e}),e.map((e,r)=>/*#__PURE__*/t.createElement("span",o({token:e,key:r})))),"\\n"));return s?m:/*#__PURE__*/t.createElement("pre",g({className:p?:e,style:g({},r,{margin:0,padding:c,whiteSpace:i?"pre":"pre-wrap"},d)},h),m)})},v=["defaultValue","value","language","theme","Prism","highlight","padding","onChange"],E=e=>{let{defaultValue:n,value:a,language:s="jsx",theme:i=f,Prism:m,highlight:u,padding:d=10,onChange:h}=e,b=y(e,v);const[E,P]=r(n||""),k=void 0!==a,W=l(e=>/*#__PURE__*/t.createElement(C,{language:s,theme:i,Prism:m,noWrapper:!0},e),[s,i,m]),j=o(h);j.current=h;const x=l(e=>{k||P(e),null==j.current||j.current(e)},[k]),O=c(()=>g({},i.plain,b.style),[i.plain,b.style]);/*#__PURE__*/return t.createElement(p,g({},b,{highlight:u||W,padding:d,value:k?a:E,onValueChange:x,style:O}))},P=s({}),k=()=>i(P),W=["children","code","language","theme"],j=e=>{let{children:r,code:n="",language:a="jsx",theme:l=f}=e,o=y(e,W);const{element:c,error:s,code:i,onChange:p}=h(g({initialCode:n},o));/*#__PURE__*/return t.createElement(P.Provider,{value:{element:c,error:s,code:i,onChange:p,language:a,theme:l}},r)},x=e=>{const{code:r,language:n,theme:a,onChange:l}=k();/*#__PURE__*/return t.createElement(E,g({value:r,language:n,theme:a,onChange:l},e))},O=["Component"],w=e=>{let{Component:r="div"}=e,n=y(e,O);const{element:a}=k();/*#__PURE__*/return t.createElement(r,n,a)},N=e=>{const{error:r}=k();return r?/*#__PURE__*/t.createElement("pre",e,r):/*#__PURE__*/t.createElement(t.Fragment,null)};export{C as CodeBlock,E as CodeEditor,P as LiveContext,x as LiveEditor,N as LiveError,w as LivePreview,j as LiveProvider,f as defaultTheme,k as useLiveContext,h as useLiveRunner};
+^^^^^^
+
+    SyntaxError: Cannot use import statement outside a module
+        at Object.compileFunction (node:vm:360:18)
+        at wrapSafe (node:internal/modules/cjs/loader:1084:15)
+        at Module._compile (node:internal/modules/cjs/loader:1119:27)
+        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
+        at Module.load (node:internal/modules/cjs/loader:1033:32)
+        at Function.Module._load (node:internal/modules/cjs/loader:868:12)
+        at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
+        at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
+        at processTicksAndRejections (node:internal/process/task_queues:96:5)
+        at async Promise.all (index 0)
+`;

package/dist/esm/node/runtime/renderPage/logHintForCjsEsmError.d.ts

@@ -0,0 +1,13 @@
+export { logHintForCjsEsmError };
+export { isCjsEsmError };
+export { isReactInvalidComponentError };
+export { getHint };
+declare function logHintForCjsEsmError(error: unknown): void;
+declare function getHint(error: unknown): null | string;
+declare function isReactInvalidComponentError(error: unknown): boolean;
+/**
+ * `false` -> noop
+ * `true` -> generic message
+ * `'some-npm-package'` -> add some-npm-package to `ssr.noExternal`
+ */
+declare function isCjsEsmError(error: unknown): boolean | string[];

package/dist/esm/node/runtime/renderPage/logHintForCjsEsmError.js

@@ -0,0 +1,321 @@
+export { logHintForCjsEsmError };
+// For ./logHintForCjsEsmError/*.spec.ts
+export { isCjsEsmError };
+export { isReactInvalidComponentError };
+export { getHint };
+import pc from '@brillout/picocolors';
+import { assert, formatHintLog, isNotNullish, isObject, unique, joinEnglish } from '../utils.js';
+function logHintForCjsEsmError(error) {
+    /* Collect errors for ./logHintForCjsEsmError.spec.ts
+    collectError(error)
+    //*/
+    const hint = getHint(error);
+    if (hint)
+        logHint(hint);
+}
+function getHint(error) {
+    if (isReactInvalidComponentError(error)) {
+        const hint = 'To fix this error, see https://vike.dev/broken-npm-package#react-invalid-component';
+        return hint;
+    }
+    const res = isCjsEsmError(error);
+    if (res) {
+        const packageNames = res === true ? null : res;
+        const hint = [
+            'Error could be a CJS/ESM issue, consider ',
+            !packageNames || packageNames.length === 0
+                ? 'using'
+                : `adding ${joinEnglish(packageNames.map((p) => pc.cyan(p)), 'or')} to`,
+            ` ${pc.cyan('ssr.noExternal')}`,
+            ', see https://vike.dev/broken-npm-package'
+        ].join('');
+        return hint;
+    }
+    return null;
+}
+function logHint(hint) {
+    hint = formatHintLog(hint);
+    console.error(hint);
+}
+function isReactInvalidComponentError(error) {
+    const anywhere = getAnywhere(error);
+    return includes(anywhere, 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)');
+}
+/**
+ * `false` -> noop
+ * `true` -> generic message
+ * `'some-npm-package'` -> add some-npm-package to `ssr.noExternal`
+ */
+function isCjsEsmError(error) {
+    const message = getErrMessage(error);
+    const anywhere = getAnywhere(error);
+    const packageName_stack1 = getPackageName_stack1(error);
+    const packageName_stack2 = getPackageName_stack2(error);
+    const isRelatedToNodeModules = !!packageName_stack1 || !!packageName_stack2 || includesNodeModules(message);
+    // const relatedNpmPackages = normalize([packageName_stack1, packageName_stack2, extractFromNodeModulesPath(message)])
+    // ERR_UNSUPPORTED_DIR_IMPORT
+    {
+        const packageNames = parseNodeModulesPathMessage('ERR_UNSUPPORTED_DIR_IMPORT', anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    // ERR_UNKNOWN_FILE_EXTENSION
+    {
+        const packageNames = parseUnkownFileExtensionMessage(anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    {
+        const packageNames = parseNodeModulesPathMessage('ERR_UNKNOWN_FILE_EXTENSION', anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    {
+        const packageNames = parseNodeModulesPathMessage('is not exported', anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    // Using CJS inside ESM modules.
+    if (includes(anywhere, 'require is not a function') ||
+        includes(anywhere, 'exports is not defined') ||
+        includes(anywhere, 'module is not defined') ||
+        includes(anywhere, 'window is not defined') ||
+        includes(anywhere, 'not defined in ES')) {
+        if (packageName_stack1)
+            return packageName_stack1;
+    }
+    if (includes(anywhere, "Unexpected token 'export'")) {
+        if (packageName_stack2)
+            return packageName_stack2;
+        if (packageName_stack1)
+            return packageName_stack1;
+    }
+    // ERR_REQUIRE_ESM
+    if (includes(anywhere, 'ERR_REQUIRE_ESM')) {
+        /* The issue is the importer, not the importee.
+        if (relatedNpmPackages) return relatedNpmPackages
+        */
+        {
+            if (packageName_stack1)
+                return packageName_stack1;
+        }
+        if (isRelatedToNodeModules)
+            return true;
+    }
+    /* The following two wrongfully match user land errors
+    {
+      const packageNames = parseNodeModulesPath('ERR_REQUIRE_ESM', anywhere)
+      if (packageNames) return packageNames
+    }
+    {
+      const packageNames = parseNodeModulesPath('Must use import', anywhere)
+      if (packageNames) return packageNames
+    }
+    */
+    // `SyntaxError: Named export '${exportName}' not found. The requested module '${packageName}' is a CommonJS module, which may not support all module.exports as named exports.`
+    {
+        const packageNames = parseImportFrom(anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    if (includes(anywhere, 'Cannot read properties of undefined')) {
+        if (isRelatedToNodeModules) {
+            /* We return true because relatedNpmPackages points to the importer but the problematic npm package is the importee
+            if (relatedNpmPackages) return relatedNpmPackages
+            */
+            return true;
+        }
+    }
+    // ERR_MODULE_NOT_FOUND
+    {
+        const packageNames = parseCannotFindMessage(anywhere);
+        if (packageNames)
+            return packageNames;
+    }
+    if (
+    // `SyntaxError: Cannot use import statement outside a module`.
+    // Since user code is always ESM, this error must always originate from an npm package.
+    includes(anywhere, 'Cannot use import statement') ||
+        // `SyntaxError: Named export '${exportName}' not found. The requested module '${packageName}' is a CommonJS module, which may not support all module.exports as named exports.`
+        // It seems that this always points to an npm package import.
+        /Named export.*not found/i.test(anywhere)) {
+        /* We return true even if fromNodeModules is false because the errors always relate to npm packages.
+        if (fromNodeModules) return true
+        */
+        return true;
+    }
+    return false;
+}
+function parseCannotFindMessage(str) {
+    const match = /Cannot find \S+ '(\S+)' imported from (\S+)/.exec(str);
+    if (!match)
+        return false;
+    // const packageNameCannotFind = extractFromPath(match[1]!)
+    const packageNameFrom = extractFromPath(match[2]);
+    return normalize([
+        // packageNameCannotFind,
+        packageNameFrom
+    ]);
+}
+function parseUnkownFileExtensionMessage(str) {
+    const match = /Unknown file extension "\S+" for (\S+)/.exec(str);
+    if (!match)
+        return false;
+    const filePath = match[1];
+    const packageName = extractFromPath(filePath);
+    return normalize([packageName]);
+}
+function parseImportFrom(str) {
+    const match = /\bimport\b.*?\bfrom\b\s*?"(.+?)"/.exec(str);
+    if (!match)
+        return false;
+    const importPath = match[1];
+    const packageName = extractFromPath(importPath);
+    return normalize([packageName]);
+}
+function parseNodeModulesPathMessage(begin, str) {
+    str = str.replaceAll('\\', '/');
+    const regex = new RegExp(`${begin}.*(node_modules\\/\\S+)`);
+    const match = regex.exec(str);
+    if (!match)
+        return false;
+    const importPath = match[1];
+    return extractFromNodeModulesPath(importPath);
+}
+function getPackageName_stack1(err) {
+    const errStack = getErrStack(err);
+    if (!errStack)
+        return false;
+    const firstLineStackTrace = errStack.split('\n').filter((line) => line.startsWith('    at '))[0];
+    if (!firstLineStackTrace)
+        return false;
+    return extractFromNodeModulesPath(firstLineStackTrace);
+}
+/** See https://github.com/brillout/repro_node-syntax-error#nodejs-behavior */
+function getPackageName_stack2(err) {
+    const errStack = getErrStack(err);
+    if (!errStack)
+        return false;
+    const firstLine = errStack.trim().split('\n')[0];
+    return extractFromNodeModulesPath(firstLine);
+}
+function extractFromPath(filePath) {
+    assert(filePath);
+    filePath = clean(filePath);
+    filePath = filePath.replaceAll('\\', '/');
+    let packageName;
+    if (!filePath.includes('node_modules/')) {
+        packageName = filePath;
+        if (packageName.startsWith('/'))
+            return null;
+        if (packageName.startsWith('.'))
+            return null;
+    }
+    else {
+        packageName = filePath.split('node_modules/').pop();
+        // This assert is fairly risk, we should eventually remove it
+        assert(!packageName.startsWith('.'));
+        // This assert is fairly risk, we should eventually remove it
+        assert(!packageName.startsWith('/'));
+    }
+    if (!packageName)
+        return null;
+    packageName = packageName.split('/').slice(0, 2).join('/');
+    if (!packageName.startsWith('@')) {
+        packageName = packageName.split('/')[0];
+    }
+    packageName = clean(packageName);
+    assert(!['vite', 'vike'].includes(packageName));
+    return packageName;
+}
+function clean(packageName) {
+    const b = ['"', "'", '(', ')'];
+    if (b.includes(packageName[0])) {
+        packageName = packageName.slice(1);
+    }
+    if (b.includes(packageName[packageName.length - 1])) {
+        packageName = packageName.slice(0, -1);
+    }
+    return packageName;
+}
+function extractFromNodeModulesPath(str) {
+    if (!includesNodeModules(str))
+        return false;
+    const packageName = extractFromPath(str);
+    assert(packageName);
+    return normalize([packageName]);
+}
+function includes(str1, str2) {
+    return !!str1 && str1.toLowerCase().includes(str2.toLowerCase());
+}
+function includesNodeModules(str) {
+    if (!str)
+        return false;
+    str = str.replaceAll('\\', '/');
+    if (!str.includes('node_modules/'))
+        return false;
+    if (str.includes('node_modules/vite/'))
+        return false;
+    return true;
+}
+function normalize(packageNames) {
+    const result = unique(packageNames.filter(isNotNullish));
+    if (result.length === 0)
+        return false;
+    return result;
+}
+function getErrMessage(err) {
+    if (!isObject(err))
+        return null;
+    if (!err.message)
+        return null;
+    if (typeof err.message !== 'string')
+        return null;
+    return err.message;
+}
+function getErrCode(err) {
+    if (!isObject(err))
+        return null;
+    if (!err.code)
+        return null;
+    if (typeof err.code !== 'string')
+        return null;
+    return err.code;
+}
+function getErrStack(err) {
+    if (!isObject(err))
+        return null;
+    if (!err.stack)
+        return null;
+    if (typeof err.stack !== 'string')
+        return null;
+    return err.stack;
+}
+function getAnywhere(error) {
+    const code = getErrCode(error);
+    const message = getErrMessage(error);
+    const stack = getErrStack(error);
+    const anywhere = [code, message, stack].filter(Boolean).join('\n');
+    return anywhere;
+}
+function collectError(err) {
+    console.log([
+        '{',
+        `  message: ${JSON.stringify(err.message)},`,
+        `  code: ${JSON.stringify(err.code)},`,
+        '  stack: `\n' + err.stack + '\n`',
+        '}'
+    ].join('\n'));
+    /* For reproductions using older vite-plugin-ssr versions, do one of the following.
+        - If upon pre-rendering:https: //github.com/brillout/repro_node-syntax-error#error-catched-by-vite-plugin-ssr
+        - Inject the logger inside `catch` in node_modules/vite-plugin-ssr/dist/esm/node/runtime/renderPage.js
+        - Inject the following inside `configResolved(config_)` at node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/devConfig/index.js
+          ```js
+          config_.logger.error = (msg, options) => {
+            const { error } = options;
+            if (error) return;
+            console.log(...);
+          };
+          ```
+    */
+}

package/dist/esm/node/runtime/renderPage/loggerProd.d.ts

@@ -1,2 +1,4 @@
 export { logErrorProd };
+export { onRuntimeError };
 declare function logErrorProd(err: unknown, _httpRquestId: null | number): void;
+declare function onRuntimeError(err: unknown): void;

package/dist/esm/node/runtime/renderPage/loggerProd.js

@@ -1,10 +1,12 @@
 // Logger used for the production server.
 // Any other environement (dev, preview, build, and pre-rendering) uses loggerNotProd.ts instead.
 export { logErrorProd };
+export { onRuntimeError };
 import { isAbortError } from '../../../shared/route/abort.js';
 import { setAlreadyLogged } from './isNewError.js';
 import { isObject, warnIfErrorIsNotObject } from '../utils.js';
 import pc from '@brillout/picocolors';
+import { logHintForCjsEsmError } from './logHintForCjsEsmError.js';
 function logErrorProd(err, _httpRquestId) {
     warnIfErrorIsNotObject(err);
     setAlreadyLogged(err);
@@ -14,4 +16,10 @@ function logErrorProd(err, _httpRquestId) {
     // We ensure we print a string; Cloudflare Workers doesn't seem to properly stringify `Error` objects.
     const errStr = isObject(err) && 'stack' in err ? String(err.stack) : String(err);
     console.error(pc.red(errStr));
+    onRuntimeError(err);
+}
+// Every server-side runtime error is expected to go through onRuntimeError(). (In principle, any runtime error is (or at least should) be catched by Vike, otherwise Vike couldn't render the error page.)
+function onRuntimeError(err) {
+    // The more runtime errors we pass to logHintForCjsEsmError() the better.
+    logHintForCjsEsmError(err);
 }

package/dist/esm/node/runtime/utils.d.ts

@@ -48,4 +48,5 @@ export * from '../../utils/warnIfErrorIsNotObject.js';
 export * from '../../utils/stripAnsi.js';
 export * from '../../utils/getTerminWidth.js';
 export * from '../../utils/truncateString.js';
-export * from '../../utils/autoRetry.js';
+export * from '../../utils/formatHintLog.js';
+export * from '../../utils/joinEnglish.js';

package/dist/esm/node/runtime/utils.js

@@ -51,4 +51,5 @@ export * from '../../utils/warnIfErrorIsNotObject.js';
 export * from '../../utils/stripAnsi.js';
 export * from '../../utils/getTerminWidth.js';
 export * from '../../utils/truncateString.js';
-export * from '../../utils/autoRetry.js';
+export * from '../../utils/formatHintLog.js';
+export * from '../../utils/joinEnglish.js';

package/dist/esm/utils/formatHintLog.d.ts

@@ -0,0 +1,2 @@
+export { formatHintLog };
+declare function formatHintLog(msg: string): string;

package/dist/esm/utils/formatHintLog.js

@@ -0,0 +1,14 @@
+import { assert } from './assert.js';
+import { stripAnsi } from './stripAnsi.js';
+export { formatHintLog };
+function formatHintLog(msg) {
+    assert(msg.length > 0);
+    const msgLength = stripAnsi(msg).length;
+    const sep = '─'.repeat(msgLength);
+    return [
+        // prettier-ignore
+        `┌─${sep}─┐`,
+        `│ ${msg} │`,
+        `└─${sep}─┘`
+    ].join('\n');
+}

package/dist/esm/utils/projectInfo.d.ts

@@ -1,13 +1,13 @@
 export { projectInfo };
 export type { ProjectTag };
 export { PROJECT_VERSION };
-declare const PROJECT_VERSION: "0.4.153-commit-3e842bb";
+declare const PROJECT_VERSION: "0.4.153-commit-e631897";
 type PackageName = typeof projectInfo.npmPackageName;
 type ProjectVersion = typeof projectInfo.projectVersion;
 type ProjectTag = `[${PackageName}]` | `[${PackageName}@${ProjectVersion}]`;
 declare const projectInfo: {
     projectName: "Vike";
-    projectVersion: "0.4.153-commit-3e842bb";
+    projectVersion: "0.4.153-commit-e631897";
     npmPackageName: "vike";
     githubRepository: "https://github.com/vikejs/vike";
 };

package/dist/esm/utils/projectInfo.js

@@ -1,7 +1,7 @@
 export { projectInfo };
 export { PROJECT_VERSION };
 import { onProjectInfo } from './assertSingleInstance.js';
-const PROJECT_VERSION = '0.4.153-commit-3e842bb';
+const PROJECT_VERSION = '0.4.153-commit-e631897';
 const projectInfo = {
     projectName: 'Vike',
     projectVersion: PROJECT_VERSION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike",
-  "version": "0.4.153-commit-3e842bb",
+  "version": "0.4.153-commit-e631897",
   "scripts": {
     "dev": "tsc --watch",
     "build": "rimraf dist/ && pnpm run build:esm && pnpm run build:cjs",
@@ -16,7 +16,7 @@
     "@brillout/json-serializer": "^0.5.8",
     "@brillout/picocolors": "^1.0.10",
     "@brillout/require-shim": "^0.1.2",
-    "@brillout/vite-plugin-import-build": "^0.3.1",
+    "@brillout/vite-plugin-import-build": "^0.3.3",
     "acorn": "^8.0.0",
     "cac": "^6.0.0",
     "es-module-lexer": "^1.0.0",

package/dist/cjs/utils/autoRetry.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoRetry = void 0;
-const sleep_js_1 = require("./sleep.js");
-async function autoRetry(fn, timeout) {
-    const interval = 30;
-    const numberOfTries = timeout / interval;
-    let i = 0;
-    while (true) {
-        try {
-            await fn();
-            return;
-        }
-        catch (err) {
-            i = i + 1;
-            if (i > numberOfTries) {
-                throw err;
-            }
-        }
-        await (0, sleep_js_1.sleep)(interval);
-    }
-}
-exports.autoRetry = autoRetry;

package/dist/esm/utils/autoRetry.d.ts

@@ -1,2 +0,0 @@
-export { autoRetry };
-declare function autoRetry(fn: () => void | Promise<void>, timeout: number): Promise<void>;

package/dist/esm/utils/autoRetry.js

@@ -1,20 +0,0 @@
-export { autoRetry };
-import { sleep } from './sleep.js';
-async function autoRetry(fn, timeout) {
-    const interval = 30;
-    const numberOfTries = timeout / interval;
-    let i = 0;
-    while (true) {
-        try {
-            await fn();
-            return;
-        }
-        catch (err) {
-            i = i + 1;
-            if (i > numberOfTries) {
-                throw err;
-            }
-        }
-        await sleep(interval);
-    }
-}