nuxt: Cannot use aliases inside serverMiddleware

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:

    project
    ├─ ...
    ├─ api
       └─ index.js
    
  3. Add some file, something like util.js:

    project
    ├─ ...
    ├─ 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 ?

<div align="right">This bug report is available on Nuxt community (#c8323)</div>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 31
  • Comments: 20 (4 by maintainers)

Commits related to this issue

Most upvoted comments

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

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.

@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

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

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

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!

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.

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 (~, @).

@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

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

@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.