React Ag-Grid ag-grid.css Module not found: Can't resolve 'ag-grid-community/styles/ag-grid.css' 해결방법

개발자정보

React Ag-Grid ag-grid.css Module not found: Can't resolve 'ag-grid-community/styles/ag-grid.css' 해결방법

쿠카곰돌이 2023. 10. 31. 17:46

오류 :

Module not found: Can't resolve 'ag-grid-community/styles/ag-grid.css' in 'C:

해결방법 아래 2라인 추가 했음.

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';

ModuleRegistry.registerModules(AllCommunityModules);

오류 소스

import { useState } from "react";

import { render } from "react-dom";

import { AgGridReact } from "@ag-grid-community/react";

import "ag-grid-community/styles/ag-grid.css";

import "ag-grid-community/styles/ag-theme-alpine.css";

const AgGridPage = () => {

const [rowData] = useState([

{ make: "Toyota", model: "Celica", price: 35000 },

{ make: "Ford", model: "Mondeo", price: 32000 },

{ make: "Porsche", model: "Boxter", price: 72000 }

]);

const [columnDefs] = useState([

{ field: "make" },

{ field: "model" },

{ field: "price" }

]);

return (

</div>

);

};

export default AgGridPage;

수정 소스

import { useState } from "react";

import { AgGridReact } from "@ag-grid-community/react";

// import { CellValueChangedEvent, GridApi, RowDataChangedEvent, RowSelectedEvent} from "@ag-grid-community/core";

import "@ag-grid-community/core/dist/styles/ag-grid.css";

// import { AllModules } from '@ag-grid-enterprise/all-modules';

import "@ag-grid-community/core/dist/styles/ag-theme-alpine.css";

import "@ag-grid-community/core/dist/styles/ag-theme-material.css";

import { ModuleRegistry, AllCommunityModules } from '@ag-grid-community/all-modules';

function AgGridPage() {

// ModuleRegistry.registerModules(AllCommunityModules);

// platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

// ModuleRegistry.registerModules(AllModules);