I tried to add a scss style to my "Logo.js" component, and yet and can't manage to fix this error I keep getting:
ERROR in ./src/components/Logo/Logo.js 5:0-19
Module not found: Error: Can't resolve 'logo.scss' in '/Users/antonov/Project/HorlogeV2/src/components/Logo'
Here is my component:
import "logo.scss";
class Logo extends Component {
render() {
return (
<div className="logo">
<img alt="Logo failed 2 load" src='./Images/Soldierboi.jpeg'/>
</div>
)
}
}
export default Logo;
import "logo.scss" would look inside node_modules folder. Assuming logo.scss is in the same folder as Logo component, you should import it like this:
import "./logo.scss";
Related
I have the following component:
import React from 'react';
import {
Header
} from 'semantic-ui-react';
import SummaryTable from '../SummaryTable/SummaryTable';
import SummaryFilters from '../SummaryFilters/SummaryFilters';
function TabSummary() {
return (
<>
<Header as="h2">
Blah blah
</Header>
<SummaryFilters />
<SummaryTable />
</>
);
}
export default TabSummary;
How can I write a test for this component to check if the SummaryFilter component exists. SummaryFilter is a connected/smart component and the following test:
it('should display <SummaryFilters /> when page is first loaded', () => {
console.log(wrapper.debug());
expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();
});
throws the following error:
Invariant Violation: Could not find "store" in the context of "Connect(SummaryFilters)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(SummaryFilters) in connect options.
What do I need to add/change to run this test successfully?
Appreciate any guidance
Changing expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();
to:
expect(wrapper.find('Connect(SummaryFilters)').exists()).toBeTruthy();
resolved the error and made the test work as expected.
The project structure of my app is:-
root
|-assets
|-icons
|-heart.png
|-components
|-basic
|-like.js
What i'm trying to achieve is to import image heart.png into like.js which contains following code:-
import React,{ Component } from 'react';
import{ View, Text, AppRegistry } from 'react-native';
class Example extends Component {
render ()
{
return(
<Image src= {require('./assets/icons/heart.png')} />
);
}}
export default Example;
It produces following error:-
ENOENT: no such file or directory, scandir 'C:\Users\gagan\sapora\android\sapora\components\basic\assets\icons'
use source instead of using src
render ()
{
return(
<Image source = {require('../assets/icons/heart.png')} />
);
}
see here https://facebook.github.io/react-native/docs/image
I create a simple react/electron project with "electron-forge" plugin : electron-forge init myProject --template=react. I try to import my css file with this code below
Button.module.css
.error {
color: red;
}
app.jsx - created by electron-forge:
import React from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
export default class App extends React.Component {
render() {
return (
<div>
<h1>Hello world</h1>
<button className={styles.error}>Error Button</button>
</div>
)
}
}
It throws an error:
Uncaught Error: Couldn't find a compiler for /home/denny/Experimentals/electron-transactionsell/src/Button.module.css
I'm pretty sure I have the file in the correct folder
and I am sure that this is how it's done in React
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
I have below code structure,
and my src/components/App.js look like this
import React, { Component } from 'react'
import { max_number } from '../helper'
class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
As you can see helper folder is the same level as components, but somehow I got error of Module not found: Can't resolve '../helper' in '/Users/james/Documents/react-demo/src/components'
helper.js is a directory you need to import from '../helper.js'
preferably rename the folder to helper
I am learning meteor framework for the first time today. I installed react react-dom and react-mounter through npm instead of atmospherejs.I am facing a problem that says Cannot find module '../../client/components/layouts/home.jsx'. I dont think there is error in path.Because my routing.jsx is inside routing directory that is inside lib directory and home.jsx is inside layouts directory which is inside components subdirectory of client directory.
lib - routing - routes.jsx
client - components - layouts - home.jsx
routes.jsx
import React from 'react';
import {mount} from 'react-mounter';
import HomeLayout from '../../client/components/layouts/home.jsx';
import Layout from '../../client/components/layouts/layout.jsx';
publicRoutes = FlowRouter.group({
name:'publicroutes'
});
privateRoutes = FlowRouter.group({
name:'privateroutes'
});
publicRoutes.route('/',{
name:'Home',
action(){
mount(
HomeLayout, {}
)
}
});
publicRoutes.route('/dashboard',{
name:'Dashboard',
action(){
mount(Layout,{
sidebar:<div>Sidebar</div>,
content:<div>Content</div>
})
}
});
home.jsx
import React, { Component } from 'react';
export default class HomeLayout extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-md-6">
Features
</div>
<div className="col-md-6 col-md-offset-1">
Signup
</div>
</div>
</div>
);
}
}
What might be the reason?