Open daverag opened 3 years ago
I have it too but I don't find any solution now
Facing the same issue, is there a fix?
Any update on this issue?
Seems to be a library issue then? :( Did anyone find a solution for this?
Upgrading a project and encountering the same issue: I have tried eliminating the props one by one to check if some of the data is in an incorrect format.
<BootstrapTable keyField='id' columns={columns} data={this.state.contacts} bordered={false} striped={false} headerClasses='text-primary' ref='table' options={this.tableOptions} bootstrap4={true} onRowClick={this.openModal} filter={filterFactory()} pagination={contacts_pagination} remote={{ pagination: true }} onTableChange={this.handleContactsTableChange} noDataIndication={'No records found'} />
If anyone is still experiencing this and is using vite to bundle, I found that the following works for me
// vite.config.ts
export default defineConfig({
...
resolve: {
alias: {
events: 'rollup-plugin-node-polyfills/polyfills/events',
...
}
}
}
using this module https://www.npmjs.com/package/rollup-plugin-node-polyfills
Hi @clemens1483 , i have added the piece of code you mentioned and it started working, but when i deploy to production it still has the issue. any work around for this ?
Hi there,
I faced the same issue but couldn't find any solution on the internet. However, I managed to fix the issue by installing the 'react-scripts' library. It worked perfectly for me.
I am not sure about its compatibility with other versions, but the specified version 1.1.4 worked for me. To install it, simply run: npm install react-scripts@1.1.4
I am sharing my solution here to assist anyone else who may be struggling with the same issue. Hopefully, this helps someone out there.
Cheers!
Still a problem until today, darn bootstrap is a tech debt.
If anyone is still experiencing this and is using vite to bundle, I found that the following works for me
// vite.config.ts export default defineConfig({ ... resolve: { alias: { events: 'rollup-plugin-node-polyfills/polyfills/events', ... } } } using this module https://www.npmjs.com/package/rollup-plugin-node-polyfills
works in development, but when you build for production, you'll get React Error 130
I'll still ask you have you tried using react-scripts solution mentioned above in the thread?
Hi @aprilmintacpineda, update your importing method and it will fix the issue. Use this and it will work fine in production as well.
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css'; import paginationFactory from 'react-bootstrap-table2-paginator'; import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search, CSVExport, } from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';
import BootstrapTable from 'react-bootstrap-table-next';
We already use these imports.
@aprilmintacpineda , Check for toolkitprovider etc as well. basically the issue is due to importing , in their docs they haven't updated it so that's why we are facing it.
So, I ran grep -r "from \'events" .
and I saw the following:
./node_modules/@types/node/ts4.8/dom-events.d.ts:import {} from 'events'; // Make this an ambient declaration
./node_modules/@types/node/dom-events.d.ts:import {} from 'events'; // Make this an ambient declaration
./node_modules/@nodelib/fs.walk/out/readers/async.d.ts:import { EventEmitter } from 'events';
./node_modules/lint-staged/lib/state.js:import EventEmitter from 'events'
./node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:import require$$0$5 from 'events';
./node_modules/vite/dist/node/cli.js:import { EventEmitter } from 'events';
./node_modules/rollup/dist/es/shared/watch.js:import require$$0$3 from 'events';
./node_modules/axios/lib/adapters/http.js:import EventEmitter from 'events';
so I tried, yarn add events
which will install https://www.npmjs.com/package/events and then I removed the solution that suggested adding events: 'rollup-plugin-node-polyfills/polyfills/events'
to vite.config.ts
and it worked but only it only worked for development build.
So, I ran
grep -r "from \'events" .
and I saw the following:./node_modules/@types/node/ts4.8/dom-events.d.ts:import {} from 'events'; // Make this an ambient declaration ./node_modules/@types/node/dom-events.d.ts:import {} from 'events'; // Make this an ambient declaration ./node_modules/@nodelib/fs.walk/out/readers/async.d.ts:import { EventEmitter } from 'events'; ./node_modules/lint-staged/lib/state.js:import EventEmitter from 'events' ./node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:import require$$0$5 from 'events'; ./node_modules/vite/dist/node/cli.js:import { EventEmitter } from 'events'; ./node_modules/rollup/dist/es/shared/watch.js:import require$$0$3 from 'events'; ./node_modules/axios/lib/adapters/http.js:import EventEmitter from 'events';
There was one entry coming from axios that was really long so I tried,
yarn add events
which will install https://www.npmjs.com/package/events and then I removed the solution that suggested addingevents: 'rollup-plugin-node-polyfills/polyfills/events'
tovite.config.ts
and it worked but only it only worked for development build.
Thanks for your solution! After I installed “npm i events” it works now. In development and production mode "vite Preview --port 3000" I'm Using the following Versions: "vite": "^4.4.11", "react": "^18.2.0", "react-bootstrap": "0.33.1", "react-bootstrap-table-next": "^4.0.3", "react-bootstrap-table2-filter": "^1.3.1", "react-bootstrap-table2-paginator": "^2.1.2", "bootstrap": "^5.1.3", "events": "^3.3.0", Dev: "@types/node": "^20.8.6", "@types/react": "^18.2.0", "@types/react-bootstrap": "^0.32.20", "@types/react-bootstrap-table2-filter": "^1.3.0", "@vitejs/plugin-react": "^4.1.0",
// vite.config.ts export default defineConfig({ ... resolve: { alias: { events: 'rollup-plugin-node-polyfills/polyfills/events', ... } } }
using this module https://www.npmjs.com/package/rollup-plugin-node-polyfills
Thank you very much!
This solution also resolved crash of "react-bootstrap-table": "4.3.1"
:
Filter.js:24 Uncaught TypeError: Super expression must either be null or a function, not undefined at _inherits$2 (Filter.js:24:113) at Filter.js:27:3 at Filter.js:72:1
I'm trying to use react-bootstrap-table-next on a site with this theme https://demo.themesberg.com/volt-react-dashboard/
I never had problems with Bootstrap 4, but this theme uses Bootstrap 5.0.1 and gives me this error:
Uncaught TypeError: _events2.default is not a constructor at BootstrapTableContainer.RemoteResolver (remote-resolver.js:132) at new BootstrapTableContainer (index.js:72) at constructClassInstance (react-dom.development.js:12716) at updateClassComponent (react-dom.development.js:17425) at beginWork (react-dom.development.js:19073) at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at beginWork$1 (react-dom.development.js:23964) at performUnitOfWork (react-dom.development.js:22776)
Anyone else had this problem?