I have this line in one of my tsx file:
import styles from "../../styles/buyTicket.module.css";
got this error:
ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx
./tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx 7:19-54
[tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx(7,20)
TS2307: Cannot find module '../../styles/buyTicket.module.css' or its corresponding type declarations.
If I remove styles then I got this error no more, but then it will work not as a CSS module, and naming collosion will happen. What would you suggest?
As far as i can understand, you may have a look here:
Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"
and here:
React, Typescript - Cannot find module ... or its corresponding type declarations
Related
I want to get raw string of css in npm module through vite.
According to vite manual,
https://vitejs.dev/guide/assets.html#importing-asset-as-string
It says we can get raw string by putting "?raw" at the end of identifier.
So I try this:
import style from "swiper/css/bundle?raw";
But this shows error like:
[vite] Internal server error: Missing "./css/bundle?raw" export in
"swiper" package
If I use this:
import style from "swiper/css/bundle";
There are no error, but css is not just load as string but handled as bundle css.
This is not good, because I want to use this css in my lit-based web components.
Are there any way to get css as raw string through vite?
Evan You (Vite.js and Vue.js creator) has added the inline toggle which fixes the problem of styles also being added to the main CSS bundle when importing.
import style from "swiper/css/bundle.css?inline";
This toggle prevents your CSS from also being bundled into you main CSS bundle as a side effect of importing it into a string.
I followed documentation of react-slick step by step.
I installed both react-slick and slick-carousel but whenever I import the css i always get this error Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'
also this error Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules)
I'm using Reactjs with nextJS
Any suggestions please?
I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way:
import "react-datepicker/dist/react-datepicker.css";
However, importing the file causes an error that says "You may need an appropriate loader to handle this file type". I know I could fix this by creating a handler for .css files, but I thought I could avoid that by using Styled Components.
My question is, is there a way to handle these type of imports with styled components? I've been loooking online for hours and can't seem to find a way.
I ended up just forking the project and changing it to use styled-components instead of needing to import the styles.
I have an import issue I can't understand, but I think I'm missing something big with either webpack or Symfony and I can't find what.
I hope you can tell me.
I try to use the reveal.js module. So, using npm I added the content of this github to my node_modules: https://github.com/hakimel/reveal.js/
Without looking at Symfony, only the index.html from the reveal.js module. There is an import line <script src="js/reveal.js"></script>
If this import is missing, then an error occured: Uncaught ReferenceError: Reveal is not defined
But with this import, all works fine.
If I'm telling you about this simple index.html, it's because I have the same error in my Symfony project, and I can't tell why because I think my imports are fine.
So either, my import is not ok...either the error is not the same, but I can't tell where she is.
In my webpack.config.js, I have this
.addEntry('js/app', [
'./assets/js/app.js',
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/holderjs/holder.min.js',
'./node_modules/reveal.js/lib/js/head.min.js',
'./node_modules/reveal.js/js/reveal.js'
])
As you can see, the reveal.js file is there, so he is concatenate into my main js file. But still, I have this Uncaught ReferenceError: Reveal is not defined when I try to use <script>Reveal.initialize();</script> inside of a twig template.
I'm really lost for this moment, so I hope you can help one way or an other, thanks :(
EDIT: In order to add some information, in my build/app.js I can see the import is there.
/***/ "./node_modules/reveal.js/js/reveal.js":
/*!*********************************************!*\
!*** ./node_modules/reveal.js/js/reveal.js ***!
\*********************************************/
The general error: SyntaxError: Invalid or unexpected token, referencing line 1 of index.css.
This is the result of encountering CSS syntax in a CSS file that I'm trying to import for styling.
Attempted fixes and experiments:
Deleted everything out of the CSS file and exported an empty JS module. This works, verifying that the import is treating it as a JS file, not CSS.
Removing the #import statement from line 1 of the CSS file. Of course, this fails to make a difference because the remaining CSS syntax throws the same error.
Paired down the Webpack config file to eliminate the surface area of the problem. Rendering should be handled by Webpack, so the issue may reside there. Config was very basic and set to handle CSS, SASS, JS, and JSX.
Tried importing the CSS file from other file locations, including the server's app.js file.
Tried making use of ExtractTextPlugin as an bundling alternative.
Tried making use of Isomorphic Style Loader.
All in all, given the attempted fixes and tests listed above, the issue seems unrelated to Webpack per se. It's as if the server side rendering is attempting to import the CSS file before Weback gets involved.
The fix, it turns out, was to use the ignore-styles package in our server app.js file:
require('ignore-styles')
The description as listed on the repo:
A babel/register style hook to ignore style imports when running in Node. This is for projects that use something like Webpack to enable CSS imports in JavaScript.