Topic: Installation/Setup into existing node js project issues
Expected behavior no console errors
Actual behavior
Refused to apply style from 'http://localhost:3000/css/~mdb-ui-kit/css/mdb.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. admin:1
Refused to apply style from 'http://localhost:3000/css/~node_modules/mdb-calendar/css/calendar.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.js:3
Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:3:1)
Resources (screenshots, code snippets etc.)
I believe the first two errors are due to not being able to locate the files, as they are located in my node_modules folder, and the request is coming from the front end files that are in my "public" static directory. I am importing the css files from my styles.css files inside my public/css/ folder, and the javascript files from my index.js in my public/js/ folder. The third error says I cannot import outside of a module, not sure how to resolve any of these errors after doing some searching. Main goal is to make use of the calendar plugin, which currently is not possible. Thanks for any help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.1.0
- Device: Desktop PC
- Browser: Chrome
- OS: Windows 10 Pro
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 1 year ago
Do you use any bundler module? Eg Webpack? How did you import files to the project? Have you tried to do it like in the manual we provide? https://mdbootstrap.com/docs/standard/pro/plugins-installation/#section-npm-existing-project https://mdbootstrap.com/docs/standard/pro/installation/#section-npm
Adam Bliss priority commented 1 year ago
Yes I followed the instructions for importing through NPM into an existing project. As for the import commands themselves, it appears in your manual you're saying to import the calendar in my index.js (front end javascript file i assume), and import the css file in my main css file, which is what i'm doing. I think part of the issue is that i have a static directory called public, where my front end resources are located (css, js, images), and the import can't find it in the static directory, so it needs to look outside of that directory, which isn't possible due to middleware on the backend.
I am not currently using a bunder like webpack, don't have any experience with those.
Grzegorz Bujański staff commented 1 year ago
if you don't use bundler and scss files but plain css the syntax is a bit different. Try something like this: @import url ('../node_modules/mdb-ui-kit/css/mdb.min.css');