Module not found: Can't resolve '@mdx-js/tag'

[1ak31sha]

Hi, im new to MDX and would really love to use it in my nextjs blog!!
im having trouble getting it to work though and would appreciate some help
MDX should be added now, and the error appears only when i click on a post (recipe in my case)

./recipes/thaicurrynoodles.mdx:3:2
Module not found: Can't resolve '@mdx-js/tag'
  1 | 
  2 |   import React from 'react'
> 3 |   import { MDXTag } from '@mdx-js/tag'
    |  ^
  4 |   /* @jsxRuntime classic */
  5 | /* @jsx mdx */
  6 | 

Import trace for requested module:
./pages/recipes/[id].js

https://nextjs.org/docs/messages/module-not-found

what confuses me is that i havent tried to import MDXTag anywhere. i guess one of the other mdx modules uses it?

here is my next.js.config

module.exports = {
  // Prefer loading of ES Modules over CommonJS
  images: {
    domains: ["res.cloudinary.com", "https://lh3.googleusercontent.com"],
  },

  experimental: { esmExternals: true },
  // Support MDX files as pages:
  pageExtensions: ["md", "mdx", "tsx", "ts", "jsx", "js"],
  // Support loading `.md`, `.mdx`:
  webpack(config, options) {
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        // The default `babel-loader` used by Next:
        options.defaultLoaders.babel,
        {
          loader: "@mdx-js/loader",
          /** @type {import('@mdx-js/loader').Options} */
          options: {
            /* jsxImportSource: …, otherOptions… */
          },
        },
      ],
    })

    return config
  },
}

the post, thaicurry.md

---
title: 'Thai curry noodles'
img: 'https://res.cloudinary.com/lakeisha-llc/image/upload/v1625728149/thai%20curry%20noodles/curry_cover_zyfiji.jpg'
date:  '2019-11-11'
tags:
 - Thai
 - Spicy
---

/* import { Test } from '../components/test.jsx' */

***Servings***: 4 large portions

### Recipe
/* <Test /> */

test.jsx

export const Test = () => {
  return <>Boom</>
}

package.json

  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.12.2",
    "@mdx-js/loader": "^0.15.4",
    "@mdx-js/react": "^1.6.18",
    "@next/mdx": "^9.1.1",
    "date-fns": "^2.22.1",
    "emotion-media-query": "^1.0.1",
    "gray-matter": "^4.0.3",
    "next": "^12.0.2",
    "next-mdx-remote": "^3.0.7",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "remark": "^13.0.0",
    "remark-html": "^13.0.1",
    "sass": "^1.34.1",
    "swr": "^0.5.6"
  }

and if i try to install MDXtag, i get this error

❯ npm i @mdx-js/tag
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.x || ^15.x || ^16.x" from @mdx-js/[email protected]
npm ERR! node_modules/@mdx-js/tag
npm ERR!   @mdx-js/tag@"*" from the root project

[1ak31sha]

some additional info, my recipes/[id]:

import Image from "next/image"
import Head from "next/head"
import { getAllRecipeIds, getRecipeData } from "../../lib/recipes"
import Layout from "../../components/layout"
import { css, jsx } from "@emotion/react"
import styled from "@emotion/styled"
import { useState } from "react"
import Checkbox from "@material-ui/core/Checkbox"
import { serialize } from "next-mdx-remote/serialize"
import { MDXRemote } from "next-mdx-remote"
import { Test } from "../../components/test.jsx"
import { MDXProvider } from "@mdx-js/react"
import Post from "../../recipes/thaicurrynoodles.mdx" // Assumes an integration is used to compile MDX -> JS.

const components = {
  em: (props) => <i {...props} />,
}

...
...
export async function getStaticProps({ params }) {
  const recipeData = await getRecipeData(params.id)

  const mdxSource = await serialize(recipeData.contentHTML)
  return {
    props: {
      recipeMetadata: recipeData,
      recipeContent: mdxSource,
      id: params.id,
    },
  }
}
export async function getStaticPaths() {
  const paths = getAllRecipeIds()
  return {
    paths,
    fallback: false,
  }
}
...
...

export default function Recipe({ recipeMetadata, recipeContent }) {
 
  ...
...
  return (
    <Layout>
      <Box>
        <Head>
          <title>{recipeMetadata.title}</title>
        </Head>
        <RecipePhotoAndInfoContainer>
          <div>{renderGallery(recipeMetadata.img)}</div>
          <div>{renderRecipeCalc(recipeMetadata.recipe)}</div>
        </RecipePhotoAndInfoContainer>
        <Test />
        <div
          css={css`
            text-align: center;
            height: 100vh;
            transition-duration: 0.2s;
            transition-property: background-color, color;
            margin: 0px;
          `}
        >
          <article>
            <h1> put metadata</h1>

            <MDXProvider components={components}>
              <Post />
            </MDXProvider>
            <div className="blog-content">
              // <MDXRemote {...recipeContent} components={(Test, Box, Head)} />
            </div>
          </article>
        </div>
      </Box>
    </Layout>
  )
}

[wooorm]

Your next config seems to be based on what we have on our website. The website is for the upcoming release of MDX 2.
That isn’t out yet, but I’d still recommend you use it. Use the next versions:

"@mdx-js/loader": "^2.0.0-rc.2",
"@mdx-js/react": "^2.0.0-rc.2",

[wooorm]

Annoying.
Could you try what it says in the error message?
You can also put that in an .npmrc file (https://github.com/wooorm/xdm/blob/5220d991835b3ffdfb2c047ae6d177c56f627c47/.npmrc#L1, only need the first line, 2nd line is unrelated)

[1ak31sha]

removing the package-lock.json and using --force worked! well, im onto a new error now :)

[wooorm]

AFK now but do share!

[1ak31sha]

AFK now but do share!

ok thank you so much! let me know if you want me to start a new discussion for this

Server Error
TypeError: (0 , remark__WEBPACK_IMPORTED_MODULE_3__.default) is not a function

 51 |   const matterResult = matter(fileContents)
  52 | 
> 53 |   const processedContent = await remark()
     |                                       ^
  54 |     .use(html)
  55 |     .process(matterResult.content)
  56 |   const contentHtml = processedContent.toString()

i am not using typsescript

lib/recipes.js

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'

const recipesDirectory = path.join(process.cwd(), 'recipes')

export function getSortedRecipesData() {
  const fileNames = fs.readdirSync(recipesDirectory)
  const allRecipesData = fileNames.map(fileName => {
    const id = fileName.replace(/\.mdx$/, '')

    const fullPath = path.join(recipesDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    const matterResult = matter(fileContents)

    return {
      id,
      ...matterResult.data
    }
  })
  return allRecipesData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1
    } else if (a > b) {
      return -1
    } else {
      return 0
    }
  })
}

export function getAllRecipeIds() {
  const fileNames = fs.readdirSync(recipesDirectory)

  return fileNames.map(fileName => {
    return {
      params: {
        id: fileName.replace(/\.mdx$/, '')
      }
    }
  })
}

export async function getRecipeData(id) {
  debugger;

  const fullPath = path.join(recipesDirectory, `${id}.mdx`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  const matterResult = matter(fileContents)

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

  return {
    id,
    contentHtml,
    ...matterResult.data
  }
}

[wooorm]

import remark from 'remark' -> import {remark} from 'remark'. See the readmes for the tools you use on how to use them! ;)