fix: improve error message upon code defined inside header files

Author: brillout

vite-plugin-ssr/node/plugin/plugins/importUserCode/v1-design/serializePageConfigs.ts

@@ -2,7 +2,7 @@
 
 export { serializePageConfigs }
 
-import { assert, assertUsage, objectEntries } from '../../../utils.js'
+import { assert, assertUsage, getPropAccessNotation, hasProp, objectEntries } from '../../../utils.js'
 import type {
   ConfigValue,
   ConfigValueSource,
@@ -15,6 +15,7 @@ import { debug } from './debug.js'
 import { stringify } from '@brillout/json-serializer/stringify'
 import { skipConfigValue } from './getVirtualFileImportCodeFiles.js'
 import { getConfigEnv } from './helpers.js'
+import pc from '@brillout/picocolors'
 
 function serializePageConfigs(
   pageConfigsData: PageConfigData[],
@@ -159,12 +160,19 @@ function serializeConfigValueSource(
 }
 function getConfigValueSerialized(value: unknown, configName: string, configDefinedByFile: string): string {
   let configValueSerialized: string
+  const valueName = `config${getPropAccessNotation(configName)}`
   try {
-    configValueSerialized = stringify(value)
-  } catch {
+    configValueSerialized = stringify(value, { valueName })
+  } catch (err) {
+    assert(hasProp(err, 'messageCore', 'string'))
+    const configPath = pc.bold(configDefinedByFile)
     assertUsage(
       false,
-      `The value of the config '${configName}' cannot live inside ${configDefinedByFile}, see https://vite-plugin-ssr.com/header-file`
+      [
+        `The value of the config ${pc.cyan(configName)} cannot be defined inside the file ${configPath}.`,
+        `Its value must be defined in an another file and then imported by ${configPath} (because it isn't serializable: ${err.messageCore}).`,
+        `Only serializable config values can be defined inside ${configPath}, see https://vite-plugin-ssr.com/header-file.`
+      ].join(' ')
     )
   }
   configValueSerialized = JSON.stringify(configValueSerialized)

vite-plugin-ssr/node/plugin/utils.ts

@@ -24,3 +24,4 @@ export * from '../../utils/stripAnsi.js'
 export * from '../../utils/trimWithAnsi.js'
 export * from '../../utils/removeEmptyLines.js'
 export * from '../../utils/findUserPackageJsonPath.js'
+export * from '../../utils/getPropAccessNotation.js'

vite-plugin-ssr/utils/getPropAccessNotation.ts

@@ -0,0 +1,8 @@
+export { getPropAccessNotation }
+
+function getPropAccessNotation(key: string): `.${string}` | `[${string}]` {
+  return isKeyDotNotationCompatible(key) ? `.${key}` : `[${JSON.stringify(key)}]`
+}
+function isKeyDotNotationCompatible(key: string): boolean {
+  return /^[a-z0-9\$_]+$/i.test(key)
+}