This article is about fixing Inconsistent
  • 06-Feb-2023
Lightrun Team
Author Lightrun Team
This article is about fixing Inconsistent

Inconsistent “Relative imports outside of src/” restriction in Facebook Create React App

Lightrun Team
Lightrun Team

Explanation of the problem

The issue is related to the import of a private package in a project that uses both Babel and Sass. The private package includes a component and its associated styles written in Sass. The component can be imported without issue when importing the JavaScript file, but when the Sass file is imported from the main project, an error is thrown.

Steps to Reproduce: The following steps outline the issue. In the private package, the component and its styles are defined as follows:

// src/component/module.js
import '../styles/module.scss';

// src/styles/module.scss
.module {
    background: url('../images/module.jpg');

In the main project, when the component is imported from the JavaScript file, it works fine:

// src/index.js
import '@my/module/dist/component/module.js';

However, when the same component is imported from the main project’s Sass file, an error is thrown:

// src/main.scss
@import '@my/module/dist/styles/module.scss';
Error: Module not found: You attempted to import ../images/module.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Expected Behavior: The expected behavior is for both the import from JavaScript and the import from Sass to either succeed or fail. The author would like to be able to import other packages’ components and Sass files to split the project.

Actual Behavior: The actual behavior is that the import from Sass is failing, but the import from JavaScript is successful.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Inconsistent “Relative imports outside of src/” restriction in Facebook Create React App

The “Relative imports outside of src/” restriction in Facebook Create React App can be resolved by modifying the "modulePaths" property in the "resolve.alias" configuration in the webpack configuration file. By adding the path to the private package, it becomes possible to import the Sass files without encountering the error.

Here’s an example of the webpack configuration file with the updated "modulePaths" property:

const path = require('path');

module.exports = {
  // ... other webpack configurations ...
  resolve: {
    alias: {
      '@my/module': path.resolve(__dirname, './node_modules/@my/module')
    modules: ['node_modules', path.resolve(__dirname, './node_modules/@my/module/src')],
    modulePaths: ['node_modules', path.resolve(__dirname, './src')]

With these changes, it should now be possible to import the private package’s Sass files without encountering the “Relative imports outside of src/” restriction.

Other popular problems with Facebook Create React App

Problem: Ejected Create React App Without Proper Understanding

When developers eject Create React App (CRA), it means they are no longer using the default configuration provided by CRA, instead they have complete control over the build configuration. But often developers eject without fully understanding the implications and end up facing build issues.


It’s always advisable to thoroughly understand the consequences of ejecting before proceeding with it. If a developer has already ejected, they should go through the configuration files thoroughly and understand each section. Alternatively, they can try re-creating the app using a different starter kit that offers the required configuration.

Problem: Inconsistent Dependency Versions

A common issue faced by developers using Create React App is inconsistent dependency versions. The app may work fine locally but break in production due to a different version of a dependency being used.


To resolve this, it’s important to keep track of the dependencies used in the project and ensure that they are consistent across development, testing and production environments. One way to achieve this is by using a package manager like Yarn that supports versioning and lockfiles. Additionally, using tools like npm-check can help to identify and resolve version inconsistencies.

Problem: Incorrect Webpack Configuration

Create React App uses Webpack to bundle assets and dependencies. If the Webpack configuration is incorrect, it can lead to issues such as missing files or broken builds.


To resolve this, developers should have a thorough understanding of Webpack and its configuration. They can refer to the official Webpack documentation and the Create React App documentation to resolve the issue. Alternatively, they can try using a different starter kit that provides a more suitable Webpack configuration.

A brief introduction to Facebook Create React App

Facebook Create React App (CRA) is a popular starter kit for building single-page applications (SPAs) using React.js, a JavaScript library for building user interfaces. It provides a default configuration for building and running React applications, allowing developers to focus on writing code without worrying about setting up a build environment. CRA takes care of the build setup, including Webpack, Babel, and other build dependencies, so that developers can jump right into coding their React components.

CRA uses Webpack, a powerful asset bundler, to compile and bundle all the assets and dependencies required for the React application. It also includes Babel, a JavaScript compiler, to transpile modern JavaScript syntax into code that can be run by older browsers. CRA also includes hot reloading, which allows developers to make changes to their code and see the updated output in real-time, without having to refresh the browser. Additionally, it provides a lightweight development server for serving the React application during development, as well as a production build for deploying the application to a production environment.

Most popular use cases for Facebook Create React App

  1. Building Single-Page Applications: Facebook Create React App can be used to build single-page applications (SPAs) using React.js. The setup and configuration provided by CRA make it easy to get started with building React components and tying them together to form a complete SPA.
  2. Streamlining Development Workflow: CRA streamlines the development workflow by taking care of build setup and configuration. This allows developers to focus on writing code and improving the application’s features, without having to worry about setting up a build environment.
  3. Transpiling Modern JavaScript Syntax: CRA includes Babel, a JavaScript compiler, which allows developers to use modern JavaScript syntax, such as ES6 and ES7, in their React components. Babel transpiles the code into code that can be run by older browsers. Here’s an example of using an arrow function in a React component with CRA:
import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  return (
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>

export default App;

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.