I'm fairly new to reactJS and looking for some clarification. I have a fairly simple reactJS application with several components and a utility javascript file containing functions I would like to be able to call from each component.
My util.js file looks something like this:
export function printMe(txtToPrint){
console.log(txtToPrint);
}
export function addUs(a,b){
return a + b;
}
my ComponentA looks something like this:
import React, {Component} from 'react';
import {printMe, addUs} from './util';
...
and my folder structure looks like:
/src
/src/components/componentA/componentA.js
/src/util.js
when I run the application, I receive an error stating:
Module not found: './util' 'src/components/componentsA'
However, when I change the import statements on the componentA to look like this:
import React, {Component} from 'react';
import {printMe, addUs} from '../../util';
Everything works. I am/was under the impression ./ is location of src. Is it not the case?
The urls are relative to the file where they are declared.
If you're inside componentA.js:
./ is inside the componentA folder,
../ is inside the components folder,
../../ is inside the src folder. That's why this one works
Check this for more info: https://webpack.github.io/docs/resolving.html#resolving-a-relative-path
Related
I'm using functional components and exported a function and imported this function in my App.js.
How do i use that component, for some reason editor doesnot take the component.
I'm also using scss, anyone please check if the process of adding scss is correct or not!!
In react to import & exporting a file there is a naming convention.
You should perform these changes to your App.js and skeletion_loader.jsx file.
In skeleton_loader change the function name from this skeletonLoader to SkeletonLoader and in the App.js file import it as import {SkeletonLoader} from "../xyz.jsx";
I'm working on a React project, and creating a component called SVGLogo that simply imports an svg and exports as a component. I noticed that when I use require() to import my svg file, it works fine:
const SVGLogo = require('../../../../../vft-site/src/images/logo.svg');
But my linter suggests I use the import statement. I changed it but now I get the error 'cannot find module... or its corresponding type declarations':
import SVGLogo from '../../../../../vft-site/src/images/logo.svg';
Why are these different?
import comes in es6 like a new feature and require can be called from anywhere but import can be called on top of script
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.
Hi I am new to react I am trying added new component called Test and try to use it the app.js imported test into app.js but still get error. Below you can find stackblitz url Thanks in Advance.
Stackblitz url
import Test from './components/test'
Implement this line, make sure that c is written in lowercase in component/... path OR just copy the line above and replace yours with it. That will work for sure.
Issue in your sandbox is Components whereas your folder name is components:
import Test from './Components';
and you need to complete file path if your not using index.js as reference i.e
import Test from './components/Test';
Here is demo: https://stackblitz.com/edit/react-vcw5a8?file=src%2FApp.js
Two ways to go here: Either you import the File directly like this:
import Test from './components/Test';
or you create a index.jswithin the Components-Folder and add this:
import Test from './test.jsx';
export default Test;
Also, your Import-Statments are Upper-Case whereas you folder-name is lowercase, so you'll have to adjust on or the other.
I am coming from a CRA background and working my way through Next.js version 9.4.2
My project tree looks something like this :-
pages/
_app.tsx
index.tsx
components/
Navbar/
index.ts
Navbar.tsx
Navbar.scss
Inside my Navbar.tsx I have a statement import './Navbar.scss';
This gives me the following error :-
./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx
The error, as mentioned, goes away if I move the import Navbar.scss statement to pages/_app.tsx
I know I can switch to Navbar.module.scss, but I don't want to go down the route of modular scss as I expect my scss to get complex I would like to stick to the manner in which I write my scss and not keep finding work arounds to issues that might arise later. I am open to being convinced here but I have not found good read ups on this to choose it as my path.
So by the looks if it, I am stuck with importing all <component>.scss files in _app.tsx. This will leave me with a long list of <component>.scss imports in my _app.tsx and I will also be left with a lot of <component>.scss files for Components that might conditionally not render.
What are my options here ?
Your Navbar.scss file is not named properly.
Let's say your stylesheet contains something like...
$color: red;
.someclassselector {
color: $color;
}
Component stylesheet files have to be named in the following convention for next.js to compile them as addressed in next's css getting started guide
<TheComponent>.module.scss
be imported like this:
import styles from './<MyComponent>.module.scss>';
and be applied to the component like this:
<TheComponent className={styles.someclassselector} />
Not really an expert but it seems that you should stick to class selectors as global selectors can only be declared if you import them in pages/_app.js. You may name a main.scss file to use Global or Tag Element selectors like h1 {},h2{}, * {}, etc.