Trying to use react-data-tables here and getting errors left right and center. Going crazy.
After following the instructions as per https://github.com/adazzle/react-data-grid and using the code samples from http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid I am having the following issues.
If I use this in my file
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';
var Toolbar = ReactDataGridPlugins.Toolbar;
var Selectors = ReactDataGridPlugins.Data.Selectors;
I get a "Cannot read property 'Toolbar' of undefined.
If I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import Toolbar from 'react-data-grid/addons';
import Selectors from 'react-data-grid/addons';
I get the following error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HostProviderList.
And if I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import {Toolbar} from 'react-data-grid/addons';
import {Selectors} from 'react-data-grid/addons';
I get this error
Warning: Unknown props onGridSort, columns, rowGetter, rowsCount, minHeight, onRowUpdated, toolbar, onAddFilter, minColumnWidth, columnEquality, enableCellSelect, rowHeight, enableRowSelect, rowKey, rowScrollTimeout, cellNavigationMode, headerRows, columnMetrics, cellMetaData, selectedRows, rowSelection, expandedRows, rowOffsetHeight, sortColumn, sortDirection, onSort, totalWidth, onViewportKeydown, onViewportKeyup, onViewportDragStart, onViewportDragEnd, onViewportDoubleClick, onColumnResize on tag. Remove these props from the element.
I am not sure what to do here. If I do just the basic data-grid as per the online example it works fine. However as soon as I try anything with the addons.jsx file it fails.
On a side note
nmp install react-data-grid/addons
does not work. The git repo is not found. However I do see that after doing an npm install of react-data-grid I do have a addons.jsx file that imports dist/react-data-grid.ui-plugins.js
The right way to import is
import { Toolbar, Data } from 'react-data-grid/addons';
const Selectors = Data.Selectors;
Related
I have an app that works well locally. But on production, I am getting this error.
enter image description here
enter image description here
I thought it is related to webpack but could not find any clue. I am stuck with that.
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import * as styled from 'styled-components';
import NotificationContext from 'og-merchant-portal-react-library/lib/NotificationContext/NotificationContext';
import FetchContext from 'og-merchant-portal-react-library/lib/FetchContext';
import { UserInfoContext } from 'og-merchant-portal-react-library';
import App from './App';
import { unregister } from './serviceWorker';
window.IngenicoLib = {
React,
ReactDOM,
moment,
NotificationContext,
FetchContext,
UserInfoContext,
'styled-components': styled,
};
I am getting the following error when trying to display the modal:
My code is the following:
What i am doing wrong?
The mistake is in import statment.
Replace
import {ReactDOM} from 'react-dom'
with
import ReactDOM from "react-dom"
Reason : As there is no named export of ReactDOM from "react-dom", it is not imported and the reference will be undefined. So, you are getting the error. ReactDOM is default export.
UPDATE
Replace
import {ReactDOM} from 'react-dom'
with
import ReactDOM from "react-dom/client"
Reason : Now react does't support importing ReactDOM from react-dom instead it supports importing ReactDOM from react-dom/client
For react v18 and above the import statement does have client included
so replacing
import {ReactDOM} from 'react-dom'
with
import ReactDOM from 'react-dom/client';
is advised
as per docs on react portals
I'm new to React and started exploring bootstrap few days ago. But, whenever I'm trying to import something from react-bootstrap, it's throwing error.
I've already tried reinstalling react-bootstrap. But it doesn't solve the problem. These are my imports:
import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine
The error is in some line in the ThemeProvider.js, which comes with react-bootstrap.
TypeError: Object doesn't support property or method 'createContext'
15 |
16 | var _react = _interopRequireWildcard(require("react"));
17 |
> 18 | var ThemeContext = _react.default.createContext({});
19 |
20 | var Consumer = ThemeContext.Consumer,
21 | Provider = ThemeContext.Provider;
When you import something wrapped around with {}, it refers to something that is exported with an explicit name identifier.
In this case: import {Button} from 'react-bootstrap/Button' would mean that file has explicitly named one of their exports Button. But that's unlikely, because conventionally with these libraries, when you import from a specific file like /Button, they will almost always use a default export instead.
The solution would be to simply get the default export by doing:
import Button from 'react-bootstrap/Button'
With a default export, you can name the import anything you want, even something like this:
import MyButton from 'react-bootstrap/Button'
Alternatively, you can just import from the head folder. In that case, you would actually have to use {} to fetch the named items.
import {Button, Input, Form} from 'react-bootstrap';
try this:
import {Button} from 'react-bootstrap';
or:
import Button from 'react-bootstrap/Button'
and you need to install bootstrap css and import it:
1.
npm install bootstrap
2.
import "bootstrap/dist/css/bootstrap.min.css"
When you are importing a Button or any component wrapped around with curly braces, you do not need to include the component name after the backslash.
simply put
import {Button} from 'react-bootstrap/';
when we import a component without wrapped around with {}, we need to give the component name like this.
import Button from 'react-bootstrap/Button';
I got this error when I wrote AppBar tag from material-ui into a code generated by gatsby new.
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element.
To avoid this, I wrote these code at the top of root template (_template.jsx) file.
import injectTapEventPlugin from 'react-tap-event-plugin';
try { // to prevent error because of loading twice
injectTapEventPlugin();
}
catch(e) {
console.warn( e );
}
This works perfectly with HMR, but it's ugly.
What is the correct way to resolve this problem?
UPDATE: To clarify - gatsby new clones gatsby-starter-default, and there are only React components.
Also, to import and write injectTapEventPlugin at the top of /html.js raises an error Warning: Unknown prop onTouchTap on <button> tag. It means injectTapEventPlugin() is not called properly.
You only need to import and add injectTapEventPlugin in your top level component from where you are rendering into your html element
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
You could put that code in html.js and it'll work everywhere
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { prefixLink } from 'gatsby-helpers'
import { TypographyStyle } from 'react-typography'
import typography from './utils/typography'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const BUILD_TIME = new Date().getTime()
export default class HTML extends React.Component {
...
You can take a look at this issue in gatsby repo on GitHub which also suggests that you put it in html.js
Is there a way to do a direct module import for ReactDOM's render method to minimize bundle size?
For example, this direct module import works for findDOMNode:
import findDOMNode from 'react-dom/lib/findDOMNode';
...but this does not:
import { render } from 'react-dom/lib/ReactMount';
import { render } from 'react-dom';
Worked for me.