Bootstrap4.css failing on grid component

[jswift24]

Is there an existing issue for this?

• [X] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

React Grid

Current Behaviour

I'm trying to reproduce the first "getting started" page with the grid component: docs and sandbox. I'm getting the following error:

./pages/demo.js:7:0
Module not found: Package path ./dist/dx-react-grid-bootstrap4.css is not exported from package D:\Documents-Alon\DefiReturn Code\defireturn_ui_react_next\node_modules\@devexpress\dx-react-grid-bootstrap4 (see exports field in D:\Documents-Alon\DefiReturn Code\defireturn_ui_react_next\node_modules\@devexpress\dx-react-grid-bootstrap4\package.json)
   5 |   TableHeaderRow,
   6 | } from "@devexpress/dx-react-grid-bootstrap4";
>  7 | import "@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css";
   8 | 
   9 | const columns = [
  10 |   { name: "id", title: "ID" },

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

My browser is pointing to localhost:3000/demo. Here's my code for demo.js:

import React from "react";
import {
  Grid,
  Table,
  TableHeaderRow,
} from "@devexpress/dx-react-grid-bootstrap4";
import "@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css";

const columns = [
  { name: "id", title: "ID" },
  { name: "product", title: "Product" },
  { name: "owner", title: "Owner" },
];
const rows = [
  { id: 0, product: "DevExtreme", owner: "DevExpress" },
  { id: 1, product: "DevExtreme Reactive", owner: "DevExpress" },
];

export default () => (
  <div className="card">
    <Grid rows={rows} columns={columns}>
      <Table />
      <TableHeaderRow />
    </Grid>
  </div>
);

If I comment out the line below, the app works fine but with no formatting:

//import "@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css";

Expected Behaviour

Expecting the app to work with bootstrap4.css

Steps to Reproduce

1. Install node, next.js, react
2. npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid
3. npm i --save @devexpress/dx-react-grid-bootstrap4
4. create demo.js and fill in the code above
5. run next dev in command line to start the next.js server
6. point browser to localhost:3000/demo

Environment

Using latest available versions of each component as of 12/10/2022

[marcbambalan]

Hello @jswift24,

I tried to reproduce the issue, but failed. I recommend that you refer to the following NextJS's documentation on possible ways to resolve this issue: NextJS - Module Not Found. You can try using a relative link with node_modules. For example:

import '../node_modules/@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';

If this does not help, please contact us in our Support Center.

Regards, Marc

[github-actions[bot]]

Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.