Can't use absolute imports in other next.js package

[gabsdotco]

I'm migrating my current project to a monorepository, and in this monorepo I've two packages: the main one and another app that import some modules from the main application. Both being next.js application

Packages structure:

• packages/
  • application
  • deployments

When working with the old structure, the absolute path imports works fine. But now, with the new packages structure I'm facing some import problems. For me looks like the main application can't handle the application package absolute imports when the imports are made from a external folder.

Module import problem:

@gstudio/deployments: Module not found: Can't resolve 'lib/defaultTheme'
@gstudio/deployments:   13 | import { theme as chakraDefaultTheme } from '@chakra-ui/react';
@gstudio/deployments:   14 | import { cloneDeep, get, mapValues, set } from 'lodash';
@gstudio/deployments: > 15 | import { defaultTheme } from 'lib/defaultTheme';
@gstudio/deployments:   16 | import { mapValuesDeep } from 'lib/helpers';
@gstudio/deployments:   17 | export { NextFontLoader } from './NextFontLoader';
@gstudio/deployments:   18 | export var customTheme = function customTheme(themeBlock) {
@gstudio/deployments: Import trace for requested module:
@gstudio/deployments: ./../application/src/theme/theme.tsx
@gstudio/deployments: ./../application/src/theme/index.ts
@gstudio/deployments: ./src/pages/_app.tsx
@gstudio/deployments: https://nextjs.org/docs/messages/module-not-found

Where the import occurs:

import React from 'react';

import { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider as ReduxProvider } from 'react-redux';

import { store } from '@gstudio/application/src/state/store';
import theme from '@gstudio/application/src/theme';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ReduxProvider store={store}>
      <ChakraProvider theme={theme}>
        <Component {...pageProps} />
      </ChakraProvider>
    </ReduxProvider>
  );
}

Packages tsconfig if necessary:

tsconfig.base.json

{
  "include": ["packages/*/src"],
  "compilerOptions": {
    "jsx": "preserve",
    "declaration": true,
    "skipLibCheck": true,
    "declarationMap": true,
    "paths": {
      "@gstudio/*": ["packages/*/src"]
    }
  }
}

application/tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "strict": false,
    "noEmit": true,
    "module": "esnext",
    "allowJs": true,
    "baseUrl": "./",
    "sourceMap": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": false,
    "lib": ["dom", "dom.iterable", "esnext"],
    "paths": {
      "*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "build", ".next", "lambda"],
  "include": ["next-env.d.ts", "types/**/*.d.ts", "**/*.ts", "**/*.tsx", "src/**/*"]
}

deployments/tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "strict": false,
    "noEmit": true,
    "module": "esnext",
    "allowJs": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "paths": {
      "*": ["./src/*"],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "../application/**/*.ts",
    "../application/**/*.tsx",
    "../application/src/**/*.ts",
    "../application/src/**/*.tsx"
  ],
  "exclude": ["node_modules", "build", ".next", "lambda", "/**/__tests__/**", "/**/__stories__/**"]
}

Any ideas?

[gabsdotco]

For me apparently the deployments package can't resolve the application package internal absolute paths imports. It's a problem only with the deployments package, when I run the application package everything works fine.

[gabsdotco]

Solved it for the moment adding the application package src to the deployments absolute paths like that:

"paths": {
  "*": ["./src/*", "../application/src/*"]
}

[Kurre]

If I understood your issue correctly, it might be caused by the extended configuration and it's paths entry. Since your application/tsconfig.json and deployments/tsconfig.json are extending tsconfig.base.json, those compilerOptions are considered as overrides and paths entries aren't merged, the paths entry from tsconfig.base.json is simply overridden by the one from the extending configuration.

So by moving/adding the "@gstudio/*": ["packages/*/src"] to both of the tsconfig.json files might help. I would also drop the ../application/.... paths from include, AFAIK they shouldn't be needed in this situation.

I've been struggling with similar issue lately, and after finding out that paths entries aren't merged in anyway, I managed to solve most of the problems.

[eivindml]

I've run into the same issue. Is there a proper solution for this?