I got following error when I start to run the local server:
Failed to compile ./src/App.js Module not found: Can't resolve
'./Main' in '/home/sol/React/kuehnfotografie/src'
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import { Provider, createComponent } from 'react-fela';
import { createRenderer } from 'fela';
class App extends React.Component {
render() {
return (
<div className="content">
<Main />
</div>
);
}
}
export default App;
Folder structure
This is the main.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, createComponent } from 'react-fela';
import { createRenderer } from 'fela';
import Header from './main/Header';
import Content from './main/Content';
import Footer from './main/Footer';
class Main extends React.Component {
render() {
return (
<div className="main">
<Header />
<Content />
<Footer />
</div>
);
}
}
export default Main;
Try to remove
package-lock.json
, run
npm install
and then
npm run
start again.
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
I keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
When I import:
import {ReactComponent as Name} from '../assets/name.svg';
I get the error, but when I do:
import test from '../assets/name.svg';
The error goes away.
I've installed the react-polyfills and have imported them at the top of index.js:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React, {Component} from 'react';
import Particle from '../Particle/particle';
import {ReactComponent as Name} from '../assets/name.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
// componentDidMount() {
// console.log(this.state.points);
// }
render() {
return (
<React.Fragment>
<Particle />
<div className="name">
{/* <Name/> */}
</div>
</React.Fragment>
);
}
}
export default App;
It should be showing the svg Edge, but I get the error. When i uncomment the component, the page doesn't even load, but works in other browsers
When I import reactive search from the following module:
import {ReactiveBase} from "#appbaseio/reactivesearch";
It keeps showing me the following error:
./node_modules/#appbaseio/reactivecore/lib/actions/query.js
Module not found: Can't resolve '../../../../node_modules/#appbaseio/reactivecore/src/actions/maps' in '/Users/mattewlee/Desktop/CS/Swallaby/walkon-map-website/node_modules/#appbaseio/reactivecore/lib/actions'
Well, for sure, I have installed for sure with "npm install #appbaseio/reactivesearch "
But this doesn't seem to work. Thank you for your answer in advance.
This is the following code of
my App.js:
import React, { Component } from 'react';
import './App.css';
import {ReactiveBase} from "#appbaseio/reactivesearch";
class App extends Component {
render() {
return (
<section className="container">
<ReactiveBase
app="my_housing"
credentials="myapikey"
type="listing"
>
Hello from ReactiveSearch!
</ReactiveBase>
</section>
);
}
}
export default App;
React fails to some weird error when importing another component. If I remove ChristmasMap references in App.js then app works fine. But I want to import the ChristmasMap. Any help?
App.js
import React, { Component } from 'react';
import './ChristmasMap';
class App extends Component {
render() {
return (
<div>
<p>asd</p>
<ChristmasMap />
</div>
);
}
}
export default App;
ChristmasMap.js
import React, { Component } from 'react';
class ChristmasMap extends Component {
render(){
return (
<div>
component
</div>
);
}
};
export default ChristmasMap;
And the error I'm getting is App.js:56 Uncaught ReferenceError: ChristmasMap is not defined(…)
You should do:
import ChristmasMap from './ChristmasMap'