Error importing jsx-runtime about react-plock

[askides]

Hello Guys.

Please check out the new v3.0.0 version just published. In addition to a number of performance and bundle size improvements, the problem you reported has been fixed.

[askides]

Can you please provide your next version?

[philohelp]

Sure: Next.js v12.0.8

[philohelp]

To make Plock work fine I use this code with js and no typescript:

import Card from './card'

import dynamic from 'next/dynamic'

const Plock = dynamic(
  import('react-plock').then((mod) => mod.Plock),
  { ssr: false }
)

export default function BodySuppliers({
  hits,
  toggleModal,
  addedClasses = '',
}) {
  const breakpoints = [
    { size: 640, columns: 1 },
    { size: 768, columns: 2 },
    { size: 1024, columns: 3 },
    { size: 1280, columns: 4 },
    { size: 1536, columns: 6 },
  ]
  return (
    <div className={`${addedClasses}`}>
      <Plock nColumns={breakpoints} gap={15}>
        {hits.map((hit) => (
          <div key={hit.objectID} className="max-w-[250px]">
            <Card hit={hit} toggleModal={toggleModal} />
          </div>
        ))}
      </Plock>
    </div>
  )
}

[Ekaji]

while running npm run build i got a similar error
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/user/Documents/work/myproject/node_modules/react/jsx-runtime' imported from /home/user/Documents/work/myproject/node_modules/react-plock/index.js Did you mean to import react/jsx-runtime.js?
i resolved it by reaching into /node_modules/react-plock/index.js and changing
the first line from
import { jsx } from 'react/jsx-runtime';
to
import { jsx } from 'react/jsx-runtime.js';

ofcourse this might not be an ideal solution.

[philohelp]

I love this lib ! Thank you