I am trying to use the Carbon Design's UI Shell component.
I followed this blog to install all libraries, dependencies, etc.
Below is my code:
import {UIShell} from 'carbon-components-react';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<UIShell>UIShell Placeholder</UIShell>
</header>
</div>
);
}
export default App;
When I run this code, I get:
"Failed to compile: ./src/App.js Attempted import error: 'UIShell' is not exported from 'carbon-components-react'."
According to the repository, UIShell is a component of carbon-components-react.
Why am I getting this error?
If you look in ./node_modules/carbon-components-react/lib/index.js, you will see that, although UIShell is defined in .../lib/components/, it's not exported.
So the question is actually... how can we access the UIShell components from the carbon-components-react component library when it's not exported?
I have found that that it's possible to import the UIShell component library explicitly:
import {...} from 'carbon-components-react/es/components/UIShell'
Or, if you are not using ESM, I think that you could require the components via the following:
require('carbon-components-react/lib/components/UIShell')
Related
when i am run npm start in termianl then i am facing this type of error so I have no idea what I do...?
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
As noted by Dave, it is not necessary to import React anymore for JSX to work, so this ESLint rule is probably throwing the error, depending on your ESLint configuration.
You can either disable the rule on your configuration file or the ignore file or import React.
import React from 'react';
I installed react then acc to a tutorial video I deleted all files in src directory and then created new index.js, index.css and app.js and other files but now it is showing an error for me
I also googled it; some answers were corrected but rearranging script position and some were corrected by giving id root in app.js to a <div> but all those are not working for me.
This is the error:
Error: Target container is not a DOM element.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
I just installed ReactJS and now it is showing the above error. Can someone please, help me to solve the problem?
PS: For further reference following is a screenshot of the error I get.
Make sure you have index.html file with an element which has an id root, and make sure your index.html file is in the public directory
I am trying to evaluate react-fabricjs package but it seems doesn't work with current React 16.12.0 version. The error I am getting is : TypeError: Cannot read property 'bool' of undefined in /./src/StaticCanvas.jsx?:414:40 followed by bunch of other errors. Any idea on how to use the Fabricjs or perhaps suggest another library?
To replicate the issue I simply create blank React app by npx create-react-app demo and add the package yarn add react-fabricjs --save
import logo from './logo.svg';
import './App.css';
import { Canvas, Text } from 'react-fabricjs';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Canvas
width="900"
height="900">
<Text
text="Hello World!"
left={300}
top={300}
fill="#000000"
fontFamily="Arial"
/>
</Canvas>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Taking a look at the error on a sandbox I've created using just this package, I can see that it's trying to access PropTypes from react's object.
Based on react docs:
React.PropTypes has moved into a different package since React v15.5
So, my assumption is that this module was built using a React version that still had PropTypes under its object.
You might consider looking for a different module as it seems that this one is no longer maintained.
I would like to add push notifications to my react app. This requires service workers, but I am having no luck getting them to work. I have run npx create-react-app test and amended the App.js as such (line 5, navigator.serviceWorker... is the only change):
import React from 'react';
import logo from './logo.svg';
import './App.css';
navigator.serviceWorker.register("/service_worker_test.js");
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
and added service_worker_test.js to the public folder with just this:
self.addEventListener("activate", event => {
console.log("[Service Worker]", "activated");
});
when I run it using npm start, it loads in the browser and logs [Service Worker] activated. But in the chrome dev tools, it shows the service worker as <location> - deleted and the status is redundant.
Creating a non-React app with service workers and push notifications works perfectly fine for me on the same environment.
Why is it doing this? Thanks!
The default behavior for CRA is to disable service workers.
As a result of this default, to use a custom SW as you are, either delete or comment out the line calling serviceWorker.unregister().
Example with custom service worker enabled, serviceWorker.unregister() deleted:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
navigator.serviceWorker.register("/service_worker_test.js");
I´m trying to use the official semantic-ui-react for the first time with React. I´ve built a brand new react application:
$ create-react-app test
And I then tried to add the same react image as follows in App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import { Image } from 'semantic-ui-react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className="ui container">
<h1>Hello World</h1>
<Image src={logo} avatar/>
<Image src={logo} size='mini'/>
</div>
</div>
);
}
}
export default App;
The result shows me 2 big react {logo} images, not mini or avatar styled:
Ideas of what I´m missing here ?
Semantic UI React requires a Semantic UI' CSS, you forgot to setup it, here is instuctions. We will also add an example setup with CRA soon.
You might have found your answer already, but not seeing it here, so adding solution for the same error I got while using Image component with svg icon
import { Image } from 'semantic-ui-react';
import { ReactComponent as Logo } from './logo.svg';
<div className="ui container">
<h1>Hello World</h1>
<Image as={Logo} title="logo" avatar />
</div>
Hope this helps some one!