When `noPropertyAccessFromIndexSignature` is `true` in `nuxt.config.ts` tsconfig then `ContentRendererMarkdown.vue` fails to build with error `TS4111: Property '_id' comes from an index signature`

[cmcnicholas]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.12.1
• Nuxt Version: 3.7.0
• CLI Version: 3.7.0
• Nitro Version: 2.6.1
• Package Manager: npm@9.1.2
• Builder: -
• User Config: alias, devtools, modules, content, runtimeConfig, imports, typescript
• Runtime Modules: @nuxt/content

• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ev1cct?file=nuxt.config.ts

try npm run build - output will match logs below

Describe the bug

When using tsconfig features such as noPropertyAccessFromIndexSignature and running a production build of nuxt with the content module. The build fails with warnings about content component ContentRendererMarkdown.vue.

The tsconfig generated by nuxt should not evaluate modules that are adding the solution, there doesn't look like a nice way to make use of these additional typescript typechecking features.

Additional context

No response

Logs

ℹ Building server...
ℹ vite v4.4.9 building SSR bundle for production...
ℹ transforming...
../../node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue(7,37): error TS4111: Property '_id' comes from an index signature, so it must be accessed with ['_id'].
       ../../node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue(49,26): error TS4111: Property 'body' comes from an index signature, so it must be accessed with ['body'].
       ../../node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue(50,36): error TS4111: Property 'excerpt' comes from an index signature, so it must be accessed with ['excerpt'].
       ../../node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue(51,24): error TS4111: Property 'excerpt' comes from an index signature, so it must be accessed with ['excerpt'].
       ../../node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue(66,20): error TS4111: Property '_components' comes from an index signature, so it must 
be accessed with ['_components'].

[andreww2012]

I had to use patch-package to patch this types file to satisfy TypeScript like this (don't copy this patch though, better create your own):

diff --git a/node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue b/node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue
index 9c4329c..6cc40c1 100644
--- a/node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue
+++ b/node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.vue
@@ -4,7 +4,7 @@
     :data="data"
     :tag="tag"
     :components="mdcComponents"
-    :data-content-id="debug ? value._id : undefined"
+    :data-content-id="debug ? value['_id'] : undefined"
   />
 </template>

@@ -51,9 +51,9 @@ const props = defineProps({
 const debug = process.dev || useContentPreview().isEnabled()

 const body = computed(() => {
-  let body = props.value.body || props.value
-  if (props.excerpt && props.value.excerpt) {
-    body = props.value.excerpt
+  let body = props.value['body'] || props.value
+  if (props.excerpt && props.value['excerpt']) {
+    body = props.value['excerpt']
   }

   return body
@@ -71,7 +71,7 @@ const data = computed(() => {
 const mdcComponents = computed(() => {
   return {
     ...props.components,
-    ...(data.value._components || {})
+    ...(data.value['_components'] || {})
   }
 })
 </script>