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.
Related
I have some files in my components folder. Two of them are CardItem-component/CardItemComponent.js and list-component/list-components.js.
When I'm trying to import the first component into the latter using
import CardItemComponent from "./CardItem-component/CardItemComponent";
it gives the following mistake:
Module not found: Error: Can't resolve './CardItem-component/CardItemComponent' in 'D:\project\src\components\list-component'
import CardItemComponent from "./CardItem-component/CardItemComponent";
Make sure you have given the correct file path and exported the component
export default CardItemComponent
Based on your explanation of your file structure, maybe you are targeting the wrong directory.
import CardItemComponent from "../CardItem-component/CardItemComponent";
I'm guessing your file structure is:
/some-folder
/CardItem-component
CardItemComponent.js
/list-component
list-components.js
When you are importing CardItemComponent.js from list-components.js, you need to go up one directory level to access the /CardItem-component folder, so you will need to prepend your path with ../.
Sorry, it was inattentive me. It works well, I only mistyped a few things.
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.
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