I'm working to import CSS files in my React App. I have css being imported successfully like so:
Original source app: https://github.com/timscott/react-devise-sample
MainLayout.jsx
import css from '../styles/base.css'
base.css
body {
opacity: .1;
}
When I load my app in a browser I see the styles taking effect. The problem is, in the console I'm getting a JS warning:
webpackHotDevClient.js:198 ./src/layouts/MainLayout.jsx
.../client/src/layouts/MainLayout.jsx
12:8 warning 'css' is defined but never used no-unused-vars
✖ 1 problem (0 errors, 1 warning)
What am I doing wrong in React to cause the CSS to render but still get a warning in the console?
Name this "component" only if you need call them in some part of the code. e.g. Using CSS-Modules. This is only a regular css so load in this manner :
import '../styles/base.css'
But if you still want to keep this unused var you can edit your es-lint, and delete this rule. (Not Recommended)
You do not need "css from" since the css file is already connected to the jsx file. You only do that when using other jsx components, for example:
import SomeComponent from '../SomeComponent.jsx'
Related
I've started using Electron alongside React and one issue I'm facing right now - which may actually be unrelated to Electron - is that Node cannot seem to "find" a Sass module that I am importing despite the fact the styles I'm importing are actually working.
Here is my file structure:
src
|__Render
|__Styles
| |__Page
| |__Home.module.scss
|__App.tsx
Inside of App.tsx, I'm importing the Sass module like so:
import styles from "./Styles/Page/Home.module.scss";
export default function App(){
return <div className={styles.test}>Test</div>
}
and receiving the error:
TS2307: Cannot find module './Styles/Page/Home.module.scss' or its corresponding type declarations.
Despite this, if I inspect the element I'm targeting, the styling is being applied.
<div class="Home_test__QTxtE">Test</div>
I have followed every single answer in this thread to no avail.
Is this an issue with Electron? Is there some sort of extra configuration I'm missing?
Also, it might be worth mentioning, that if I just import "Test.css";, this works fine.
Today I have created my basic react app where I have created a new component called 'myComponent.js' and later on I tried to import it into index file using import statement. When I use myComponent in the file to render it on screen and also a warning pops out saying 'myComponent' is defined but never used.
The first letter should be capitalized. You should do updates to use <MyComponent/> instead
I want to import .ts, .tsx, .js, and .jsx files into a react component and render them within a PrismJS highlighting block. For example, let's say I have a TypeScript file with functionA in it that I want to highlight in my actual website:
functionA.ts:
export function functionA() {
console.log("I am function A!");
}
I want to include this in a different component. The problem is, when I import it, I am obviously importing the webpack module version of it. My weak attempt at trying to get my function render in a react component looks like this:
MyComponent.tsx:
import * as React from "react"
import { functionA } from "./functionA"
export function MyComponent() {
return (
<>
<h1>Here is your code block:</h1>
<pre>
<code>
{functionA.toString()}
</code>
</pre>
</>
)
}
and what will actually render on the page where the code block is will look something like this:
Here is your code block:
WEBPACK__IMPORT.functionA() {
console.log("I am function A!")
}
I can't exactly remember what the .toString() function output looked like, but the point is it is NOT just the contents of the file how it appears in a code edit for example - it has been modulized by WebPack.
So, in a Gatsby project, how can i get these various code snippets to be imported directly as a string, purely as they are written, without WebPack enacting its import stuff on it? Is there a plugin or some way to tell Webpack to use the imported file as its asset/source module type? I know for MD or MDX files there is the gatsby-remark-embed-snippet, but I am building a component based HTML page and can't use MD or MDX files!
It's very late, and perhaps I just can't see the forest from the trees, I know there must be a way to do this...
You need to require the file using webpack's raw-loader, i.e:
const functionA = require("!!raw-loader!./functionA");
This works for create-react-app, as in the solution discussed here, and this works for Gatsby as well!
After using require on such a file, the file contents can be rendered in the component as:
<pre>{functionA.default.toString()}</pre>
It's then up to you to add syntax highlighting using a tool like prism or similar.
Note this solution will only work as long as Gatsby V3 continues to use WebPack v4, as raw-loader is deprecated in WebPack v5 and will be phased out for asset/source type modules.
I saw the examples where https://reactjs.org/docs/hooks-custom.html they always do:
import React, { useState, useEffect } from 'react';
But React is not really used in the file, do we really need it and why?
I asked this question because I am encountering an issue with eslint saying:
'React' is defined but never used no-unused-vars - And I'm on create-react-app 3.0.1 which eslint is already included - (and I'm not sure how to fix this - already tried this and also tried adding it on package.json eslintConfig but still nothing)
You will need React if you are rendering JSX.
To avoid that eslint warning, you should use react-in-jsx-scope rule from eslint-plugin-react.
In that rule, it also explains why you need React in the file, even if you don't use it (you think you don't use it, but if you render JSX, you do).
When using JSX, <a /> expands to React.createElement("a"). Therefore the React variable must be in scope.
If you are using the #jsx pragma this rule will check the designated variable and not the React one.
React 17 has a new JSX transform which no longer requires the import (also backported to new versions 16.14.0, 15.7.0, and 0.14.10). You can read more about it here:
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
// no import needed
const App = () => <div>hello!</div>
However, you still need to import to use hooks:
import { useState } from 'react'
const App = () => {
const [stuff, setStuff] = useState('stuff')
return <div>{stuff}</div>
}
The docs also link to a script to automatically update all of the files in a project to fix all of the imports. Personally, I was in the habit of just using the React.useWhatever form so I never needed to mess with the import statement, but using named imports can potentially reduce the final bundle size.
The docs say the named import is now the recommended way, so this is NOT recommended, but if you really want to keep the React import, you can set the below eslint rule to stop it from complaining. Note that this will continue to require it in all files.
"react/jsx-uses-react": "error"
From the React official docs:
Fundamentally, JSX just provides syntactic sugar for the
React.createElement(component, props, ...children) function. The JSX
code:
<MyButton color="blue" shadowSize={2}>Click Me</MyButton>
compiles
into:
React.createElement(MyButton, {color: 'blue', shadowSize: 2},'Click Me' )
You can also use the self-closing form of the tag if
there are no children. So:
<div className="sidebar" />
compiles into:
React.createElement('div', {className: 'sidebar'}, null )
https://reactjs.org/docs/jsx-in-depth.html
EDIT Hooks are also under the React namespace, React.useState ...etc
how to add a component to my react project
I already defined it and import it in app js
but it did not work and the console tells me
warning: it is defined but never used
That's not an issue. Your component is being exported and imported correctly.
The thing, you are importing a component but you didn't use that anywhere. That's what warning shows you. If you don't need that component to use, remove the import line for that component to remove the warning message from the console.
Or, if you use eslint, add the following comment just after the import statement
// eslint-disable-line no-unused-vars
Or, you may configure with more option:
/*eslint no-unused-vars: ["error", { "vars": "local" }]*/
/*global some_unused_var */