Nuxt.js: Cannot use aliases inside serverMiddleware

[nmfzone]

Version

v2.3.4

Reproduction link

https://codesandbox.io/s/vvm38xp7ny

Steps to reproduce

1. Creating a project with create-nuxt-app

2. Create the serverMiddleware:

   ├─ ...
   ├─ api
      └─ index.js
   

3. Add some file, something like util.js:

   ├─ ...
   ├─ common
      └─ util.js
   

4. Import the common/util.js in api/index.js

   import express from 'express'
   import * as util from '~/common/util'
   
   ...
   

5. Add the serverMiddleware to the nuxt.config.js:

   export default { ... serverMiddleware: [ '~/api/index.js' ] }

What is expected ?

The aliases should be available inside serverMiddleware.

What is actually happening?

✖ Nuxt Fatal Error
Error: Cannot find module '~/common/util'

Additional comments?

Without aliases, we need to replace all imports that uses aliases, to relative path, in this case in api/index.js (server middleware).
But, what about if we use another import aliases inside common/util.js ?

_{This bug report is available on Nuxt community (#c8323)}

[alexdohmen]

Upgraded today to 2.3.4, aliases not working for me, too
Last working version is 2.2.0

[devyaz]

in the server export it like so

import express from 'express'
app = require('express')()
import * as util from '../common/util' //this should be relative
..........
//at the very bottom
module.exports = {
  path: '/api',    
  handler: app
}

am on v-2.3.4. then you can go to yourServerAddress:3000/api/blah-blah

[nmfzone]

@alexdohmen Do you mean aliases in server middleware, right? Because I experienced this issue in server middleware only. Just for clarifying.
@devyaz Sorry, but I think you don't read my explanation carefully :wink: I've explain that.

[devyaz]

@nmfzone this solves your problem
import * as util from '../common/util' it has to be a relative path
i tried already in the sandbox and no problem it runs here

[nmfzone]

@devyaz Sorry, but I've explain it..please read it carefully..

Without aliases, we need to replace all imports that uses aliases, to relative path, in this case in api/index.js (server middleware).
But, what about if we use another import aliases inside common/util.js ?

Basically, I know it will solves the problem. But It didn't make sense, since I use aliases too inside common/util.js. Thanks

[devyaz]

oh ok! but i think they only work inside of Nuxt because Express will not use the alias and its included(imported) in express so on the Express viewpoint it has to be relative or use __dirname because according to Nuxt ~/common/util.js is correct but Node(express) cant resolve the path and pass it to Nuxt, thats the best of my limited knowledge. but if imported in nuxt it will resolve the path correctly than via a serverMiddleware

[nmfzone]

@devyaz That's the problem. So, we can't use aliases inside server middleware. Nuxt has define aliases, so it must be available in all context. When using my own server implementation (not server middleware), I just need to use Backpack and added aliases to it's config, to make node recognize my aliases.

[manniL]

As this never has been implemented (AFAIK) this is a feature request and no bug report.

We don't touch serverMiddleware besides requiring the file and add it to the underlying connect instance. So it's not trivial to implement things like aliases (~, @).

[palfaro91]

I've been having this issue as well. Has there been progress on this or do we continue to require modules relatively?

[aaronransley]

Running into the same issue here. It's no problem to modify a few of the initial imports to use relative paths, but it's the deep dependencies (things in ~/lib/models, and ~/lib/queries) that fall down when they attempt to follow aliases.

Does anyone have experience applying Webpack aliases outside of the primary client/server bundles?

I'm really stumped, and it seems like a silly thing, but the alternative is crazy module pathing like ../../../../../lib/models, etc.

[Exeteres]

Same issue. It forces not to use aliases in all shared code. I think this bug request should be considered as early as possible.

[iliyaZelenko]

@Atinux @manniL @pi0 it will help a lot if you implement it, guys.

Maybe someone knows some alternatives? I tried module-alias but I failed to get this to work with the Nuxt.

[nmfzone]

It has been a while since I'm writing Nuxt app. Ok, it's good to see if this is not an issue, but feature request. So, is it possible to make it works in the next major version?

@iliyaZelenko I've mention it before, you can using Backpack. After that, you could make the aliases work in server side.

[pi0]

Some quick notes:

• serverMiddleware are designed to add tiny plug-ins to nuxt middleware stack. For a full API it is recommend to have a seperate server.
• Module-alias or similar package should make it possible. (I was working on aliaz for exactly same purpose in nuxt. Development is stoped due to lack if interest but can continue working on it)
• Something similar to backpack to compile Nuxt APIs using webpack is under investigation for possibility in nuxt3.
• A new technology for nuxt (nuxtstation) is under development to allow seamlessly development of a seperate API but with single nuxt command.

[loick]

Not sure this is related to the same issue, but @pi0 did you notice the same behavior on the nuxt custom modules?

I'm using aliases like this:

{
  '@core': 'modules/core',
}

It's working quite well on all the application but on Node obviously. So I added the alises on node as well. It almost worked since a custom module with nothing in it (but using a relative import import { ... } from '@core' is breaking my app:

(node:77963) UnhandledPromiseRejectionWarning: /myApp/modules/customModule/nuxt.js:1
Error: Cannot find module '@core'
Require stack:
- /myApp/modules/customModule/nuxt.js
- /myApp/node_modules/@nuxt/customModule/dist/core.js
- /myApp/node_modules/nuxt/dist/nuxt.js
- /myApp/app/server.js
    at Object.<anonymous> (/myApp/modules/core/nuxt.js:1)
    at Generator.next (<anonymous>)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
(node:77963) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:77963) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It's happening right after I get the dev' message "ℹ Initial build may take a while", so I guess nuxt is loaded. Either way, node or nuxt does not seem to resolve my alias. Any idea why?

Thanks!

[KytoSai]

I hope Nuxt team can implement alias for serverMiddleware. Many people expect the feature !

[svr93]

Nuxt version: 2.13+
nuxtConfig.createRequire: false

(see https://github.com/nuxt/nuxt.js/blob/d864b2bd753b63856b0d5d7c95f595eb324a55c5/packages/config/src/options.js#L470)

package.json:

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon -r esm -r module-alias/register server/index.js --watch server",
    "build": "node -r esm -r module-alias/register node_modules/.bin/nuxt build",
    "start": "cross-env NODE_ENV=production node -r esm -r module-alias/register server/index.js"
}

I used this configuration for the ability to use @-paths inside modules/plugins for node.js code, but it may be helpful for other cases