search

inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.44k stars 57 forks source link

Problems with Vite #294

Closed louwers closed 1 year ago

louwers commented 2 years ago

Relevant code or config

What you did:

npm create vite react-data-grid-vite --template react-ts
cd react-data-grid-vite
npm install @inovua/reactdatagrid-enterprise

Replace App.tsx with the following:

import './App.css'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise';

const columns = [
  { name: 'name', header: 'Name', minWidth: 50, defaultFlex: 2 },
  { name: 'age', header: 'Age', maxWidth: 1000, defaultFlex: 1 }
]

const gridStyle = { minHeight: 550 }

const dataSource = [
  { id: 1, name: 'John McQueen', age: 35 },
  { id: 2, name: 'Mary Stones', age: 25 },
  { id: 3, name: 'Robert Fil', age: 27 },
  { id: 4, name: 'Roger Robson', age: 81 },
  { id: 5, name: 'Billary Konwik', age: 18 },
  { id: 6, name: 'Bob Martin', age: 18 },
  { id: 7, name: 'Matthew Richardson', age: 54 },
  { id: 8, name: 'Ritchie Peterson', age: 54 },
  { id: 9, name: 'Bryan Martin', age: 40 },
  { id: 10, name: 'Mark Martin', age: 44 },
  { id: 11, name: 'Michelle Sebastian', age: 24 },
  { id: 12, name: 'Michelle Sullivan', age: 61 },
  { id: 13, name: 'Jordan Bike', age: 16 },
  { id: 14, name: 'Nelson Ford', age: 34 },
  { id: 15, name: 'Tim Cheap', age: 3 },
  { id: 16, name: 'Robert Carlson', age: 31 },
  { id: 17, name: 'Johny Perterson', age: 40 }
]

const App = () => <ReactDataGrid
  idProperty="id"
  columns={columns}
  dataSource={dataSource}
  style={gridStyle}
/>

export default App

Add licenseKey and run:

npm run dev

What happened:

I get a lot of errors like this.

✘ [ERROR] Could not resolve "@babel/runtime/helpers/interopRequireDefault"

    node_modules/@inovua/reactdatagrid-community/packages/Overlay/src/eventManager/matchesTarget.js:9:37:
      9 │ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@babel/runtime/helpers/interopRequireDefault" as external to exclude it
  from the bundle, which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

After installing @babel/runtime, I get these errors:

✘ [ERROR] Could not resolve "prop-types"

    node_modules/@inovua/reactdatagrid-community/Layout/ColumnLayout/index.js:34:48:
      34 │ var _propTypes = _interopRequireDefault(require("prop-types"));
         ╵                                                 ~~~~~~~~~~~~

After installing prop-types. I get this in the console:

