I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.

My 'src' folder structure is like this:

scr/
...ponents/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES

In App.js I have this:

import React, { Component } from 'react';
import ComponentA from './ponents/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentA />
      </div>
    );
  }
}

export default App;

In ComponentA I have this:

import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './ponents/ComponentB';

class ComponentA extends Component {
  render() {
    return (
      <div className="ponentAStyle">
        <ComponentB />
      </div>
    );
  }
}

export default ComponentA;

In ComponentB I have this:

import React, { Component } from 'react';

class ComponentB extends Component {
  render() {
    return (
      <div>
        <h1>Hello from ComponentB</h1>
      </div>
    );
  }
}

export default ComponentB;

What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:

Failed to pile
./src/ponents/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\ponents'
This error occurred during the build time and cannot be dismissed.

And if I remove the css import there is another error message:

Failed to pile
./src/ponents/ComponentA.jsx
Module not found: Can't resolve './ponents/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\ponents'
This error occurred during the build time and cannot be dismissed.

How can I import another ponent from another ponent and its respective css?

Thanks.

I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.

My 'src' folder structure is like this:

scr/
....ponents/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES

In App.js I have this:

import React, { Component } from 'react';
import ComponentA from './ponents/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentA />
      </div>
    );
  }
}

export default App;

In ComponentA I have this:

import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './ponents/ComponentB';

class ComponentA extends Component {
  render() {
    return (
      <div className="ponentAStyle">
        <ComponentB />
      </div>
    );
  }
}

export default ComponentA;

In ComponentB I have this:

import React, { Component } from 'react';

class ComponentB extends Component {
  render() {
    return (
      <div>
        <h1>Hello from ComponentB</h1>
      </div>
    );
  }
}

export default ComponentB;

What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:

Failed to pile
./src/ponents/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\ponents'
This error occurred during the build time and cannot be dismissed.

And if I remove the css import there is another error message:

Failed to pile
./src/ponents/ComponentA.jsx
Module not found: Can't resolve './ponents/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\ponents'
This error occurred during the build time and cannot be dismissed.

How can I import another ponent from another ponent and its respective css?

Thanks.

• javascript
• reactjs
• create-react-app

1 Answer 1

You need to make the paths you are importing are relative to the current location of the file doing the import.

The correct imports would be

 Component A

import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';

You can see this working at https://glitch./edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)

Currently what is happening with your error is

import ComponentB from './ponents/ComponentB';

is is looking in the path

src/ponents/ponents/ComponentB

which does not exist and so gives you an error. Same thing is happening with your styles.

Hope this helps.