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;
Related
I have created a app with create-react-app. But, I cant see why its keeps saying ./src/App.js
Module not found: Can't resolve './components/home/home' in ...
My project structure is:
Code for the app.js
import React from 'react';
import Home from './components/home/home';
function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;
home.js
import React, { Component } from 'react';
class Home extends Component {
state = {
text: "Lorem",
}
render() {
return (
<div>
<div className="container">{this.state.text}
</div>
</div>
)
}
}
export default Home;
I have imported components in previous projects the same way? and it's worked fine.
So I used npx create-react-app to create this app. Looks like its something to do with that. Because when I used npm -g create-react-app and then create-react-app my-app its working fine.
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';
I'm quite new to React and after trying for some long hours I haven't been able to add a component inside the main app js
I created my boilerplate with create-react-app
In the main app.js I have:
import React, {Component} from 'react';
// import logo from './logo.svg';
import casa_mini from './casa_mini';
import './App.css';
class App extends Component {
render() {
return (<casa_mini></casa_mini> );
}
}
export default App;
And in the casa_mini.js I have:
import React, {Component} from 'react';
class casa_mini extends Component {
render() {
return (
<div className="listing-box">
<div className="listing-box-image" style={{backgroundImage: 'url("assets/img/casa1.jpg")'}}>
</div>
</div>
);
}
}
export default casa_mini;
Why its not rendering anything? the HTML of casa_mini doesn't appear.. blank page.. Thanks for the help!
Thanks for some fast answers.. the problem is the capital letter of the component..
index.js: Warning: The tag <casa_mini> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
It should be capitalized!
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.
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'