The create-react-app imports restriction outside of src directory

The create-react-app imports restriction outside of src directory

If you have been working with create-react-app, you may have encountered the restriction on importing files or modules from outside the src directory. This limitation is in place to enforce a clear separation between the application code and other files, such as configuration files or server-side code. However, there are a few workarounds you can use to import files from outside the src directory.

1. Using an Alias

One way to import files from outside the src directory is by using an alias. This involves configuring your project to recognize a specific path as an alias for a directory outside src. Here’s how you can set up an alias using the react-app-rewired package:

npm install react-app-rewired --save-dev

Once installed, create a config-overrides.js file in the root of your project with the following content:

const path = require('path');

module.exports = function override(config) {
  config.resolve.alias['@utils'] = path.join(__dirname, '../utils');
  return config;
};

In this example, we are creating an alias @utils that points to a directory named utils located outside the src directory. You can customize the alias and the directory path according to your project’s structure.
After setting up the alias, you can import files from the specified directory using the alias:

import { someUtilFunction } from '@utils/utils';

2. Moving Files to the src Directory

If you prefer to keep your files within the src directory, you can simply move the required files or modules to a subdirectory within src. This way, you can import them without any restrictions. For example, if you have a file named myUtil.js located outside the src directory, you can move it to a new directory called utils within src:

src
  ├── utils
  │   └── myUtil.js
  └── App.js

Now, you can import the file as usual:

import { someUtilFunction } from './utils/myUtil';

3. Ejecting from create-react-app

If the above solutions do not meet your requirements, you can consider ejecting from create-react-app. Ejecting allows you to customize the configuration and build setup of your project, giving you more flexibility. However, keep in mind that ejecting is a one-way operation and cannot be undone easily.
To eject from create-react-app, run the following command:

npm run eject

After ejecting, you will have access to the configuration files, such as webpack.config.js, where you can modify the import restrictions or configure additional paths.
It’s important to note that ejecting should be considered as a last resort, as it adds complexity and requires manual maintenance of the configuration files.
These are a few solutions to overcome the create-react-app imports restriction outside of the src directory. Choose the one that best suits your project’s needs and maintain a clear separation between your application code and other files.