Error when using Grid component in NextJS

[pharaxe]

Summary

When importing the component, NextJS seems to choose the wrong JavaScript module file. This might be a bug with the way the library is packaged - OR it might just be me not setting up Next right. But I figured I'd post a issue in case others are running into this.

If I try to import it normally like so:

import { Grid } from "react-visual-grid";

I get this error:

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/home/bsweedler/grid-test/node_modules/react-visual-grid/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.``

I can get the component to render correctly if I import it like this

import { Grid } from "react-visual-grid/dist/react-visual-grid.esm";

But that's not ideal since TypeScript doesn't give nice type completions if I do this.

Steps to Reproduce

This is reproducible in a fresh NextJS app:

The Node version I'm using is 18.3

1. Go to a fresh directory and run yarn create next-app
2. Answer Y to the options (I said No to Tailwind and to import Aliases but it shouldn't matter)

3. Install react-visual grid: yarn add react-visual-grid

4. Go to the file src/app/page.tsx and replace it's content with the example from the docs:

"use client";

import { Grid } from "react-visual-grid/dist/react-visual-grid.esm";
import "react-visual-grid/dist/react-visual-grid.css";

const App = () => {
  const images = Array.from({ length: 30 }, (_, index) => ({
    src: `https://picsum.photos/id/${index + 1}/800/600`,
    alt: `Image ${index + 1}`,
  }));

  return (
    <div>
      <Grid images={images} width={800} height={600} />
    </div>
  );
};

export default App;

5. Run yarn dev

6. Go to localhost:3000

Expected Behavior

Should see the photogrid load like this:

Actual Behavior

Next throws this error:

[prabhuignoto]

@pharaxe i have published a newer version. can you check and let me know if you see the same issue?

[pharaxe]

Wow thanks for the quick response!

I tried installing the new version and I am getting a new error during the build time.

error - ./node_modules/react-visual-grid/dist/react-visual-grid.js:11:0
Module not found: Can't resolve 'React'

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

Import trace for requested module:
./src/app/page.tsx

This is after running yarn add react-visual-grid@latest. I tried again blowing away my node_modules and yarn.lock files to be sure.

My package.json files includes React: "react": "18.2.0"

Unsure!

[2myat9]

For my project (using Next 13, React 18, TypeScript 5) I am receiving the same error message about ESM import. I got around it by enabling loose mode in my next config, like this:

experimental: {
    esmExternals: "loose",
  },

However, the component is not rendering correctly and just looks really buggy. I've attached my code and the output.

"use client";
import { Grid } from "react-visual-grid";

// generate random images using lorem picsum service
const images = Array.from({ length: 50 }, (_, i) => ({
  src: `https://picsum.photos/id/${Math.round(Math.random() * 110)}/800/600`,
  alt: `Image ${i + 1}`,
}));

export default function ImageGallery() {
  return <Grid images={images} />;
}

[prabhuignoto]

@2myat9 you also need to import the styles as they need to be loaded separately

import { Grid } from "react-visual-grid";
import "react-visual-grid/dist/react-visual-grid.css";

Also I have just released a new version where you dont need to set esmExternals to loose.

[podviaznikov]

doesn't work for me with next 14.

Getting "Collecting page data ..TypeError: (0 , p.createContext) is not a function" error.