Home

   |

|  Error: Not allowed to import outside of the src directory in Next.js: Causes and How to Fix

Error: Not allowed to import outside of the src directory in Next.js: Causes and How to Fix

February 10, 2025

Discover why you're encountering the "Not allowed to import outside of the src directory" error in Next.js and learn the steps to effectively resolve it.

What is Error: Not allowed to import outside of the src directory in Next.js

 

Error: Not Allowed to Import Outside of the src Directory in Next.js

 

This error typically arises in a Next.js project configuration when there's a restriction on module imports, specifically surrounding the constraints of importing components, modules, or functions from outside the designated src directory. This issue is relevant when you're organizing a larger codebase that needs to enforce a strict boundary for where source files can reside and from where they can be imported.

 

Project Structure Challenges

 

  • There can be complications with project structure where files or modules intended for import are placed outside the `src` directory, leading to this error.

    •  

  • Developers might face difficulties when attempting to reuse code that naturally resides or is shared across different parts of an organization's codebase that doesn't conform to the Next.js `src` limitation.

 

Use Cases and Concerns

 

  • Modular design practices encourage the separation of code into modules, which many developers place outside the core `src` directory to be shared across multiple projects.

    •  

  • If your architecture is designed with shared libraries, these libraries might reside outside of the `src` directory, which conflicts with Next.js best practices when the restriction is applied.

    •  

  • Cross-boundary imports could potentially introduce code from environments that Next.js can't optimize during the build process, which can, in turn, impact performance.

 

Benefits of Restriction

 

  • Maintaining imports within the `src` directory ensures better control of the codebase layout, which leads to fewer architectural conflicts and confusion over file responsibility.

    •  

  • It enforces a stricter dependency hierarchy, making it easier to manage and optimize build processes that benefit from predictable pointers to all utilized code.

 

Sample Code Illustrating the Error

 

If you attempt to import a module from outside the src directory, the following code could trigger an error:

// Attempted import from a directory above src
import helperFunction from '../external-directory/utils';

In the above example, external-directory is outside the path of your project's src directory, hence triggering the restriction.

 

Conclusion

 

Understanding why this error occurs is an essential part of adapting to Next.js and the paradigms it enforces for optimal performance and maintainability. Keeping a well-structured project is crucial, and the src directory plays a key role in that by segregating code and resources that are intended to form part of the built and deployed web application.

What Causes Error: Not allowed to import outside of the src directory in Next.js

 

Causes of "Not allowed to import outside of the src directory in Next.js"

 

  • **Default Configuration**: Next.js, by default, has a restriction in place that limits module imports to only occur within the `src` directory or its subdirectories. This is part of its opinionated design to encourage a standardized project structure, which aligns with best practices, especially in larger applications. When you try to import a module, say from a utility folder located outside of this `src` directory like `import someUtil from '../../utility/someUtil';`, an error will surface because you are stepping outside the prescribed directory could possibly lead to issues such as tangled dependency paths or poor maintainability.

    •  

  • **Security Concerns**: Restricting imports to within the `src` directory helps mitigate certain security concerns. Allowing imports from arbitrary directories can expose sensitive files or allow unintended data leakage, especially when scripts exist that weren't intended to be exposed or compiled into the build process.

    •  

  • **Module Resolution Path**: Next.js uses a module resolution process that is impacted by the overall directory structure. When deviating from the `src` directory, Next.js can't assure that the paths are resolved correctly or consistently, possibly leading to runtime errors or module not found errors. This can get illustrated when a simple operation like `import config from '../../config';` might fail if `config` is outside the allowed path.

    •  

  • **Build Optimization Limitations**: The Next.js build system is optimized to perform particular transformations and optimizations to code only within the `src` directory. If you attempt to import from outside this structure, it could disrupt the build toolchain, resulting in slower builds or inefficient bundles as optimizations might not fully apply to outlying scripts.

    •  

 

Omi Necklace

The #1 Open Source AI necklace: Experiment with how you capture and manage conversations.

Build and test with your own Omi Dev Kit 2.

How to Fix Error: Not allowed to import outside of the src directory in Next.js

 

Modify the Next.js Configuration

 

  • Edit the `next.config.js` file located in the root of your project. Add or modify the `webpack` function property, setting the necessary module resolution paths to allow imports from outside `src` directory.

 

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.modules.push(path.resolve('./'));
    return config;
  },
};

 

