Unexpected token 'export'

[fijiwebdesign]

Describe the bug

node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js:1
export { default as coy } from './coy';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at react-syntax-highlighter/dist/esm/styles/prism (/Users/user/code/seedess/admin-panel/.next/server/pages/website.js:945:18)

To Reproduce
Steps to reproduce the behavior:

Installed and used:

import Card from '@mui/material/Card'

import { Prism as ReactSyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

type Props = {
  children?: React.ReactNode
};

export const CardCodeBlock = ({ children }: Props) => {
  return (
    <Card>
      <ReactSyntaxHighlighter language="html" style={vscDarkPlus}>
        {children}
      </ReactSyntaxHighlighter>
    </Card>
  )
}

export default CardCodeBlock

Expected behavior
Should not have a compile syntax error.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

node -v
v19.0.0

package.json
    "react-syntax-highlighter": "^15.5.0",

Additional context
Add any other context about the problem here.

[fijiwebdesign]

I managed to get around this with using a async import():

import Card from '@mui/material/Card'
import { useEffect, useState } from 'react';

import { Prism as ReactSyntaxHighlighter } from 'react-syntax-highlighter'

type Props = {
  children?: React.ReactNode
};

export const CardCodeBlock = ({ children }: Props) => {

  const [ style, setStyle ] = useState({})
  useEffect(() => {
    import('react-syntax-highlighter/dist/esm/styles/prism/material-dark')
    .then(mod => setStyle(mod.default));
  })

  return (
    <Card>
      <ReactSyntaxHighlighter language="html" style={style}>
        {children}
      </ReactSyntaxHighlighter>
    </Card>
  )
}

export default CardCodeBlock

Is there a typescript or node package.json setting to allow importing js files directly with import?

[abdelrhman-adel]

can't you just Import the cjs version, all you need is to replace the esm in your path to cjs, worked for me

[rookasrudzianskas]

I managed to get around this with using a async import():

import Card from '@mui/material/Card'
import { useEffect, useState } from 'react';

import { Prism as ReactSyntaxHighlighter } from 'react-syntax-highlighter'

type Props = {
  children?: React.ReactNode
};

export const CardCodeBlock = ({ children }: Props) => {

  const [ style, setStyle ] = useState({})
  useEffect(() => {
    import('react-syntax-highlighter/dist/esm/styles/prism/material-dark')
    .then(mod => setStyle(mod.default));
  })

  return (
    <Card>
      <ReactSyntaxHighlighter language="html" style={style}>
        {children}
      </ReactSyntaxHighlighter>
    </Card>
  )
}

export default CardCodeBlock

Is there a typescript or node package.json setting to allow importing js files directly with import?

As of 18.04.2023, in the latest version of react-syntax-highlighter: 15.5.0, this fixed the issue.

[gdldg]

I managed to get around this with using a async import():

import Card from '@mui/material/Card'
import { useEffect, useState } from 'react';

import { Prism as ReactSyntaxHighlighter } from 'react-syntax-highlighter'

type Props = {
  children?: React.ReactNode
};

export const CardCodeBlock = ({ children }: Props) => {

  const [ style, setStyle ] = useState({})
  useEffect(() => {
    import('react-syntax-highlighter/dist/esm/styles/prism/material-dark')
    .then(mod => setStyle(mod.default));
  })

  return (
    <Card>
      <ReactSyntaxHighlighter language="html" style={style}>
        {children}
      </ReactSyntaxHighlighter>
    </Card>
  )
}

export default CardCodeBlock

Is there a typescript or node package.json setting to allow importing js files directly with import?

As of 18.04.2023, in the latest version of react-syntax-highlighter: 15.5.0, this fixed the issue.

I am using version 15.5.0 and I'm also getting the export issue. @abdelrhman-adel 's workaround solved it for me - cheers for that Abdelr. Running on top of NextJS v12.1.0

[bodinsamuel]

Still an issue for me in 15.5.0 and NextJS 13.4.9 (but also in Vite).
Using cjs instead of esm does the trick but feels wrong.

[mashwishi]

I managed to get around this with using a async import():

import Card from '@mui/material/Card'
import { useEffect, useState } from 'react';

import { Prism as ReactSyntaxHighlighter } from 'react-syntax-highlighter'

type Props = {
  children?: React.ReactNode
};

export const CardCodeBlock = ({ children }: Props) => {

  const [ style, setStyle ] = useState({})
  useEffect(() => {
    import('react-syntax-highlighter/dist/esm/styles/prism/material-dark')
    .then(mod => setStyle(mod.default));
  })

  return (
    <Card>
      <ReactSyntaxHighlighter language="html" style={style}>
        {children}
      </ReactSyntaxHighlighter>
    </Card>
  )
}

export default CardCodeBlock

Is there a typescript or node package.json setting to allow importing js files directly with import?

Same here! still issue 15.5.0 + nextjs 13.4.9 + reactjs/reacdom 18.2.0 (typescript)

bless you bro!

[N0I0C0K]

still issue 15.5.0 + nextjs 13.4.12, thanks @abdelrhman-adel , change the path esm -> cjs solved it for me!

[citrus327]

yet another ESM and CJS issue, and add exports field in package.json will pretty much solve this. Consider "pure esm" this package would also work.

https://arethetypeswrong.github.io/?p=react-syntax-highlighter%4015.5.0
https://publint.dev/react-syntax-highlighter@15.5.0