Bootstrap4.css failing on grid component
jswift24 opened this issue · comments
Is there an existing issue for this?
- 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
- Install node, next.js, react
npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid
npm i --save @devexpress/dx-react-grid-bootstrap4
- create demo.js and fill in the code above
- run
next dev
in command line to start the next.js server - point browser to
localhost:3000/demo
Environment
Using latest available versions of each component as of 12/10/2022
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
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.