Enable component import from parent directories

It seems create-react-app@0.2.0 has problems importing modules from parent directories.

If I add a Hello component to the default generated app everything works as expected:

// src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './Hello';

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>
        <Hello name="World"/>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

// src/Hello.js
import React from 'react';

const Hello = ({name}) => <p>Hello {name}!</p>

export default Hello;

But when I move Hello.js to the parent directory and point the import to it, it doesn’t work anymore:

// src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from '../Hello';

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>
        <Hello name="World"/>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

// Hello.js
import React from 'react';

const Hello = ({name}) => <p>Hello {name}!</p>

export default Hello;

Instead I get the following error:

Error in ./Hello.js
Module parse failed: /private/tmp/test/component-example/Hello.js Unexpected token (3:26)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (3:26)
 @ ./src/App.js 19:13-32

I would want to find a solution to use react-scripts in a subfolder (for devcards like component development) of a larger existing project. The react-script under the devcards subfolder would use the components from the main project (parent directory).

[gaearon]

Please see the README that should be generated in your project:

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, or Webpack won’t see them.

We should add a warning for that…

[chrisbianca]

It would be nice to be able to customise this if possible. Not sure how easy that would be, but at the moment if you have a couple of apps that want to share some components it’s not possible without creating proper modules for them.

If somebody points me in the right direction, I’m happy to submit a pull request assuming that you decide it’s a worthwhile change to make.