I use CSS modules in my React app. Today I was trying to code and had to upgrade some dependencies - react from 17.0.1 to 17.0.2, react-scripts from 4.0.3 to ^5.0.0, eslint from ^7.32.0 to 8.0.0 - and I had a bunch of errors. I managed to fix a lot of them, but I'm getting a lot of errors like this one:
export 'headerImageWrapper' (imported as 'headerImageWrapper') was not found in './Header.module.css' (possible exports: default)
I've been importing destructured classes from CSS modules - and it was working until today.
import React from 'react';
import logo from '../../assets/logo.png';
import {
headerWrapper,
headerImageWrapper,
headerLogo,
headerTitleWrapper,
} from './Header.module.css';
export default function Header() {
return (
<div className={headerWrapper}>
<div className={headerImageWrapper}>
<img className={headerLogo} src={logo} alt="Logo" />
</div>
<div className={headerTitleWrapper}>
<p>Biblioteca</p>
<p>Colégio</p>
</div>
</div>
);
}
It does work when I import it as "styles", but I wanted to keep it destructured so I didn't have to use "styles.headerWrapper"
I am getting this same error and don't want to revert to styles.myStyle. So right now I am still importing the entire styles object, import styles from "./blah.module.css", but then I deconstruct the variables after const {styleOne, styleTwo} = styles;. This allows you to keep everything else the same, but still kinda annoying.
Related
guys
I'm trying to build my react project, but it keeps saying
'Attempted import error: 'styles' is not exported from './styles.module.scss' (imported as 'styles').'
So, I guess I've got wrong settings in my webpack config file but have no idea what's wrong in there. I'm using css module so have tried this way https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules, but didn't work for me.
This is the one of the source file I'm using styles
import styles from "./styles.scss";
import { withRouter } from "react-router";
const ArrowBack = ({ history, onClick }) => {
return (
<button type="button" onClick={onClick || history.goBack} className={styles.arrowBack}>
<span className={styles.bar}></span>
</button>
);
};
export default withRouter(ArrowBack);
Here is my files
webpack config
https://gist.github.com/bbatta38/45695862bdde7928b788420793c006b6
package json
https://gist.github.com/bbatta38/4b91a2b84aaa237b54277b78525f8473
build js
https://gist.github.com/bbatta38/e18792375a107afcfedfeba48bc3fe1e
It's been already two days to find out any ways to make it work. Please help me if you have any idea to resolve this error.
Try
import styles from "./styles.module.scss";
It seems you're missing the 'module' in the file name.
since Gatsby v3 you need to import the style like this:
import * as styles from './styles.module.scss'
When I run npm run build and npm start on my local machine it deploys perfectly to localhost but when I try to deploy the very same code to Vercel I get the following error:
08:28:16 Failed to compile.
08:28:16 ./pages/index.tsx:5:20
08:28:16 Type error: Cannot find module '../components/layout' or its corresponding type declarations.
It definitely seems like an issue with the Layout component, I switched around the order of the important and it always fails when trying to load the Layout component. Here's the code for the component:
import Alert from "./alert";
import Footer from "./footer";
import Meta from "./meta";
type Props = {
preview?: boolean;
children: React.ReactNode;
};
const Layout = ({ preview, children }: Props) => {
return (
<>
<Meta />
<div className="min-h-screen">
<Alert preview={preview} />
<main>{children}</main>
</div>
<Footer />
</>
);
};
export default Layout;
index.tsx line 5 looks like this import Layout from "../components/layout"; and I've confirmed that that is the correct path for the Layout component.
are you sure the file name is layout.tsx not Layout.tsx :-)
I went through the same thing.
Fix layout.tsx to Layout.tsx
The file name and component name must be the same.
I'm running into a weird problem. I'm using NextJS for its server-side rendering capabilities and I am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to access the component where I'm importing ReactQuill via a anchor link is not working but I can access it via manually hit the route. Here is my directories overview,
components/
crud/
BlogCreate.js
pages/
admin/
crud/
blog.js
index.js
blogs/
index.js
In my pages/admin/index.js
...
<li className="list-group-item">
<Link href="/admin/crud/blog">
<a>Create Blog</a>
</Link>
</li>
...
In my pages/admin/crud/blog.js
import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
<BlogCreate />
</div>
In my components/crud/BlogCreate.js
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
<div className="form-group">
<ReactQuill
value={body}
placeholder="Write something amazing..."
onChange={handleBody}
/>
</div>
in order to use import "../../node_modules/react-quill/dist/quill.snow.css" in components/crud/BlogCreate.js I use #zeit/next-css and here is my next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
publicRuntimeConfig: {
...
}
});
Problem
when I click the Create Blog it should be redirect me http://localhost:3000/admin/crud/blog but it just freeze.
But if I manually hit http://localhost:3000/admin/crud/blog then it go to the desire page and work perfect.
And as soon as I manually load that page then Create Blog works. Now I really don't understand where is the problem? Because it show no error that's why I haven't no term to describe my problem that's why I give all the nasty code and directories which I suspect the reason of this error.
It's hard to give you any solution without seeing the entire project(As you mentioned that it shows no error).
You may remove the #zeit/next-css plugin because Next.js 9.3 is Built-in Sass Support for Global Stylesheets. You can use it for css also.
Create a pages/_app.js file if not already present. Then, import the quill.snow.css file:
import "../../node_modules/react-quill/dist/quill.snow.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
If it gives any error then you can create a directory/file to copy-paste the quill.snow.css code in that file.
pages/
_app.js
styles/
quill_style.css
Then import the file in _app.js like,
import "../styles/styles_quill.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
Eventually you can import your custom gobal css here also.
If although the problem remains then provide your git repository. happy coding ✌️
First: remove your #zeit/next-css setup not needed anymore since next.js version 10.
Second: update nex.js to version 10 you could then use regular import on your modules.
import "../../node_modules/react-quill/dist/quill.snow.css";
By the way, I had the same issue with your Nextjs course. ;)
When I route my app to another component by using react-router-dom, the CSS doesn't change.
This is a minimalistic version of the code to demonstrate
App.js
import React from 'react';
import Home from './Home';
function App() {
return (
<div>
<Home></Home>
</div>
);
}
export default App;
Home.js
import React from 'react';
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Home.css
body {
background-color: blue;
}
Dashboard.js
import React from 'react';
import './Dashboard.css';
import React from 'react';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className='content'>
<h1>Dashboard</h1>
</div>
);
}
export default Dashboard;
Dashboard.css
.content {
display: flex;
align-content: center;
align-items: center;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
When I do /dashboard, it loads the Dashboard component, but it keeps the previous CSS that was loaded from the Home component that resides the App component. The background stays blue. I want that when I route to another component because I changed the URL, it loads whatever CSS that new component has attached to it and gets rid of whatever CSS was before. Is that possible?
Edit: I have made an example in CodeSandbox to illustrate. It's a little different from the code above due to the limitations of the playground, but the functionality is the same.
From what can be seen, importing as a module ends up importing it globally. If we comment the line import Home from "./Home"; the blue background disappears. Just importing the component, imports the whole CSS despite the CSS being imported in a modular way. I'm not sure if I am missing something.
Edit 2:
Here are the different solutions I tried:
CSS Modules, but the body style was still globally loaded.
Styled components don't let me modify the body or html selectors CSS. They require me to create a <div> element and
then have that element span the whole body which I would style
as if it was the body. Which is a workaround I don't want to use because for that I rather use CSS Modules for the whole body spanning .
Inline styling also doesn't let me modify the body or html selectors CSS. I would also need to use a workaround like a body spanning <div> as in Styled components.
The problem
When you import a css like you're doing here
import './Home.css';
you're importing it in a global scope, which means it will not disappear once imported.
The solutions
CSS Modules
What you want is either CSS Modules, which is used like this:
import styles from './Home.css';
<a className={styles.myStyleClass}>Hello</a>
Styled components
or a CSS-in-js framework such as styled components which is used like this:
import styled from 'styled-components';
const MyStyledElement = styled.a`
color: blue;
`;
<MyStyledElement>Hello</MyStyledElement>
Regular objects / inline styling
or just "regular" CSS-in-js like:
const myStyle = {
color: blue;
}
<a style={myStyle}>Hello</a>
There are plenty of options when it comes to styling, these alternatives are popular ones that I encourage you to explore and see which you enjoy.
After doing some more tests I have concluded that as of now it is not possible to change whatever CSS styles have been applied to a <body> or <html> selector in an React SPA when a CSS file is already loaded and one uses React Router to render other components. I still appreciate the answers and the time taken to help me find a solution. They are still valid answers if we are not talking about the <body> or <html> node in an HTML document. From them I learned about other ways to use CSS in React. I modified the original post with the solutions I tried.
What ended working was modifying the DOM styles with JavaScript whithin the component itself.
Home.js
import React from "react";
const Home = () => {
// Modify the DOM Styles with JavaScript
document.body.style.backgroundColor = "blue";
// Or uncomment below to modify the
// document root background color
// which in this case would be <html>
//document.bgColor = "blue";
// Or modify the root tag style of the document instead of the
// <body> (<html> in this case)
//document.documentElement.setAttribute('style', 'background-color: green');
return (
<div>
<h1>Home</h1>
<form action="/dashboard">
<input type="submit" value="Go to Dashboard" />
</form>
</div>
);
};
export default Home;
Here is a working example:
Where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
More info: styles-not-working-with-react-router
Greetings fellow meteorites!
I am in the process of including material ui (react based) into an existing blaze app. I'm using the meteor guide and the material-ui docs as my instructions to do this properly but unfortunately to no avail. Has anyone successfully done this before? According to the material-ui docs you are supposed to inject an MuiThemeProvider into your main App Component but I keep getting the following error:
MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Here is my root blaze html template:
<template name="main">
<head>...</head>
<body>
<div id="wrap">
<div id="react-app-wrapper">
{{> React component=App}}
</div>
</div>
</body>
</template>
Notice I am using https://guide.meteor.com/react.html#react-in-blaze as my guidelines and am using the meteor package react-template-helper.
Here is my main.js file:
if(Meteor.isClient){
import App from './users/client/ui/components/App.js';
Template.main.onCreated(function(){
});
Template.main.helpers({
'App' : function(){
return App;
}
}
And my App.js Component File:
import React, { Component, PropTypes } from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const lightMuiTheme = getMuiTheme(lightBaseTheme);
export default class App extends Component{
constructor(props){
super(props);
}
render() {
return (
<div>
<MuiThemeProvider muiTheme={lightMuiTheme} >
</MuiThemeProvider >
</div>
);
}
}
Appreciate your help big time! I have tried everything and feeling pretty stumped right now. :( If you give the correct answer I will obviously mark it as so!
Alex
This is how MuiThemeProvider renders
render() {
return this.props.children;
}
And therefore it, React actually, complained of nothing to render since this is you use it.
render() {
return (
<div>
<MuiThemeProvider muiTheme={lightMuiTheme} >
{/* There should be something here. */}
</MuiThemeProvider >
</div>
);
}
Start to put some contents that it can serve for you.
A side notice here is that the outer <div> wrapper can be dropped on the premise that it is not of some particular use.
Good luck!