Next.js. How to import a module from the folder outside of the project?

Question

I have the Next.js app and I'm wondering about a possible way to be able to import some modules that locate in the folder outside of the project.

next.js project folder

• /web/projects/nextjs-awesome-project
  

and the folder where located the module I want to import into the next.js project

• /web/utilities/common

To do it I added into the env.local file the path

UTILITY_LOCAL_PATH=E:/web/utilities/common

and in the next.config.js I added the import alias with the include rule (to include the utility folder into the bundle)

const localUtilityPath = process.env.UTILITY_LOCAL_PATH;
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // the alias
      'UTILITY_LOCAL': path.resolve(localUtilityPath),
    };

    if (localUtilityPath) {
      // The include rule
      config.module.rules[1].include.push(path.resolve(`${localUtilityPath}/common`))
    }

    return config
  },

But next.js throws an error:

Module not found: Can't resolve 'UTILITY_LOCAL/common/matrix-sublimator'
  18 |
  19 |
> 20 | import {
  21 |   matrixSublimator,
  22 | } from 'UTILITY_LOCAL/common/matrix-sublimator'

I appreciate any help/info!

A little disclaimer: I know that there exists the right way how to do it: make a node_modules dependency and install it however I'm interested in this particular way because I've already done the node_modules dependency but I want to have some quick/easiest way how to make some quick fixes without deploying the whole utility package to the remote server and re-install the node_modules every time I added some small console.log etc.

Also, I tried to locally change the node_modules package but it doesn't work at all. It looks like Next.js uses some cache etc. because I even deleted the node_modules/utilities/common folder but it was working somehow. It's weird and nonsense and I don't understand why it behaves in this way so that's why I came to the idea of the 'importing modules from the outside folder' I'm trying to implement

Answer 1

I haven't found any way how to import some module that is located outside of the next.js but I found another way how to avoid such a pesky situation.

Next.js creates the cache on the first build for the babel/webpack files etc. and then it uses modules from this cache and that's why when we do changes in the node_modules folder we don't see these changes in the app.

I found 2 ways how to handle it:

1. just set the config.cache = false; in the next.config.js file. It will disable the webpack cache and on every build, webpack picks up the node_modules dependency. Disadvantage - it really impacts performance
2. just delete the .next/cache or even the entire .next folder and for the next build, Next.js will re-create this folder with the fresh data from node_modules.

Please, note you should do it every time you do some changes in the node_modules package (eg. after adding some console.log , etc.)

Hope this info helps someone