I have global design system library which allows to use buttons, logo and things like.
I have imported this library to my react application and tried to use logo component.
logo component gives an error when i tried to open page :
SyntaxError: Unexpected token ':'
If i comment this requeire code inside from the components dist folder it works but i don't have styles.
I know that Next.js have solution like next-global-css but on React do we have any library - loader or configuration that allows using libraries css files automatically?
I am excepting loader or solution for see styles.
Related
I have website which is themable. the website has a theme editor which allows for dynamically change the website font. When the user selects a font, I want the font to be loaded dynamically from a css file.
The website is a static website using next export thus there's no next server in play.
when trying to load global css in runtime from the theme editor component i'm getting
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
But i cannot move the global css loading to the custom app file since i want to only load the fonts as needed (otherwise first load sucks).
using css modules doesn't seem like the right path since i need this to be applied globally.
The following SA question is similar, but the resolution there (moving css loading to custom app) is not valid in my case.
Next.js Global CSS cannot be imported from files other than your Custom <App>
What is the best way to achieve this?
I am making a lib similar to Polymer Material. I have individual files I use rollup to create a single ESM, CJS, and UMD file. The ESM file is the main in the package.json. I have a situation like this
Header
Icon-Button
Icon-Button
The icon button Uses Mustache so I need to include it using the rollup-plugin-node-resolve. I then import the library in Header and create a UMD file that is imported into my we app like this...
// Pug
script(src="/ui-components/header/dist/index.umd.js")
script(src="/ui-components/icon-button/dist/index.umd.js")
// Express
// #me/icon-button
// #me/header
const uiPath = path.join(__dirname, './node_modules/#me');
app.use('/ui-components', express.static(uiPath));
I get the following in the browser console on load...
Failed to execute 'define' on 'CustomElementRegistry': the name "me-icon-button" has already been used with this registry
How do libraries handle this? I thought about removing the resolve plugin for mustache and assuming it is included globally. However, it seems pretty onerous to make everyone find a way to import mustache into window and not something most libraries do. I could also do something like this question suggests...
customElements.get("me-icon-button")||customElements.define("me-icon-button", IconButton, {...});
But having that multiple times in my code does not seem right either.
So How do I include multiple web components that reference other similar components?
I have been doing some research to find the most suitable CSS library for my React app that would remove (the 96% of my bundle.css) unused CSS.
I realized that most libraries need specific paths to the CSS files to be removed and maybe a whitelist of what should be kept. However, it's trickier in a React app, because there is:
an SCSS file for each custom component
a 3rd party CSS library (antd)
CSS that is runtime-generated
Are there any libraries that allow to do this (hopefully without going through a headache to configure them)?
P.S: I use webpack and mini-css-extract-plugin
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.
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.