Topic: Issues compiling typescript project with Typescript 4, React 18, Webpack 5 and MDB react ui kit essential package
I was previously compiling mdb-react-ui-kit (sourced from npm) with typescript 4, React 18, Webpack5 successfully. All the type definitions were already available as part of the package.
Yesterday, I decided to switch to the essential package, purchased it, followed instructions to include the package from gitlab, and the instructions to add the type definitions. However, I run into the following error web running a webpack build/serve. The precise dependency versions are as follows (listing just the important ones)
"typescript": "^4.8.4", "vite": "^3.1.4", "vitest": "^0.23.4", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1", "mdb-react-ui-kit": "git+https://oauth2:XXXXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#4.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.4"
However, when I run webpack build or serve, I get these errors (which I wasn't getting while using the stock package from npm)
ERROR in ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js 9:0-42Module not found: Error: Can't resolve 'chartjs-plugin-datalabels'
ERROR in ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js 10:0-58Module not found: Error: Can't resolve 'chart.js' in 'node_modules/mdb-react-ui-kit/dist'
ERROR in ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js 11:0-134Module not found: Error: Can't resolve 'react-chartjs-2' in
ERROR in ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js 12:0-26Module not found: Error: Can't resolve 'deepmerge'
Am I missing some step? I though the essential package is a drop-in replacement for the stock package distributed via NPM.
If I add the following dependencies to the project, the issue goes away. So, it seems as though the transitive dependencies are not getting resolved.
"clsx": "1.1.1", "react-popper": "2.3.0", "@popperjs/core": "2.11.5", "react-perfect-scrollbar": "1.5.8", "chart.js": "^3.8.0", "chartjs-plugin-datalabels": "^2.0.0-rc.1", "react-chartjs-2": "^4.2.0", "deepmerge": "^4.2.2"
Would you be able to putup a github link to a starter project using typescript 4, React 18, Webpack5, along with mdb-react-ui-kit (latest)? Please consider this urgent
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Desktop PC
- Browser: Firefox
- OS: Ubuntu
- Provided sample code: No
- Provided link: Yes
Krzysztof Wilk staff commented 2 years ago
Hi!
It seems there's a problem with our package which should work as you said. We'll check that as soon as possible.
adithya.vasudevan pro premium commented 2 years ago
Thank you Krzysztof! As noted above ... if I add the dependencies that mdb-react-ui-kit needs to the package.json of the project, the issue goes away. So seems to be a simple issue.
This doesn't seem to occur in the free (npm) distributed package. Perhaps you could quickly check the package contents of the two, and that should give you an idea?
In any case, a starter/stub project maintained by you, with typescript 4, React 18, Webpack5, along with mdb-react-ui-kit (latest), would reduce some of the guesswork involved.
I haven't tested the JS (not TS) setup - perhaps that works fine, but given that my project is already TS, I don't have the option of going back to JS :)
Wojciech Staniszewski staff commented 2 years ago
We probably need more time to debug this. But it might be fixed in the next release.