Next.js Discord

Discord Forum

NextJS Monorepo Shared Directory

Answered
Harlequin posted this in #help-forum
Open in Discord
HarlequinOP
I have created a monorepo and within it i have a core (shared) directory and a nextjs directory. My nextjs directory cant access or recognize the core directory (anything above the current directory and subs under).

The pathing is correct, all my core imports in my nextJs directory lead to the correct file. I feel like I've tried most online solutions but it seems stuck on not recognizing core. Is there something obvious I'm missing?
Answered by Harlequin
I was able to resolve it by turning off turbo for npm run dev and adding this to my next.config.js

/** @type {import('next').NextConfig} */

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      core: path.resolve(__dirname, '../core'),
    };
    return config;
  },
};


Doesn't seem ideal but it works
View full answer

2 Replies

HarlequinOP
my tsconfig.json inside my nextjs directory

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es5",
    "baseUrl": ".",
    "paths": {
      "frontend/*": ["./*"],
      "core/*": ["../core/*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next-env.d.ts"],
  "exclude": ["node_modules"]
}


My root tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "core/*": ["./core/*"],
      "frontend/*": ["./frontend/*"]
    }
  }
}
HarlequinOP
I was able to resolve it by turning off turbo for npm run dev and adding this to my next.config.js

/** @type {import('next').NextConfig} */

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      core: path.resolve(__dirname, '../core'),
    };
    return config;
  },
};


Doesn't seem ideal but it works
Answer