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

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

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 (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;