Using experimental.externalDir in NextJS prevents the use of absolute imports in external libraries

Question

Using experimental.externalDir in NextJS prevents the use of absolute imports in external libraries

In my monorepo setup with nextjs, lerna, and npm workspaces, the folder structure is as follows:

packages
    next-js-app
        pages
            index.tsx
        tsconfig.json
    ui-library
        src
            components
                 dropdown.tsx
            index.ts
            utils.ts
        tsconfig.json
package.json
lerna.json
tsconfig.json

I am trying to import the ui-library into the next-js-app like this:

// packages/next-js-app/pages/index.tsx
import { UiLibrary } from '@workspaceName/ui-library'

To achieve this, I added externalDir: true under the experimental key in the next.config.js within the next-js-app:

module.exports = {
  ...
  experimental: {
    externalDir: true
  }
  ...
}

Issue

The import works fine, but in the file

packages/ui-library/src/components/dropdown.tsx

, there is a line:

// packages/ui-library/src/components/dropdown.tsx
import { helperFunction } from 'utils'

This means I am trying to import helperFunction from packages/ui-library/src/utils.ts. When I run the next dev script from packages/next-js-app, I encounter the following error:

wait  - compiling...
error - ../ui-library/src/components/dropdown.tsx:3:0
Module not found: Can't resolve 'utils'
  1 | ...
  2 | ...
> 3 | import { helperFunction } from "utils"
  4 | 
  5 | const Dropdown = () => {
  6 |   const onClick = (event) => {

However, running the ui-library separately allows the use of absolute paths in imports without any issues.

Query

How can I resolve the issue of absolute imports in this scenario?

javascript npm webpack next.js lerna

Answer 1

Answer №1

To resolve the issue in my situation, I made modifications to my webpack configuration by setting up aliases in my next.config.js file.

module.exports = {
 ...
 experimental: {
   externalDir: true
 }
 config.resolve = {
  ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'utilities': path.resolve('../../packages/ui-library/src/utilities'),
      // ^ Specified all necessary paths for my external UI library here
    },
  }
}

Answer 2

To resolve the issue in my situation, I made modifications to my webpack configuration by setting up aliases in my next.config.js file.

module.exports = {
 ...
 experimental: {
   externalDir: true
 }
 config.resolve = {
  ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'utilities': path.resolve('../../packages/ui-library/src/utilities'),
      // ^ Specified all necessary paths for my external UI library here
    },
  }
}

Using experimental.externalDir in NextJS prevents the use of absolute imports in external libraries

Issue

Query

Answer №1

Similar questions

Issue with AngularJS directives - encountering a problem with the property 'compile' being undefined

Animating a JQuery Slider using code from scratch

Compelled to install npm modules manually against my will

Transform the words in a string into an array

Guide to utilizing $refs effectively in Vue.js templates

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

How do I retrieve the value of a class that is repeated multiple times?

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

Tips on changing the name of a property within an object using JavaScript

When an iteration occurs within a for loop and a value changes, remember to incorporate a line break or equivalent element using jQuery

Display a loading spinner in React Native while loading screens

Utilizing React componentDidUpdate for merging and appending data

Guide to generating a div element with its contents using JSON

Is there a reason for the absence of the Revit category attribute in the JSON response retrieved from the GET request :urn/metadata/:guid/

Launching a React Native application on a fresh machine

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

Tips for refreshing a TinyMCE instance after modifying its settings

Illustrate a sphere within the canvas

Using React Native - Issue occurs when tapping a row within a ListView: Property `_pressRow` cannot be read as it is null

What is the best way to attach information to a chart prior to the jquery dialog box appearing?