Enable component import from parent directories

[pe3]

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..

[gaearon]

So if you put those subfolders under src they should work fine.

[pe3]

Ok. Thanks. I had not noticed that explanation. We can close this issue.

For the devcards use case I had in mind I can't permanently move the code but this is not a big problem. I may still try to fix it in the shell or use something else.

[gaearon]

Curious, what is the reason you can’t use src for this?

[pe3]

I have an existing project and build scripts and would want to - at this point - only introduce react-scripts to a subfolder isolated from the rest of the project. The situation is like this:

package.json (existing project root)
client/main.js
client/components/
server/main.js
devcards/package.json (react-scripts root)
devcards/src/App.js

But it's really not a big deal. I wrote the issue because I thought the handling of parent directories was not on purpose. I've been lately on Browserify and there ../../abcd imports have worked.

[gaearon]

OK, let’s keep it open for now. We might allow this in the future if this doesn’t cause extra directories to accidentally get watched etc. Need to investigate this.

[gaearon]

For now we’ll stick with src meaning “folder where JS gets processed by Babel”.

[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.