53 comments found.
Do you recommend a network chart plugin that would work well with this template? I don’t see an example of one in the template.
Something like this but free and opensource of course… https://flourish.studio/visualisations/network-charts/
Or maybe this? https://reagraph.dev/Hi,
As long as it meet your requirements, you may use that plugins in your site.
Best Regards, Sean.
The text in the hovers on your live demo on the analytics page are not readable. Same as the bg color.
https://www.seantheme.com/hud-react/analyticsHi,
You may set the code in /src/pages/analytics/analytics.js LINE: 52 var inverse = (getComputedStyle(document.body).getPropertyValue(‘—bs-dark’)).trim();
which will solve this issue.
Best Regards, Sean.
The text is unreadable for the mouse hover tooltips on graphs and the widgets page.
Hi,
You might need to refer to our demo page for how to setup the graph. This is because the demo page tooltip is working fine on my side.
Best Regards, Sean.
How to have `<tbody>` scroll on overflow instead of the entire page in `orders.js`?
Hi,
You may use the css overflow:scroll for the tbody element.
Best Regards, Sean.
Tried that. Doesn’t work. Doesn’t prevent the entire page from scrolling.
Hi,
You might need to set the page full height in order to prevent the entire page from scrolling.
Best Regards, Sean.
I set `appContentFullHeight: true,` No difference. I am trying to get the tbody to overflow and scroll, not the body.
Hi,
After you set the page full height, you still need to set the content scrollbar / your table element scrollbar height as well.
You may refer to the app content full height page for how to setup the correct full height page.
Best Regards, Sean.
I don’t understand. Do you mean set a fixed height of the `tbody`? Devices are different sizes and resolutions. There is no specified fixed height. When `
What would be great is that the bottom of the card ALWAYS rests on the bottom of the viewport. It is then more apparent to the user what is happening when things overflow and start scrolling. I do this all the time with pure CSS, no JS and no fixed height required. It’s an undocumented CSS technique of setting each parent of the overflowing element to `overflow: hidden;` all the way up to the `` element. Then set the overflowing element height to `100dvh;`. But of course, that is not possible with a framework. Too much other stuff going on.
Hi,
You should take a look for how to use the flexbox css and bootstrap 5 predefined css class for d-flex, flex-auto, and etc. By using the flexbox, you should be able to easily achieve that.
https://getbootstrap.com/docs/5.3/utilities/flex/#enable-flex-behaviorsp.s fixed height doesn’t mean having a px number for the height properties but having a responsive 100% height based on your device screen resolution.
Best Regards, Sean.
What does the `appMode: ’ ’` and the `appContentClass: ’ ’` do?
Hi,
appMode is to set the page data-bs-theme=”dark” or data-bs-theme=”light”. appContentClass is to set the additional class to div.app-content.
Best Regards, Sean.
When I select a color other than the default and go to the Analytics page and close the left side panel, the widget spacing on the rest of the page is off and they overlap.
Hi,
For the quick fix, you may add the following code to /src/components/header/header.jsx
LINE: 28 https://pastebin.com/VZP30tEeBest Regards, Sean.
Thank you!
Hope you had a wonderful weekend!
I see that others are having issues with the GoogleMapReact as well.
“Kindly disable the GoogleMapReact will resolve the issue. I will remove this package and replace with new plugins.
Best Regards, Sean.”
I am a React noob. Forgive my ignorance, but what is the best way to disable the GoogleMapReact and other features I will not be using right away in a way that will not negatively affect the rest of the app. I will need to use them in the future. Just not right now.
Thank you!
Hi,
Kindly run the following command.
npm uninstall @react-google-map
and remove the following code from the /src/pages/map/map.js
LINE 5 import { GoogleMap, useJsApiLoader } from ’@react-google-maps/api’;
LINE 25 var { isLoaded } = useJsApiLoader({ id: ‘google-map-script’, googleMapsApiKey: ”” })
LINE 164 – 174
Best Regards, Sean.
What about line 30?
`const bounds = new window.google.maps.LatlngBounds(this.center);`
What do I change that to?
...and
LINE 157 `div id=”googleMapReact” classname=”mb-5”`
Do I remove the entire div element?
Hi,
Yeah, need to remove the LINE30 as well. For the LINE157, it wouldn’t cause any error as it is the normal html div.
Best Regards, Sean.
Ran npm uninstall @react-google-map
Removed the scripts in /src/pages/map/map.js
Removed LINE 5 import
Removed 25 var
and removed the HTML div LINE 157 Still getting: Can’t resolve ’@react-google-maps/api’ in ’/app/src/pages/map’ ...when doing npm start or npm build
Sorry, I can’t access that site from here. I can reach CodePen?
Also everything that calls code-2.json.
May be helpful to know I am using Docker containers to build it.
It’s failing on build…
> hud@2.4.0 build > react-scripts—max_old_space_size=4096 build
Creating an optimized production build… Failed to compile.
Module not found: Error: Can’t resolve ’@react-google-maps/api’ in ’/app/src/pages/map’
Hi,
I noticed you’re having trouble accessing pastebin.com. It’s generally a straightforward site used for sharing code. If you’re still facing issues, perhaps try this alternative link: https://paste.ofcode.org/TnDe7GfUgVz3N9Rz5ASViG. It might help!
Best Regards, Sean.
Thank you for the help. And thank you for being so responsive and patient with me as I work through this.
Got the code. Replaced the code in the map.js per your instructions.
I am still getting Failed to compile. Errors…
Would it be good to start over again? Please give in-depth assistance.
Thank you!
- – - – - – - – - – - – - – - ERROR – - – - – - – - – - – - – - -
Module not found: Can’t resolve ’@react-google-maps/api’ in ’/app/src/pages/map’ WARNING in ./src/scss/styles.scss Module Warning (from ./node_modules/resolve-url-loader/index.js): resolve-url-loader: webpack misconfiguration webpage or the upstream loader did not supply a source-map
ERROR in ./src/pages/map/map.js 9:0-67 Module not found: Error: Can’t resolve ’@react-google-maps/api’ in ’/app/src/pages/map’
ERROR in ./src/scss/styles.scss Module Error (from ./node_modules/sass-loader/dist/cjs.js); Cannot find module ‘sass’ Require stack: - /app/node-modules/sass-loader/dist/utils.js - /app/node-modules/sass-loader/dist/index.js - /app/node-modules/sass-loader/dist/cjs.js - /app/node-modules/loader-runner/lib/loadLoader.js - /app/node-modules/loader-runner/lib/loadRunner.js - /app/node-modules/webpack/lib/NormalModule.js - /app/node-modules/webpack-manifest-plugin/dist/index.js - /app/node-modules/react-scripts/config/webpack.config.js - /app/node-modules/react-scripts/scripts/start.js
ERROR in ./src/scss/styles.scss Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS PostCSS received undefined instead of CSS string at new Input (/app/node_modules/resolve-url-loader/node_modules/postcss/lib/input.js:38:13) at encodeError (/app/node_modules/resolve-url-loader/index.js:287:12) at onFailure (/app/node_modules/resolve-url-loader/index.js:228:14)
webpack compiled with 3 errors and 1 warning
Hi,
Can you share some screenshot regarding your package.json and map.js in your docker? This is because as long as you uninstall the @react-google-maps package and exclude it from map.js it shouldn’t be will throw the error like “Can’t resolve ’@react-google-maps/api’ in ’/app/src/pages/map’” again.
Best Regards, Sean.
Resolved. It was an issue with how I set up Docker. Thank you very much for your help!
Hi,
Glad to hear that you issue was resolved.
Best Regards, Sean.
Having serious issues with node-sass-9.0.0.tgz.
Won’t compile.
Apparently it has a long record of having compatibility issues and is now deprecated.
Please advise.
Thanks!
“Node-sass is now deprecated. It’s recommended to transition to the sass package instead.
The sass package works similarly to node-sass but offers better stability and doesn’t require additional changes.” https://stackoverflow.com/questions/74501317/whats-the-fix-for-error-node-sass-version-8-0-0-is-incompatible-with-4-0-0Hi,
Make sure your are using the latest stable version of node.js which is v20+.
Best Regards, Sean.
Node 16 is the latest on the system from which I am working and I can’t change it. I need the orders and order details pages. Probably a dumb question but can those be done with node 16? Is there any way to use node 16 with this template?
Hi,
Unfortunately, if you wish to switch back to the previous version of Node js, you might need to use the older version of Bootstrap like 5.2.x and have some minor changes for HUD scss files.
Best Regards, Sean.
Yes.Figured that would be the case.I don’t have a choice. I use a version that works with node 16 or I find something else.
Ultimately, at the end of the day, it’s all vanilla HTML, CSS, and JS in the browser… Does the HTML version require node to build and can that be integrated into a generic vanilla React wrapper?
Hi,
Yeah, this template is using the gulp to compile the html demo file and generate it into /dist folder.
Best Regards, Sean.
I have it almost compiling in Docker that is running node 20.1.0. Still getting node-sass errors. Can I compile it without SASS? Must fix these node-sass errors or I will not be able to use this template. Please advise! Thanks.
Hi,
Unforutnately, no. Bootstrap is using scss to compile it and this is why we are using the scss setup for this React project as well.
Best Regards, Sean.
The compiled CSS can be used with Bootstrap without SASS. Is SASS otherwise required for the template?
Hi,
This template is using bootstrap source scss (you may found it via /src/scss/styles.scss – @import ‘node_modules/bootstrap/scss/bootstrap.scss’;) file to compile when you run the command of npm start / npm build and scss file needs sass to compile the scss file into css files.
p.s if you wish to skip to use the sass file, you may compile the scss file first and include it into your react project.
Best Regards, Sean.
Can you please elaborate on this? How do I compile the scss file first and include it in the react project? Doesn’t it have to part of the project compilation process, so I don’t have to pre-compile the scss files every time?
Hi,
The scss file can be compiled into css by using other tools like gulp command and etc. BUT if you are including the scss file in your react project, it will re-compile the scss into css when you make some changes on the scss files.
Best Regards, Sean.
Resolved. It was an issue with how I set up Docker. Thank you very much for your help!
I too am deploying to GitHub pages and am getting the same 404 for `assets/img`. Images are deployed to `/public/assets/img/`, but the pointers for those images are to `/assets/img/`.
It also goes to the 404 page by default? Feels like a config issue?
Please advise. Thanks!
Deployed URL: https://d7460n.github.io/hud_react/GitHub repo URL. https://github.com/D7460N/hud_react
Hi,
You might need to add the basename to the BrowserRouter in index.js.
e.g
<BrowserRouter basename=”/hud_react/”>
Best Regards, Sean.
Thank you for the reply.
Added <BrowserRouter basename=”/hud_react/”> to index.js on line 40, saved, and redeployed.
No change.
Looks like some JSON files inside in `/public/` are 404 because pointers are looking for `/assets/` at that level.
Hi,
For the images / files inside the assets folder, you might need to point to the correct path of the images. This is because you are deploying the site to the sub directory. Which mean change the image path from /assets to /hud_react/assets will do.
Best Regards, Sean.
Thank you again for the quick response! I assume there is a better way than to change the million and one URL references?
Hi,
You may use global variable PUBLIC_URL for public folder e.g
https://create-react-app.dev/docs/using-the-public-folder/Best Regards, Sean.
When I go to the theme’s root address (https://d7460n.github.io/hud_react/) and navigate to the Products page, it works.
If I go directly to the Products page directly (https://d7460n.github.io/hud_react/pages/products), I get an error?
Please advise.
Actually going to the root only works if I click on the link in the repo. (https://github.com/D7460N/hud_react). What the heck? How is anyone else supposed to get to the site?
Hi,
This is the issue for how you configure your server settings. Did you configure your server settings to point all the url into /hud_react directory to your /hud_react/index.html?
Best Regards, Sean.
I don’t want all pages going to index.html. I want to be able to simply send the URL of the Products page and the details page to someone else so they can see it.
Hi,
No, this is how it works for react or any other frontend framework like vue, svelte and etc. You NEED to point any pattern of the url to index.html so that the route can be detected from react js when page load as well.
Best Regards, Sean.
Ah. OK. Forgive my ignorance. Thank you for your patience.
Hi,
Glad to hear that your issue was resolved.
Best Regards, Sean.
I do not have access to configure server settings. This is a single page application and I am using orders.js as the default page. Is there a configuration within the template to redirect to the given page that I want to show as default? I changed line 43 in app-route.jsx to go to ’./../pages/pages/orders.js’ but refresh always breaks because it is not going to index…
Hi,
You should take a look for the react route documentation for how to redirect / set the page as default. In fact, the demo page do have the example for how to do that and of course i can’t really guide you one by one and you should explore that yourself.
Best Regards, Sean.
Why can’t you guide me individually? I am paying extra for individual support beyond general questions and general answers.
In your documentation, it says “File to configure the app routes” then config/app-route.js. Should it be app-route.jsx? I don’t see app-route.js.
Never mind. Found it. Not sure what I was looking at…
Hi,
You may refer to the envato support policy for what i can provide and what i can’t provide.
https://themeforest.net/page/item_support_policyBest Regards, Sean.
Hi, I have to change the payment, The themeforest said you should agree with my refund request. I will re-buy it with different credit card. I didn’t download the code yet!. Please please…
Hi,
If you didn’t download the code yet, you might be able to submit a refund request.
Best Regards, Sean.
buttons.bootstrap5.mjs:69 Uncaught TypeError: Cannot read properties of undefined (reading ‘className’) at ./node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.mjs (buttons.bootstrap5.mjs:69:1) at options.factory (react refresh:6:1) at webpack_require (bootstrap:22:1) at fn (hot module replacement:61:1) at ./src/pages/table/plugins.js (plugins.js:18:1) at options.factory (react refresh:6:1) at webpack_require (bootstrap:22:1) at fn (hot module replacement:61:1) at ./src/config/app-route.jsx (app-menu.jsx:96:1) at options.factory (react refresh:6:1)
Unable to solve
Hi,
Did you run the npm install and npm start command?
Best Regards, Sean.
Have to execute npm install and npm start
I have executed
Can you share what is your node js and npm version in your localhost?
PS C:\Users\yulun> npm -v 10.4.0 PS C:\Users\yulun> node -v v20.11.1
Hi,
You may replace the package.json with the following content
https://pastebin.com/iJHVPPk5After that remove the node_modules folder and re-run the npm install command.
Best Regards, Sean.
OK is on
Thanks
Failed to parse source map from ‘C:\Users\yulun\Downloads\themeforest-JXyYRkLX-hud-react-18-bootstrap-admin-template\hud_react_v2.3\template_react\node_modules\@googlemaps\src\index.ts’ file: Error: ENOENT: no such file or directory, open ‘C:\Users\yulun\Downloads\themeforest-JXyYRkLX-hud-react-18-bootstrap-admin-template\hud_react_v2.3\template_react\node_modules\@googlemaps\src\index.ts’
Unable to solve
Hi,
Did you run the npm install and npm start command?
Best Regards, Sean.
Have to execute npm install and npm start
I have executed
Can you share what is your node js and npm version in your localhost?
PS C:\Users\yulun> npm -v 10.4.0 PS C:\Users\yulun> node -v v20.11.1
Hi,
You may replace the package.json with the following content
https://pastebin.com/iJHVPPk5After that remove the node_modules folder and re-run the npm install command.
Best Regards, Sean.
Failed to parse source map from ‘C:\Users\yulun\Downloads\themeforest-JXyYRkLX-hud-react-18-bootstrap-admin-template\hud_react_v2.3\template_react\node_modules\@googlemaps\src\index.ts’ file: Error: ENOENT: no such file or directory, open ‘C:\Users\yulun\Downloads\themeforest-JXyYRkLX-hud-react-18-bootstrap-admin-template\hud_react_v2.3\template_react\node_modules\@googlemaps\src\index.ts’
Hi,
Kindly disable the GoogleMapReact will resolve the issue. I will remove this package and replace with new plugins.
Best Regards, Sean.
OK Thanks
1. can you port to Vite build system and pnpm ? better than CRA. 2. Multi languages please
Hi,
Unfortunately, this template is not for vite system.
Best Regards, Sean.
Okay guy, I did convert to Vite for fastest development. HUD React is cool but fat code 
. The most important thing is POS
I don’t know why, but when I deploy this template using gh pages, json data and images that reference assets are not displayed at all in the deployment environment. I did not change anything but still not displayed. Only the localhost is where I can see the assets. What should I do?
Hi,
As long as you are pointing to your public folder with the correct path, it shouldn’t be a problem to show the image / get the json file.
Best Regards, Sean.
Have you ever deployed it with gh pages?
Hi,
Nope. Normally im using self maintained server and link to github for pull and publish.
Best Regards, Sean.
what node js version? mine v18.17.0 and npm 9.6.7.. still error
Hi,
Can you share the error message that you get from terminal / command prompt?
Best Regards, Sean.
I got it running already,, thanks..
im still newby here,, which folder or which file should I fetch the data or can be edit? is on pages folder?
Hi,
For your information, all the pages is for demo purpose. You might need to integrate with your api / backend language in order to feed it with real data.
Best Regards, Sean.
Hi im trying to create a dynamic url where in URL, id is the dynamic part. How can I create in routes a dynamic URL named /book/:id. That later i can read using useParams hook.
Hi,
You may refer to their official documentation for how to create a dynamic URL and add the required param into the /config/app-route.jsx.
https://reactrouter.com/en/main/route/routeBest Regards, Sean.
package.json “dependencies”: { ”@fortawesome/fontawesome-free”: “6.4.0”, ”@fullcalendar/bootstrap”: “6.1.8”, ”@fullcalendar/daygrid”: “6.1.8”, ”@fullcalendar/interaction”: “6.1.8”, ”@fullcalendar/list”: “6.1.8”, ”@fullcalendar/react”: “6.1.8”, ”@fullcalendar/timegrid”: “6.1.8”, “apexcharts”: “3.41.0”, “bootstrap”: “5.3.0”, “bootstrap-daterangepicker”: “3.1.0”, “bootstrap-icons”: “1.10.5”, “chart.js”: “4.3.0”, “codemirror”: “6.0.1”, “datatables.net”: “1.13.4”, “datatables.net-autofill”: “2.5.3”, “datatables.net-autofill-bs5”: “2.5.3”, “datatables.net-bs5”: “1.13.4”, “datatables.net-buttons”: “2.3.6”, “datatables.net-buttons-bs5”: “2.3.6”, “datatables.net-colreorder”: “1.6.2”, “datatables.net-colreorder-bs5”: “1.6.2”, “datatables.net-fixedcolumns”: “4.2.2”, “datatables.net-fixedcolumns-bs5”: “4.2.2”, “datatables.net-fixedheader”: “3.3.2”, “datatables.net-fixedheader-bs5”: “3.3.2”, “datatables.net-keytable”: “2.9.0”, “datatables.net-keytable-bs5”: “2.9.0”, “datatables.net-responsive”: “2.4.1”, “datatables.net-responsive-bs5”: “2.4.1”, “datatables.net-rowgroup”: “1.3.1”, “datatables.net-rowgroup-bs5”: “1.3.1”, “datatables.net-rowreorder-bs5”: “1.3.3”, “datatables.net-scroller”: “2.1.1”, “datatables.net-scroller-bs5”: “2.1.1”, “datatables.net-select”: “1.6.2”, “datatables.net-select-bs5”: “1.6.2”, “google-map-react”: “2.2.1”, “jquery”: “3.7.0”, “jsvectormap”: “1.5.3”, “jszip”: “3.10.1”, “lity”: “2.4.1”, “masonry-layout”: “4.2.2”, “node-sass”: “9.0.0”, “pdfmake”: “0.2.7”, “photoswipe”: “5.3.7”, “react”: “18.2.0”, “react-apexcharts”: “1.4.0”, “react-bootstrap-daterangepicker”: “8.0.0”, “react-color”: “2.19.3”, “react-countdown”: “2.3.5”, “react-datepicker”: “4.14.1”, “react-datetime”: “3.2.0”, “react-dom”: “18.2.0”, “react-highlight”: “0.15.0”, “react-input-mask”: “2.0.4”, “react-perfect-scrollbar”: “1.5.8”, “react-quill”: “2.0.0”, “react-router-dom”: “6.14.0”, “react-scripts”: “5.0.1”, “react-select”: “5.7.3”, “react-tag-input-component”: “^2.0.2” },
error
Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\bootstrap’
LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet1.rules1.oneOf7.use1./node_modules/resolve-url-loader/index.js??ruleSet1.rules1.oneOf7.use3
./src/scss/styles.scss
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($number, $number * 0 + 1) or calc($number / ($number * 0 + 1))
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> src\scss\_functions.scss 3:13 strip-unit()
<w> src\scss\_functions.scss 14:11 rem()
<w> src\scss\_variables.scss 307:49 @import
<w> src\scss\styles.scss 7:9 root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($app-top-nav-height – ($font-size-base * $line-height-base) – rem(1px), 2) or calc(($app-top-nav-height – ($font-size-base * $line-height-base) – rem(1px)) / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> src\scss\app\_app-top-nav.scss 41:14 @import
<w> src\scss\_app.scss 7:9 @import
<w> src\scss\styles.scss 16:9 root stylesheet
<w>
ERROR in ./node_modules/@fullcalendar/bootstrap/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\bootstrap’
ERROR in ./node_modules/@fullcalendar/bootstrap/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\bootstrap’
ERROR in ./node_modules/@fullcalendar/bootstrap/internal.js 1:0-69 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\bootstrap’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/internal.js 1:0-733 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/internal.js 2:0-82 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\daygrid’
ERROR in ./node_modules/@fullcalendar/interaction/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\interaction’
ERROR in ./node_modules/@fullcalendar/interaction/index.js 2:0-953 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\interaction’
ERROR in ./node_modules/@fullcalendar/list/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\list’
ERROR in ./node_modules/@fullcalendar/list/index.js 3:0-75 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\list’
ERROR in ./node_modules/@fullcalendar/list/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\list’
ERROR in ./node_modules/@fullcalendar/list/internal.js 1:0-406 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\list’
ERROR in ./node_modules/@fullcalendar/list/internal.js 2:0-71 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\list’
ERROR in ./node_modules/@fullcalendar/react/dist/index.js 4:0-46 Module not found: Error: Can’t resolve ’@fullcalendar/core’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\react\dist’
Module not found: Error: Can’t resolve ’@fullcalendar/core/internal’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\react\dist’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/internal.js 1:0-858 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/internal.js 2:0-82 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\timegrid’
i copy file in template_react folder to other folder and 1. npm install 2. npm audit fix 3. npm start
how to fix ?
Hi,
Please do not use the npm audit fix command as it will replace some of the settings for the package.
Try to remove the node_modules folder and re-run npm install and npm start command.
Best Regards, Sean.
Error
Compiled with problems: ERROR in ./node_modules/@fullcalendar/bootstrap/index.js 1:0-59
Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in
‘C:\SOP_DEV\workspace\eloi-cube-font-end\node_modules\@fullcalendar\bootstrap’
react 18 and node 14.21.3
how to fix it?
Hi,
You might need to upgrade to at least node 18.x
Best Regards, Sean.
Hi,
Did you run the npm start command instead of using react-scripts start
https://seantheme.com/hud-react/documentation/index.htmlBest Regards, Sean.
yes i did that
npm install—force npm start
Hi,
Can you screenshot the terminal / command prompt error message when you run the command and upload to https://imgbb.com/ hence share the link here?
Best Regards, Sean.
the errors you see in there are due to the npm install—force
https://ibb.co/xYDH2q5Hi,
Make sure you are using the nodejs stable version which is v18+ and it will solve the issue.
Best Regards, Sean.
Hi,
Please downgrade it to v18+. If not you wont be able to run any other react project as well.
Best Regards, Sean.
still in the same
let me know if you want the ssh creds to have a look
Please install python in your localhost as well.
Best Regards, Sean.
python 2.7 installed. do i need python 3?
https://ibb.co/VqHbZ34Try to remove the node_modules folder and re-run the npm install command.
Best Regards, Sean.
node_modules folder was not created
https://ibb.co/KDGpKc2If you want the ssh access to have a look you can. There is nothing you can break…
Try to install python 3.6+ and above as node-gyp required python 3+ instead of 2+
Best Regards, Sean.
Actually i have installed py3.8 but i still get the same errors when i am running npm install—force
Try to run npm cache clean —force and re-run the npm install command.
Best Regards, Sean.
the make was missing in the system ( sudo apt-get install build-essential)
Yeah, you might need to install c++ compiler as well.
Best Regards, Sean.
Hello i have buy your template but when I do yarn start i just get a list of error and a Failed to compile please refund me if your code don’t working
Hi,
Can you share the error that you have get in your terminal / command prompt?
Best Regards, Sean.
Failed to compile.
Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/bootstrap’ ERROR in ./node_modules/@fullcalendar/bootstrap/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/bootstrap’
ERROR in ./node_modules/@fullcalendar/bootstrap/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/bootstrap’
ERROR in ./node_modules/@fullcalendar/bootstrap/internal.js 1:0-69 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/bootstrap’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/internal.js 1:0-733 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/daygrid’
ERROR in ./node_modules/@fullcalendar/daygrid/internal.js 2:0-82 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/daygrid’
ERROR in ./node_modules/@fullcalendar/interaction/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/interaction’
ERROR in ./node_modules/@fullcalendar/interaction/index.js 2:0-953 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/interaction’
ERROR in ./node_modules/@fullcalendar/list/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/list’
ERROR in ./node_modules/@fullcalendar/list/index.js 3:0-75 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/list’
ERROR in ./node_modules/@fullcalendar/list/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/list’
ERROR in ./node_modules/@fullcalendar/list/internal.js 1:0-406 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/list’
ERROR in ./node_modules/@fullcalendar/list/internal.js 2:0-71 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/list’
ERROR in ./node_modules/@fullcalendar/react/dist/index.js 4:0-46 Module not found: Error: Can’t resolve ’@fullcalendar/core’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/react/dist’
ERROR in ./node_modules/@fullcalendar/react/dist/index.js 5:0-67 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/react/dist’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 1:0-59 Module not found: Error: Can’t resolve ’@fullcalendar/core/index.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 3:0-40 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/index.js 4:0-38 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/internal.js 1:0-858 Module not found: Error: Can’t resolve ’@fullcalendar/core/internal.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/timegrid’
ERROR in ./node_modules/@fullcalendar/timegrid/internal.js 2:0-82 Module not found: Error: Can’t resolve ’@fullcalendar/core/preact.js’ in ’/Users/lkm/Documents/templates/admin/hud_react_v2.0/template_react/node_modules/@fullcalendar/timegrid’
webpack compiled with 22 errors
Hi,
Did you install the required fullcalendar package by using npm install?
”@fullcalendar/bootstrap”: “6.1.5”,
"@fullcalendar/daygrid": "6.1.5","@fullcalendar/interaction": "6.1.5","@fullcalendar/list": "6.1.5","@fullcalendar/react": "6.1.5","@fullcalendar/timegrid": "6.1.5",Best Regards, Sean.
Hello,
The font “Chakra Petch” is not applied on the React version. I bought both the HTML Version and React Version to verify the issue. I am not sure where is the issue or how to fix it.
I really love the “Chakra Petch” font. Could you please help me get it working on the React version?
Hi,
Suppose the Google font is included in the scss files and it is working on the hud-react demo as well. You may find the code from /src/scss/font.scss.
Best Regards, Sean.
