I have installed react-planner in my react app and I want to use in react component. I follow the mentioned the guideline but not work in react component
I tried that
`
import React from "react";
import ReactPlanner from "react-planner";
function WarehouseDesign() {
return (
<div>
<h2>design</h2>
<ReactPlanner
// catalog={MyCatalog}
width={800}
height={600}
// plugins={plugins}
stateExtractor={(state) => state.get("react-planner")}
/>
</div>
);
}
export default WarehouseDesign
;`
ERROR
Failed to compile
./src/components/dashboard/Warehouse/WarehouseDesign.tsx
Attempted import error: 'react-planner' does not contain a default export (imported as 'ReactPlanner').
Related
I'm trying to use some web components inside a React application. However, React is not able to detect the web component tags.
import React from "react";
import "./App.css";
import "#vaadin/vaadin-button";
import "#vaadin/vaadin-text-field";
function App() {
return (
<div className="App">
<vaadin-text-field label="First Name" ref="firstName" />
<vaadin-text-field label="Last Name" ref="lastName" />
<vaadin-button ref="addButton"> Add </vaadin-button>
</div>
);
}
export default App;
I'm getting errors like,
Property 'vaadin-text-field' does not exist on type
'JSX.IntrinsicElements'.
Do I need to use Reactify-WC to be able to use WebComponents in React?
Assuming that is a Typescript compile error. You need to add typescript declarations to your
react-app-env.d.ts
declare namespace JSX {
interface IntrinsicElements {
'vaadin-text-field': { 'prop': any };
'vaadin-button d': { 'prop': any };
}
}
or possibly at the top of the file
I am unable to use my npm component package that i have created.
I have published the package successfully but when i am using it in a fresh code it is showing this error "SyntaxError: /home/trinendra/Desktop/react-test/node_modules/iconbox1/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:17)"
My package name:"iconbox1"
My npm package code is here:
import React,{Component} from "react"
class Welcome extends Component{
render(){
return (
<input type="text" placeholder="Your name"></input>
)
}
}
module.exports.Welcome = Welcome;
And i am using it here in my main app:
import logo from './logo.svg';
import './App.css';
import {Welcome} from "iconbox1"
function App() {
return (
<div className="App">
<Welcome></Welcome>
</div>
);
}
export default App;
enter image description here
Might be good not to mix ES5 and ES6. This might be happening because of the way you are exporting your Component.
There is a render(){} function missing in your App component.
Try exporting Your welcome component using export {Welcome} or export default Welcome, but make sure to remove the brackets around welcome in your app component if you are using the second option
You are using both ES6 and ES5 syntax for importing and exporting.
Try this code instead Here's a Screenshot of the output. It's working for me
Check the name of the file is iconbox1 or not
import React,{Component} from "react"
class Welcome extends Component{
render(){
return (
<input type="text" placeholder="Your name"></input>
)
}
}
export default Welcome;
// import logo from './logo.svg';
import './App.css';
import Welcome from "./iconbox1"
function App() {
return (
<div className="App">
<Welcome></Welcome>
</div>
);
}
export default App;
I can't import my module, it keeps giving me the same error, I have looked into what I may have done wrong but I dont see it. Everything works for my other components (They are all in the same folder "./[Folder]") except this component and it's being passed the exact same way.
Module Not Found
ManageTreeComponent.jsx
import React from "./react";
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems;
LoginApp.jsx
import DisplayListItems from "./ManageTreeComponent.jsx";
function Login() {
return <div className="container">
<DisplayListItems />
</div>
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Your import react statement is wrong in ManageTreeComponent.jsx, make sure your import looks like this:
import React from "react"; // without period and /
Rather then using .jsx file use .js file
ManageTreeComponent.js
import React from "react"; // need to import like this
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems
LoginApp.js
import DisplayListItems from "./ManageTreeComponent";
function Login() {
return (
<div className="container">
<DisplayListItems />
</div>
);
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
I am using React create app and I understand how to import a component into my main app which is called app.js.
What I do not understand is how I import a component in a component which is then imported in app.js (nested component).
In my app.js file, I have a component called Portfolio. In my portfolio.js file, I have a component called Language. Is it even possible to nest components with React create app? Because it does not seem to work.
This is what I tried to do:
In my app.js file :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Portfolio from './components/portfolio';
import "./css/styles.css"
function App() {
return (
<div className="App">
<header>
<h1>My beautiful title</h1>
</header>
<Portfolio />
</div>
);
}
export default App;
In my portfolio.js file :
import React, {Component} from 'react';
import Language from './components/language';
class Portfolio extends Component {
render() {
return (
<div className="portfolio">
<Language/>
<h1>My protfolio</h1>
</div>
);
}
}
export default Portfolio;
And in language.js I have:
import React, {Component} from 'react';
class Language extends Component {
render() {
return(
<div>Switch language</div>
);
}
}
export default Language;
In my browser, I keep getting the following error:
"./src/components/portfolio.js Module not found: Can't resolve
'./components/language' in
'C:\Users\mluce\exercice-react\src\components'"
My language.js file is definitely sitting in my components folder. I do not understand why I get this error?
In portfolio.js:
import Language from './language';