When using react-syntax-highlighter

[jessedoka]

Describe the bug
When running development npm run dev shows moduleNotFoundError

 ERROR  UNKNOWN

Module not found: Error: Can't resolve 'react-syntax-highlighter/dist/esm/styles/hljs' in
'../portfolio/src/pages/blog'



  ModuleNotFoundError: Module not found: Error: Can't resolve 'react-syntax-highlighter/dist/esm/styles/hljs' in '../portfolio/src/pages/blog'


ERROR  UNKNOWN

Module not found: Error: Can't resolve 'react-syntax-highlighter' in '../portfolio/src/pages/blog'

ModuleNotFoundError: Module not found: Error: Can't resolve 'react-syntax-highlighter' in '../portfolio/s
  rc/pages/blog'

To Reproduce
Steps to reproduce the behavior:

npm i @types/react-syntax-highlighter --save

shows in package.json

     "devDependencies": {
        "@types/mdx-js__react": "^1.5.5",
        "@types/node": "^20.3.1",
        "@types/react-syntax-highlighter": "^15.5.7",
        "autoprefixer": "^10.4.7",
        "gatsby-plugin-netlify": "^5.1.0",
        "gatsby-plugin-page-creator": "^5.11.0",
        "gatsby-plugin-postcss": "^6.11.0",
        "postcss": "^8.4.14",
        "sharp": "^0.32.1",
        "tailwindcss": "^3.1.6",
        "typescript": "^5.1.3"
      },

file: {mdx.fields__slug}.tsx

import * as React from 'react';
import Navbar from '../../components/navbar';
import { graphql } from 'gatsby';
import { MDXProvider } from '@mdx-js/react';
import SyntaxHighlighter from 'react-syntax-highlighter'
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const components = {
  h1: (props: any) => <h1 className="text-3xl font-bold pl-3 pb-3" {...props} />,
  h2: (props: any) => <h2 className="text-2xl font-bold pl-3 pb-3" {...props} />,

  p: (props: any) => <p className="p-3" {...props} />,

  // code
  pre: (props: any) => <pre className="m-3" {...props} />,
  inlineCode: (props: any) => <code className="p-3" {...props} />,
  code: (props: any) => {
    const { className, children } = props;
    const language = className.replace("language-", "");
    return (
      <SyntaxHighlighter language={language} children={children} style={atomOneDark} />
    )
  }
}



const BlogPost = ({ data: { mdx }, children }: {data: any, children: any}) => {
  return (
    <main className="flex flex-col mb-5">
      	<Navbar pageTitle={mdx.frontmatter.title} />
      <div className="mx-auto mb-auto sm:max-w-2xl max-w-sm items-center mt-8">
        <h1 className="text-3xl font-bold pl-3 pb-3">
            {mdx.frontmatter.title}
        </h1>
        <p className='text-sm pl-3 pb-3'>{mdx.frontmatter.date}</p>
        <MDXProvider components={components}>
          <div className="pr-6">
            {children}
          </div>
        </MDXProvider>
      </div>
    </main>
  );
}

export const query = graphql`
  query MyQuery($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
    }
  }
`;

export default BlogPost;

Expected behavior
A clear and concise description of what you expected to happen.

The page should load up with syntax highlighting, not sure why it can't find the package, when checking I did find it inside my node_modules.

Desktop (please complete the following information):

• OS: WSL2 (Windows 11)
• Browser: Brave
• Version:

Additional context

[mtrabelsi]

same here this does NOT look working, i was evaluating other libs

[rimakan]

Try to import SyntaxHighlighter in the following way:

import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light';

I hope it will help you.

As for the styles' error, try to play around with imports as well.