We Keep Coding

ReactJS - Element type is invalid

I keep getting this weird error in my React that says
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ContactTemplate`.
I tried to remove each of the import to see where the error is, but nothing works.
My ContactTemplate.jsx:
import React from 'react';
import { Container } from '~/components/interface/Container';
import PreviewBar from '~/components/PreviewBar';
import HeroFull from '~/components/HeroFull/HeroFull';
import { Wrapper, Columns, Paragraph, BigText } from './ContactTemplate.styles';
import { Link } from '~/components/interface/Link';
const ContactTemplate = ({ preview }) => {
const data = [
{
name: 'Name 1',
job: 'Bestuursrechts',
phone: '+31 (0) 612345678',
email: 'Email',
link: 'https://www.linkedin.com',
},
{
name: 'Name 2',
job: 'Intellectuele eigendom en contractenrecht',
phone: '+31 (0) 612345678',
email: 'email',
link: 'https://www.linkedin.com',
},
];
return (
<>
<Wrapper>
{preview && <PreviewBar />}
<HeroFull
title="Contact"
intro="We offer ...."
/>
</Wrapper>
<Container>
<Columns>
{data.map(item => (
<div>
<BigText>{item.name}</BigText>
<Paragraph>{item.job}</Paragraph>
<Paragraph>{item.phone}</Paragraph>
<Paragraph>{item.email}</Paragraph>
<Link>{item.link}</Link>
</div>
))}
</Columns>
</Container>
</>
);
};
export default ContactTemplate;
Could someone help me out with this please?
If there are more files needed I'll add them on request.

Most likely you're trying to import { ContactTemplate } from "./ContactTemplate", but you're using export default. At this point you should import ContactTemplate from "./ContactTemplate"
Can you confirm if this is the case?
Can you show the component, where you import and trying to use ContactTemplate?

I solved it myself. The first problem was that my Docker was stuck so I had to restart it. After I restarted it I tried to remove each import individually to see where the problem was and it was the { Link } that needed to be just Link. Thanks everyone else for helping!

Unhandled Rejection (Error): element with ID «editorjs» is missing. Pass correct holder's ID

I am developing a react app which uses Editor.js as an editor and that page is working fine. But when ever i try to access other pages it gives Unhandled Rejection. This is confusing because i am importing editorjs packages only to the editor page, but it's asking for element with id "element-js".
This is editor connfig file.
const editor = new EditorJS({
holder: 'editorjs',
autofocus: true,
tools: {
paragraph: {
class: Paragraph,
inlineToolbar: true,
config: {
placeholder: 'Write Here....'
},
},
table: {
class: Table,
inlineToolbar: true,
config: {
rows: 2,
cols: 3,
},
},
header: {
class: Header,
/**
* This property will override the common settings
* That means that this tool will have only Marker and Link inline tools
* If 'true', the common settings will be used.
* If 'false' or omitted, the Inline Toolbar wont be shown
*/
inlineToolbar: true,
config: {
placeholder: 'Header'
},
shortcut: 'CMD+SHIFT+H'
},
delimiter: Delimiter,
warning: Warning,
list: {
class: List,
inlineToolbar: [
'link',
'bold'
]
},
quote: Quote,
checklist: {
class: Checklist,
inlineToolbar: true,
},
Marker: {
class: Marker,
shortcut: 'CMD+SHIFT+M',
},
embed: {
class: Embed,
inlineToolbar: false,
config: {
services: {
youtube: true,
coub: true
},
},
},
image: ImageTool,
}
});
And how i am importing:
import EditorJS from '#editorjs/editorjs';
import Header from '#editorjs/header';
import List from '#editorjs/list';
import Checklist from '#editorjs/checklist';
import Embed from '#editorjs/embed';
import Marker from '#editorjs/marker';
import Warning from '#editorjs/warning';
import Quote from '#editorjs/quote';
import Delimiter from '#editorjs/delimiter';
import ImageTool from '#editorjs/image';
import Table from "#editorjs/table";
import Paragraph from "#editorjs/paragraph";
I don't know what's the problem here. In my opinion these imports are importing globally to the whole app.

I know this is a bit late but some other people like me still arrive here with the same issue and some of us don't want to use an unofficial editor.js component.
So the issue is pretty simple, that error means that you must have an element with id editorjs in the DOM but since Im using Next.js I will explain how to use it step by step. (you won't need extra steps if you are only using React)
Create a component that looks like this: (You have to install plugins otherwise you will get some errors)
import Embed from '#editorjs/embed'
import Table from '#editorjs/table'
import List from '#editorjs/list'
import Warning from '#editorjs/warning'
import Code from '#editorjs/code'
import LinkTool from '#editorjs/link'
import Image from '#editorjs/image'
import Raw from '#editorjs/raw'
import Header from '#editorjs/header'
import Quote from '#editorjs/quote'
import Marker from '#editorjs/marker'
import CheckList from '#editorjs/checklist'
import Delimiter from '#editorjs/delimiter'
import InlineCode from '#editorjs/inline-code'
import SimpleImage from '#editorjs/simple-image'
import EditorJS from '#editorjs/editorjs'
const EditorNoSSR = ({ type }) => {
const TOOLS = {
embed: Embed,
table: Table,
marker: Marker,
list: List,
warning: Warning,
code: Code,
linkTool: LinkTool,
image: Image,
raw: Raw,
header: Header,
quote: Quote,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage,
}
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: 'editorjs',
tools: TOOLS,
})
return (<>
<div>
<div id="editorjs">
</div>
</div>
</>);
}
export default EditorNoSSR;
That is a component that you will import using next/dynamic and it will work perfectly. And to share data from this component to another you can use react's context.
Now a page where you call the component will look like this:
import { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const EditorNoSSR = dynamic(() => import("../../../components/EditorNoSSR"), { ssr: false })
const EditorPage = () => {
return (<>
<EditorNoSSR />
</>);
}
export default EditorPage;

Now I have used React-editor-js and it's working fine.
https://www.npmjs.com/package/react-editor-js

Why I am getting "no-undef " error when I run react js component class?

I am new to react js. I have created a class extends Component. When I run my code it throws error mentioned that, variables are not defined. I am following a tutorial. This is works for the tutor correctly. But I am getting error.
App.js
import logo from './logo.svg';
import './App.css';
import React from 'react';
import TextCard from './textCard';
class App extends React.Component {
textArr = [
{
id: 1,
name:"Name1",
department:"Computer",
semester :7,
},
{
id:2,
name: "Name2",
department: "Computer",
semester: 7,
},
{
id: 3,
name: "Name3",
department: "Computer",
semester: 7,
}
]
textCards = this.textArr.map((item)=>{
return (
<TextCard key={item.id} name={item.name} department={item.department} semester={item.semester} />
)
})
hideOnClick(){
alert('Hide btn pressed')
}
text1 = "Testing variable access"
render(){
return(
<div className="App">
<h1>My React js</h1>
<h2>React js course from Udemy</h2>
<hr></hr>
<h3>JSX test</h3>
<hr></hr>
<div>{this.text1}</div>
<hr></hr>
<button onClick={this.hideOnClick}>Hide List</button>
<div>
{this.textCards}
</div>
</div>
);
}
}
export default App;
textCard.js
import React from 'react';
import classess from './textCard.module.css';
const TextCard = (props) =>{
return(
<div className={classess.dynamicTest}>
<h2>{props.name}</h2>
<p>{props.department}</p>
<p>{props.semester}</p>
</div>
)
}
export default TextCard;
The Error
Failed to compile.
src\App.js
Line 11:3: 'textArr' is not defined no-undef
Line 34:3: 'textCards' is not defined no-undef
Line 50:3: 'text1' is not defined no-undef
Search for the keywords to learn more about each error.

You need to install and use the #babel/plugin-proposal-class-properties to use class fields. Class fields are not in the Javascript core language yet and you need to tell the Babel compiler how to handle them if you want to use them.
npm install --save-dev #babel/plugin-proposal-class-properties
And add this to your .babelrc.json
"plugins": ["#babel/plugin-proposal-class-properties"]
If your tutorial didn't mention that you need to install this plugin, it is not a good tutorial.

React: Failed to import a JavaScript class from a folder

I have a React project and this is my first time using it.
I have a JavaScript in the container that import a JavaScript within the components.
This is my containers file
Restorans.js
import React, { Component } from 'react';
import Restoran from "./components/Restoran/Restoran";
import classes from "./Restorans.module.css";
class Restorans extends Component{
constructor(props){
super(props);
this.state = {
restorans:
[
{id:1, nama: "Restoran A", alamat: "This is address Restoran A", nomorTelepon : "0217352333"},
{id:2, nama: "Restoran B", alamat: "This is address Restoran B", nomorTelepon : "0217352334"},
{id:3, nama: "Restoran C", alamat: "This is address Restoran C", nomorTelepon : "0217352335"}
],
isLoading: true
}
}
componentDidMount() {
console.log("componentDidMount()");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate()");
}
loadingHandler = () => {
const curretIsLoading = this.state.isLoading;
this.setState({isLoading: !(curretIsLoading)});
console.log(this.state.isLoading);
}
render() {
console.log("render()")
return(
<React.Fragment>
<div className={classes.Title}> All Restoran </div>
<div className={classes.Restorans}>
{this.state.restorans.map(restoran =>
<Restoran
key={restoran.id}
nama={restoran.nama}
alamat={restoran.alamat}
nomorTelepon = {restoran.nomorTelepon}
/>
)}
</div>
</React.Fragment>
);
}
}
export default Restorans;
and this is my components
Restoran.js
import React from "react";
import classes from "./Restoran.module.css";
const Restoran = props => {
return(
<div className={classes.Restoran}>
<h3>
{props.name}
</h3>
<p>
Alamat: {props.alamat}
</p>
<p>
Nomor Telepon: {props.nomorTelepon}
</p>
</div>
)
}
export default Restoran;
My folder library is as follow
When I run npm start on my terminal. I receive this error:
Module not found: Can't resolve './components/Restoran/Restoran' in 'C:\Users\[REDACTED]\projectreact\frontend-projectreact\src\containers\Restorans'
To my own understanding, there shouldn't be any error. I tried to add .js on the end but it still has the same problem. Where did I go wrong?

It looks like you are within the containers directory in Restorans.js.
If you want to access Restoran.js from components, you have to go two levels up and out of containers, so change your import in containers/Restorans.js to:
import Restoran from "./../../components/Restoran/Restoran";
The ../../ part will take you to the root parent directory where both containers and components live as children/sub-directories by moving you up two folders.
As far as CSS, I usually import it one place from in the root <App/> component after a normalizer/CSS Reset.

Firstly,(just an advice) try not to name your files same. I see Restorans.module.css both in Restoran and Restorans. It might get clumsy to do so. And next thing is if you want to import css file
import "../Restoran/Restoran.module.css"
or any specific element then
import {classes} from "../Restoran/Restoran.module.css"
Also , check the path as ,if you are working on Restoran.js then
"../../components/Restoran/Restoran"
.. -> changes to root and then from there you can change your folder and access the required components.

Defining the path as './../../components/Restoran/Restoran' should help.

You use incorrect relative path (in Restorans.js), try:
import Restoran from "../../components/Restoran/Restoran";
Also you can set up aliases to have absolute paths (import Restoran from '#components/Restoran/Restoran')

Query Strings with React for a small weather app

I want to be able to set a city for my weather app using query-strings like ?latt_long=34.052235,-118.243683&&woeid=2442047. Here is a link to it https://github.com/rushingMarina/weather-react-app . Right now I have a cities.json file in my project and App.js fetches data about the cities from there. I can not seem to figure out how to use query-strings. On https://www.npmjs.com/package/query-string it tells me to use const queryString = require('query-string'); in order to use query-strings but I can not declare a const in my App.js.
My App.js:
import React, { Component } from "react";
import FrontSide from "./FrontSide";
import BackSide from "./BackSide";
import "./panel.css";
import cities from "./cities.json"
import queryString from 'query-string';
class App extends Component {
const queryString = require('query-string'); //I get unexpected token error (11:6) on this line right before queryString
console.log(location.search);
state = {flipped: false, currentCity: cities[0]};
onFlip =() => {
this.setState({flipped: !this.state.flipped});
};
onSelectCity = (city) => {
this.setState({currentCity: city})
}
render() {
return (
<div className={`panel ${this.state.flipped ? 'flip' : ""}`}>
<div className="panel-front">
<FrontSide onClick={this.onFlip} currentCity={this.state.currentCity}/>
</div>
<div className="panel-back">
<BackSide
cities={cities}
onClick={this.onFlip}
currentCity={this.state.currentCity}
onSelect={this.onSelectCity}
/>
</div>
</div>
);
}
}
export default App;
My cities.json
[
{
"title":"Los Angeles",
"location_type":"City",
"woeid":2442047,
"latt_long":"34.052235,-118.243683"
},
{
"title":"San Diego",
"location_type":"City",
"woeid":2487889,
"latt_long":"32.715736,-117.161087"
},
{
"title":"New York",
"location_type":"City",
"woeid":2459115,
"latt_long":"40.730610,-73.935242"
},
{
"title":"Chicago",
"location_type":"City",
"woeid":2459115,
"latt_long":"41.881832,-87.623177"
},
{"title":"St Petersburg",
"location_type":"City",
"woeid":2123260,
"latt_long":"59.932739,30.306721"
}
]
i tried declaring
const queryString = require('query-string');
but react shows unexpected token at "queryString"
Please refer to my github link, there you will find App.js and cities.json files
I expect to get information about the city to display on my FrontSide from URL query-string like.
This is the error I am getting:
Failed to compile.
./src/App.js
Syntax error: Unexpected token (11:6)
9 | class App extends Component {
10 |
> 11 | const queryString = require('query-string');
| ^
12 | console.log(location.search);
13 |
14 | state = {flipped: false, currentCity: cities[0]};

Just remote the const queryString = require('query-string'); line out of the class declaration and put it on top. Just right below the import statements and everything should work fine. React doesn't like require statements inside the class declaration