[DataGrid] Build error: "Cannot find module '../../..'" and "Cannot find namespace 'Chai'"

[Murloc6]

I tried to use the Data-grid component (which is super awesome by the way!).
I installed it from npmjs (npm install --save @material-ui/data-grid) and import it in my project. I discovered some build errors, corresponding to module import.

• [ X] The issue is present in the latest release.
• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I use the data-grid component in my project with the following code :

[...]
import { DataGrid, ColDef } from '@material-ui/data-grid';
[...]
const DATAGRID_COLUMNS: ColDef[] = [
    { field: 'id', headerName: 'ID', width: 250 },
    { field: 'name', headerName: 'Nom', width: 300 },
    {
        field: 'latitude',
        headerName: 'Latitude',
        width: 130,
    },
    {
        field: 'longitude',
        headerName: 'Longitude',
        width: 130,
    },
]
[...]
return (
[...]
 <DataGrid columns={DATAGRID_COLUMNS} rows={stations} pageSize={10} />
[...]
);

I run the npm run build and the following errors occured :

ERROR in [at-loader] ./node_modules/@material-ui/data-grid/dist/data-grid.d.ts:1645:96 
    TS2307: Cannot find module '../../..' or its corresponding type declarations.

ERROR in [at-loader] ./node_modules/@material-ui/data-grid/dist/data-grid.d.ts:1794:13 
    TS2503: Cannot find namespace 'Chai'.

Despite these errors, the build finished and the rendering is exactly what I excepted.

Expected Behavior 🤔

I expected to have the exact same render but without any errors.

Steps to Reproduce 🕹

Steps:

1. install the data-grid component
2. import it in my project
3. run the build script from npm
4. discover errors during build

Context 🔦

These errors during the build is not a good thing since I build this project in a CI and it does not allow errors during builds.

Your Environment 🌎

tsconfig.json :

{
    "compilerOptions": {
        "outDir": "./cubicweb_tdev_realtime/data/",
        "sourceMap": true,
        "noImplicitAny": true,
        "declaration": true,
        "strictNullChecks": true,
        "module": "CommonJS",
        "target": "ES6",
        "jsx": "react"
    },
    "include": ["./cubicweb_appjs/appjs/**/*"]
}

Tech	Version
Material-UI X	v4.0.0-alpha.9
React	16.13.1
Browser	Firefox 78.4.1esr
TypeScript	4.0.5
npm	6.14.8

[oliviertassinari]

@Murloc6 Thanks for raising. What do you think about this fix?

diff --git a/packages/grid/_modules_/grid/utils/mergeOptions.ts b/packages/grid/_modules_/grid/utils/mergeOptions.ts
index b78cac72..26395f36 100644
--- a/packages/grid/_modules_/grid/utils/mergeOptions.ts
+++ b/packages/grid/_modules_/grid/utils/mergeOptions.ts
@@ -20,7 +20,7 @@ export function mergeColTypes(
   return hydratedOptionColTypes;
 }

-export function removeUndefinedProps(options: Object) {
+export function removeUndefinedProps(options: Object): Object {
   const cleanedOptions = { ...options };
   Object.keys(options).forEach((key) => {
     if (options.hasOwnProperty(key) && options[key] === undefined) {

Do you want to work on a pull request? :)

[Murloc6]

Thank you for your quick answer!

This fix the second error, which is :

ERROR in [at-loader] ./node_modules/@material-ui/data-grid/dist/data-grid.d.ts:1794:13 
    TS2503: Cannot find namespace 'Chai'.

To be honest I don't really understand why but it works :).

But the first error is still there :

ERROR in [at-loader] ./node_modules/@material-ui/data-grid/dist/data-grid.d.ts:1645:96 
    TS2307: Cannot find module '../../..' or its corresponding type declarations.

It seems to be related to the reselect (https://github.com/reduxjs/reselect) lib, which is used here https://github.com/mui-org/material-ui-x/blob/b7cb4f36368487a9b0bfb3befdeaa25708b52453/packages/grid/_modules_/grid/hooks/features/selection/selectionSelector.ts#L6
This leads to the following code in packages/grid/data-grid/dist/data-grid.d.ts :

declare const selectedRowsCountSelector: OutputSelector<GridState, number, (res: Record<import("../../..").RowId, boolean>) => number>

And the "../../.." import is not suitable here.

Nevertheless, I do not know how to fix this...

[oliviertassinari]

https://unpkg.com/@material-ui/[email protected]/dist/data-grid.d.ts

Hum, maybe we should go back to using the build infrastructure of the core components, or at least, to improve the CI to fail. It's the second time we have this problem, not a 3rd!

[Murloc6]

It looks like the problem appeared because of the "paths" in the tsconfig.js. I read this article https://www.techatbloomberg.com/blog/10-insights-adopting-typescript-at-scale/ and if you read the chapter 4, the problem seems exactly the same.

They solved this issue by using ambient-modules.d.ts but it would be a solution if the _modules_ module in the data-grid lib would be a npm package which could be resolved using ambient modules.

I am not sure this is a trivial solution. If you have a simpler solution I am in :).

Thank you again for your help.

[tooppaaa]

Hello.

The Chai issue is to me, related to spec not being ignored. packages\grid\data-grid\src\DataGrid.test.tsx

diff --git a/packages/grid/tsconfig.build.json b/packages/grid/tsconfig.build.json
index b6e476a..48bc355 100644
--- a/packages/grid/tsconfig.build.json
+++ b/packages/grid/tsconfig.build.json
@@ -10,5 +10,5 @@
     "rootDir": "./"
   },
   "include": ["./data-grid/src", "./x-grid/src", "./_modules_/**/*"],
-  "exclude": ["__tests__", "**/*.test.ts", "node_modules"]
+  "exclude": ["__tests__", "**/*.test.*", "node_modules"]

[iskotar]

Getting this error during the deploy. But no issue when run it locally.

Failed to compile.
Could not find a declaration file for module '@mui/x-data-grid'. '/tmp/build_224eab12/node_modules/@mui/x-data-grid/index-cjs.js' implicitly has an 'any' type.

Try `npm i --save-dev @types/mui__x-data-grid` if it exists or add a new declaration (.d.ts) file containing `declare module '@mui/x-data-grid';`  TS7016

[mjamry]

I have the same issue as above -> @mui/x-data-grid/index-cjs.js' implicitly has an 'any' type.
It helps to add "noImplicitAny": false option to the tsconfig file, but it is a quite poor solution.

I'm using "@mui/x-data-grid": "^5.0.0-beta.7"

Can you tell when we can expect a fix for that issue ?