Restructure Your Project

 

  • Reorganize your project files to ensure that all imports come from within the `src` directory. This involves moving files and directories to align with the `src` structure.

    •  

  • If you have utilities, components, stylesheets, etc., outside of `src`, consider placing them inside appropriate subdirectories within `src`.

 

Utilize Module Imports

 

  • For packages or files located outside the `src`, consider using absolute imports or module aliasing. Adjust your `tsconfig.json` or `jsconfig.json` if needed to enable this feature.

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}

 

Check for Custom ESLint Rules

 

  • Review any custom ESLint rules that might be enforcing directory boundaries. Update these rules to allow exceptions or to suit your desired directory structure.

 

{
  "rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": ["./src/", "./"]
      }
    ]
  }
}

 

Omi App

Fully Open-Source AI wearable app: build and use reminders, meeting summaries, task suggestions and more. All in one simple app.

Github →

Order Friend Dev Kit

Open-source AI wearable
Build using the power of recall

Order Now

Join the #1 open-source AI wearable community

Build faster and better with 3900+ community members on Omi Discord

Participate in hackathons to expand the Omi platform and win prizes

Participate in hackathons to expand the Omi platform and win prizes

Get cash bounties, free Omi devices and priority access by taking part in community activities

Join our Discord → 

OMI NECKLACE + OMI APP
First & only open-source AI wearable platform
a person looks into the phone with an app for AI Necklace, looking at notes Friend AI Wearable recorded a person looks into the phone with an app for AI Necklace, looking at notes Friend AI Wearable recorded
a person looks into the phone with an app for AI Necklace, looking at notes Friend AI Wearable recorded a person looks into the phone with an app for AI Necklace, looking at notes Friend AI Wearable recorded
online meeting with AI Wearable, showcasing how it works and helps online meeting with AI Wearable, showcasing how it works and helps
online meeting with AI Wearable, showcasing how it works and helps online meeting with AI Wearable, showcasing how it works and helps
App for Friend AI Necklace, showing notes and topics AI Necklace recorded App for Friend AI Necklace, showing notes and topics AI Necklace recorded
App for Friend AI Necklace, showing notes and topics AI Necklace recorded App for Friend AI Necklace, showing notes and topics AI Necklace recorded

OMI NECKLACE: DEV KIT
Order your Omi Dev Kit 2 now and create your use cases

Omi Dev Kit 2

Endless customization

OMI DEV KIT 2

$69.99

Speak, Transcribe, Summarize conversations with an omi AI necklace. It gives you action items, personalized feedback and becomes your second brain to discuss your thoughts and feelings. Available on iOS and Android.

  • Real-time conversation transcription and processing.
  • Action items, summaries and memories
  • Thousands of community apps to make use of your Omi Persona and conversations.

Learn more

Omi Dev Kit 2: build at a new level

Key Specs

OMI DEV KIT

OMI DEV KIT 2

Microphone

Yes

Yes

Battery

4 days (250mAH)

2 days (250mAH)

On-board memory (works without phone)

No

Yes

Speaker

No

Yes

Programmable button

No

Yes

Estimated Delivery 

-

1 week

What people say

“Helping with MEMORY,

COMMUNICATION

with business/life partner,

capturing IDEAS, and solving for

a hearing CHALLENGE."

Nathan Sudds

“I wish I had this device

last summer

to RECORD

A CONVERSATION."

Chris Y.

“Fixed my ADHD and

helped me stay

organized."

David Nigh

OMI NECKLACE: DEV KIT
Take your brain to the next level

LATEST NEWS
Follow and be first in the know

Latest news
FOLLOW AND BE FIRST IN THE KNOW

thought to action.

Based Hardware Inc.
81 Lafayette St, San Francisco, CA 94103
team@basedhardware.com / help@omi.me

Company

Careers

Invest

Privacy

Events

Manifesto

Compliance

Products

Omi

Wrist Band

Omi Apps

omi Dev Kit

omiGPT

Personas

Omi Glass

Resources

Apps

Bounties

Affiliate

Docs

GitHub

Help Center

Feedback

Enterprise

Ambassadors

Resellers

© 2025 Based Hardware. All rights reserved.