The module 'contentlayer/generated' or its type declarations are missing and cannot be located

Currently running NextJS 13.3 in my application directory and attempting to implement contentlayer for serving my mdx files.

tsconfig.json

{
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "contentlayer/generated": ["./.contentlayer/generated"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".contentlayer/generated"],
}

contentlayer.config.js

import { defineDocumentType, makeSource } from 'contentlayer/source-files';

export const Post = defineDocumentType(() => ({
    name: 'Post',
    contentType: 'mdx',
    filePathPattern: 'posts/*.mdx',
}));

export default makeSource({
    contentDirPath: 'content',
    documentTypes: [Post],
});

app/blog/[slug]/page.tsx

import { allPosts } from 'contentlayer/generated';

When trying to import, an error is triggered:

Error message: Cannot locate module 'contentlayer/generated' or its corresponding type declarations

Answer №1

For assistance with this issue on Github, refer to: https://github.com/contentlayerdev/contentlayer/issues/415

Remember to configure the settings in next.config.js(or next.config.mjs):

import { withContentlayer } from 'next-contentlayer'

export default withContentlayer({ ... })

In my situation, resolving the problem involved running the command yarn contentlayer dev(you can use npm, npx, or other package managers instead of yarn) after following the tutorial.

Answer №2

After discovering the issue (shoutout to @yejinc), I have added the contentlayer script to run in dev mode locally by updating the package.json:

"dev": "contentlayer dev & next dev"

Fortunately, it seems that this problem has been resolved in the most recent release of contentlayer: https://github.com/contentlayerdev/contentlayer/releases/tag/v0.3.2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Endure the class attribute in Angular 5

My SearchComponent has a route (/search) and SearchDetailComponent has a route (/search-detail:id). In the SearchComponent, there is a searchbox (input field) where I can type any text to start a search. After loading the search results and navigating to ...

Tips for managing an array of observable items

In my current project, I am working with an Angular application that receives a collection from Firebase (Observable<any[]>). For each element in this collection, I need to create a new object by combining the original value with information from ano ...

Experience seamless music playback using Howler and NextJS, effortlessly playing one song after another

I recently encountered an issue while trying to play a list of songs stored on github. My goal was to play each song sequentially and print a message in the console once a song finishes playing. However, I struggled with determining when a song is finish ...

Exploring the world of typescript with the power of ts-check

I'm having trouble figuring out how to work with a generic function using TypeScript's new ts-check feature. /** * @type {Reducer<IPoiState, any>} */ const poi = handleActions({ [ADD_BOOKMARK_START]: (state) => { return { ...sta ...

Node.js (Next.js) is encountering an issue when attempting to import an object from a module. The error message reads: "Module not found: Can't resolve '

In my project using Node.js with React and Next.js, the vital components are stored in the server file. main.js(server file) const app = next({ dev }) //dev = true ... const DR_LINK = "anything" module.exports.app = app; module.exports.DR_LIN ...

Having trouble bringing in inline-react-svg

I'm currently using Next.js along with Ant Design for my project. In my .babelrc file, I included the Ant Design library, but encountered an issue where I couldn't utilize SVG files properly. To address this problem, I imported inline-react-svg. ...

Angular 2 decorators grant access to private class members

Take a look at this piece of code: export class Character { constructor(private id: number, private name: string) {} } @Component({ selector: 'my-app', template: '<h1>{{title}}</h1><h2>{{character.name}} detai ...

All authentication logic in Angular encapsulated within the service

I am considering moving all the business logic into the auth service and simply calling the method on the component side. Since none of my functions return anything, I wonder if it's okay or if they will hang. COMPONENT credentials: Credentials = ...

Ways to resolve the issue of npm being unable to globally install typescript

While trying to globally install TypeScript using npm sudo npm install -g typescript An error occurs during the installation process with the following message: ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/typescript/bin/ ...

Tips for revamping designs in the latest version of NextJS 13 by leveraging the updated app router while ensuring compatibility with the metadata API

I'm currently utilizing the updated app router for NextJS 13, but I'm facing difficulties in comprehending how to organize the app in a way that allows me to utilize the metadata API. The main page of my app is situated in the root of the app fol ...

Using JSDoc to Include TypeScript Definitions

I've been attempting to utilize the ts-xor package, which provides a TypeScript definition: export declare type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; This is how I'm imp ...

Importing Json in Angular 8: A detailed guide

I recently came across information that you can now directly import JSON in TypeScript 2.9 and made changes to my tsconfig.json file accordingly: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", " ...

Incorporating Firebase administrator into an Angular 4 project

Currently encountering an issue while trying to integrate firebase-admin into my angular project. Despite my efforts, I am unable to resolve the error that keeps popping up (refer to the screenshot below). https://i.stack.imgur.com/kdCoo.png I attempted ...

Is it possible to utilize both client side rendering and server side rendering for the same data or page?

On my webpage, I have a never-ending gallery of items that need to be displayed. Additionally, the page includes filters for these items. My idea is to use SSR to load the initial 20 items and then utilize CSR, possibly through react-query, to continuousl ...

The utilization of the "notFound" prop within getStaticProps does not influence the HTTP status code returned by the page

I recently set up a fresh Next.js application and created the following page: // /pages/articles/[slug].js import React from 'react' import { useRouter } from 'next/router' import ErrorPage from 'next/error' const Article = ...

The 'Subscription' type does not contain the properties _isScalar, source, operator, lift, and several others that are found in the 'Observable<any>' type

Looking to retrieve data from two APIs in Angular 8. I have created a resolver like this: export class AccessLevelResolve implements Resolve<any>{ constructor(private accessLevel: AccessLevelService) { } resolve(route: ActivatedRouteSnapshot, sta ...

Update the header background color of an AG-Grid when the grid is ready using TypeScript

Currently working with Angular 6. I have integrated ag-grid into a component and I am looking to modify the background color of the grid header using component CSS or through gridready columnapi/rowapi. I want to avoid inheriting and creating a custom He ...

Utilizing TypeScript's discriminated unions for function parameters

The function's second argument type is determined by the string value of the first argument. Here is an example of what I am trying to achieve: async action (name: 'create', args: { table: string, object: StorageObject }): Promise<Sto ...

Setting up Next.js rendering within Express routing: A step-by-step guide

app.js const express = require('express'); const next = require('next'); const port = parseInt(process.env.PORT, 10) || 3000; const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.ge ...

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

After upgrading my nestJS application to use version 3.2 of apollo-server-plugin-base, I encountered two TypeScript errors related to a simple nestJS plugin: import { Plugin } from '@nestjs/graphql' import { ApolloServerPlugin, GraphQLRequest ...