index.js:855 Uncaught TypeError: Cannot read properties of null (reading 'length')
    at InovuaVirtualList2.getCleanupRows (index.js:855:31)
    at InovuaVirtualList2.cleanupRows (index.js:868:13)
    at InovuaVirtualList2.UNSAFE_componentWillReceiveProps (index.js:1548:14)
    at callComponentWillReceiveProps (react-dom.development.js:14428:14)
    at updateClassInstance (react-dom.development.js:14665:7)
    at updateClassComponent (react-dom.development.js:19695:20)
    at beginWork (react-dom.development.js:21611:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
react-dom.development.js:18687 The above error occurred in the <InovuaVirtualList2> component:

Reproduction repository:

https://github.com/louwers/react-data-grid-vite-reproduction

Problem description:

See above. I expect reactdatagrid to work well with Vite, since it's becoming a popular tool for React development.

louwers commented 2 years ago

OK looks like the first two issues are Vite related.

288 tracks the later...

inovua-admin commented 1 year ago

Install the version 5.2.3, should work.

robozb commented 1 year ago

Install the version 5.2.3, should work.

It doesn't solve the problem :(

  "dependencies": {
    "@inovua/reactdatagrid-community": "^5.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
...

    {
      detail: undefined,
      id: '',
      location: {
        column: 61,
        file: 'node_modules/@inovua/reactdatagrid-community/Layout/ColumnLayout/HeaderLayout/Header/HeaderGroup.js',   
        length: 46,
        line: 22,
        lineText: 'var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "@babel/runtime/helpers/assertThisInitialized" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "@babel/runtime/helpers/assertThisInitialized"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 48,
        file: 'node_modules/@inovua/reactdatagrid-community/Layout/ColumnLayout/HeaderLayout/Header/HeaderGroup.js',   
        length: 33,
        line: 24,
        lineText: 'var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "@babel/runtime/helpers/inherits" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "@babel/runtime/helpers/inherits"'
    },
    ... 670 more items
  ],
  warnings: []
}
ricardo-reis-1970 commented 1 year ago

Hello all.

I hope this helps.

I am developing an enterprise app in my company. I spent 48 hours debating whether or not to ditch ReactDataGrid altogether, but it just started working... sort of. All I had to do was npm install @babel/runtime.

Here's the relevant part of my package.json:

  "dependencies": {
    "@babel/runtime": "^7.21.0",
    "@inovua/reactdatagrid-community": "^5.2.3",
    "axios": "^1.3.5",
    "bulma": "^0.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "vite": "^4.2.0",
    "vite-aliases": "^0.11.0"
  }

As you can see, I'm using vite 4.2.0.

Caveat

Everything is not perfect, as for instance column menus and context menus insist on not working. At first I thought this was a Community version limitation, but I created another project with create-react-app and everything works.

Obviously, this is very wrong. If ReactDataGrid will only work under babel, I for one would very much like to learn about all the dependencies that are strictly required. My create-react-app project has the following under node_modules:

@babel
babel-jest
babel-loader
babel-plugin-istanbul
babel-plugin-jest-hoist
babel-plugin-macros
babel-plugin-named-asset-import
babel-plugin-polyfill-corejs2
babel-plugin-polyfill-corejs3
babel-plugin-polyfill-regenerator
babel-plugin-transform-react-remove-prop-types
babel-preset-current-node-syntax
babel-preset-jest
babel-preset-react-app

not to mention the 120 things under @babel itself that seem to be every single one of them an individual package, with no apparent way to install them all.

Adding to the whole pile of... trouble here, any dependency analysis will not reveal these hidden dependencies:

$ npm-remote-ls @inovua/reactdatagrid-community@5.9.0
└─ @inovua/reactdatagrid-community@5.9.0
   ├─ lodash.throttle@4.1.1
   ├─ object-assign@4.1.1
   ├─ lodash.debounce@4.0.8
   ├─ resize-observer-polyfill@1.5.1
   ├─ eventemitter3@4.0.7
   ├─ shallowequal@0.2.2
   │  └─ lodash.keys@3.1.2
   │     ├─ lodash.isarray@3.0.4
   │     ├─ lodash.isarguments@3.1.0
   │     └─ lodash._getnative@3.9.1
   ├─ fast-deep-equal@3.1.3
   ├─ @types/lodash.debounce@4.0.7
   │  └─ @types/lodash@4.14.192
   └─ @types/lodash.throttle@4.1.7
      └─ @types/lodash@4.14.192

No explicit @babel references whatsoever. Should I just install the whole @babel lot and then remove one by one until the whole thing stops working? Or should I just go dirty and copy the @babel folder from a create-react-app project and paste it under node_modules? And whatever else should I be installing? My DevOps is absolutely loving this.

Because one thing is for sure: I am closer to ditch this library and go vanilla-native on my tables than to quit on vite.

nizur commented 1 year ago

Trying to use 5.9.1 and it still seems to be an issue. Looks like our company will be using AG Grid instead.

robozb commented 1 year ago

Here is all good with Vite.

My package.json: 

...
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@inovua/reactdatagrid-community": "^5.8.4",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.11",
    "@mui/x-date-pickers": "^6.2.0",
    "@react-keycloak/web": "^3.4.0",
    "axios": "^1.3.4",
    "bootstrap": "^5.2.3",
    "dayjs": "^1.11.7",
    "detect-browser": "^5.3.0",
    "keycloak-js": "^21.0.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "nanoid": "^4.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-bootstrap-typeahead": "^6.0.0",
    "react-datepicker": "^4.11.0",
    "react-dom": "^18.2.0",
    "react-pro-sidebar": "^1.0.0",
    "react-router-dom": "^6.8.2",
    "react-select": "^5.7.0",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "sass": "^1.58.3",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
...

Vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
  base: "/",
  css: {
    devSourcemap: true, // this one
    preprocessorOptions: {
      scss: {
        additionalData: `@import "bootstrap/scss/bootstrap";`
      }
    }    
  },
  server: {
    host: "0.0.0.0",
    proxy: {
      '/api': {
           target: 'http://localhost:82',
           changeOrigin: true,
           secure: false,      
           ws: true
       },
       '/tmp': {
           target: 'http://localhost:82',
           changeOrigin: true,
           secure: false,      
           ws: true
       },     

    },
  }, 

  build: {
    sourcemap: true
  }

})