How can I read files outside src?

Question

I understand that in react you cannot import files outside src folder. But what is the reason for it exactly and can I disable it?

In my project react web app is only part of the whole thing, and different parts share some files (configs, build output), so folder structure looks like this

ProjectRoot/
    config
    build-output/
    Part1/
    Part2/
    WebApp/
        src/
...

Sure, you can copy files or create symlinks, but that's duplication and inconvenient.

Answer 1

This is a restriction of Create React App only.

This tool exists to get new users up and running with the react framework as fast as possible by abstracting away the tooling. The part of tooling that is limiting you in this instance is their webpack configuration, which is preset to only look for javascript files in your src directory.

That explains the why? but to answer the other half of your question:

how can I disable it?

Is that you would need to eject from Create React App and then modify your webpack config to allow it to search directories other than src/

Answer 2

First - this has nothing to do with react itself.

If you refer to importing javascript modules (for now using module loaders like systemjs, require, etc.) then the answer is:

It depends what directory is being served by web server. If you have set up your web server to serve WebApp/src folder only - then no, browser will not be able to get access to the files outside and so module loaders. If you will serve all ProjectRoot directory - then yes, you can.

If you prepare your web application for deployment using some sort of bundlers (webpack, browserify) - it depends on how you will configure them and instruct to include the required files in the resulting bundle.