Add tsconfig paths support for serverMiddleware

[chanlito]

Is your feature request related to a problem? Please describe.
Right now, doing import api from '@/serverMiddleware/api' doesn't work.

Describe the solution you'd like
It'd be nice to be able to import server modules this way.

Describe alternatives you've considered
There's current this https://www.npmjs.com/package/tsconfig-paths that could solve this issue.

[kevinmarrec]

@chanlito Unsure what is not working, why your import wouldn't work ?
Are you missing this : https://github.com/nuxt/typescript/blob/master/examples/options-api/minimal/tsconfig.json#L21 ?

[chanlito]

It works for module processed by webpack.

[kevinmarrec]

Oh yeah you're right, I'll check in the coming days what can be done

[opgbaudouin]

This is an issue for us as well : We use a monorepo where one of the packages is a nuxt typescript build , the rest is API, etc, etc - and we want to use the TS code + types directly in our code.

in package/nuxt/tsconfig.json we have:

 "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ],
            "@api/*": [
                "./../api/src/*"
            ]
        },

this works fine for API and IDE's but as soon as nuxt builds (webpack) it cannot find code that used @api/....

this can somehow be solved by using:

https://github.com/TypeStrong/ts-loader#baseurl--paths-module-resolution
https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

But i have not found a way to extend the webpack config file that Nuxt uses (as the plugin needs to be in a 'resolve' field.

I'm now needing to fully qualify all the paths (which is not good).

UPDATE:

---

Whilst typing i though i simply had not looked in the right place to make that plugin work:

I've not updated the nuxt.config.js:

//at top of file, obviously add to dependencies 
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

{ 

  ...
 /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            if (!config.resolve) {
                config.resolve = {};
            }
            if (!config.resolve.plugins) {
                config.resolve.plugins = [];
            }
            config.resolve.plugins.push(new TsconfigPathsPlugin({configFile: "./tsconfig.json"}));
        }
    }
}

Now my builds works in IDE, TS Type checker and NUXT (Dev) - have not tried build yet.

I'm aware that 'references' might work as well - but nuxt (or webpack) should respect the tsconfig.json file and parse it the best way possible. So if it was NUXT maintainer would add that to the @nuxt/typescript-build.

[kevinmarrec]

@opgbaudouin About "@api/*" in tsconfig.json it will just resolves it for types imports / type checking.

If you're really using such thing in your Nuxt app, you need to telle Webpack to add an alias so it correctly knows where to look.

That's probably what does TsconfigPathsPlugin behind the scenes

[opgbaudouin]

@opgbaudouin About "@api/*" in tsconfig.json it will just resolves it for types imports / type checking.

Yup - the cleanest way i found to do that between packages (in a monorepo) without resorting to d.ts generation, etc. This means TSC can literally use the original file in both typecheck AND transpiling.

If you're really using such thing in your Nuxt app, you need to telle Webpack to add an alias so it correctly knows where to look.

That's probably what does TsconfigPathsPlugin behind the scenes

Yup - but as the documentation has a paths field i was surprised that the one i added didn't work (whereas @ and ~ do work - which are in effect also just aliases to specific folder). it means the same file is idempotent. Considering NUXT does a lot of magic one might as well add this as it doesn't do much :) (did spent 2 hours on it ;) ).

Can't wait for Nuxt 3 - hopefully with even better TS support and Vue 3

[webistomin]

This is an issue for us as well : We use a monorepo where one of the packages is a nuxt typescript build , the rest is API, etc, etc - and we want to use the TS code + types directly in our code.

in package/nuxt/tsconfig.json we have:

 "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ],
            "@api/*": [
                "./../api/src/*"
            ]
        },

this works fine for API and IDE's but as soon as nuxt builds (webpack) it cannot find code that used @api/....

this can somehow be solved by using:

https://github.com/TypeStrong/ts-loader#baseurl--paths-module-resolution
https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

But i have not found a way to extend the webpack config file that Nuxt uses (as the plugin needs to be in a 'resolve' field.

I'm now needing to fully qualify all the paths (which is not good).

UPDATE:

Whilst typing i though i simply had not looked in the right place to make that plugin work:

I've not updated the nuxt.config.js:

//at top of file, obviously add to dependencies 
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

{ 

  ...
 /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            if (!config.resolve) {
                config.resolve = {};
            }
            if (!config.resolve.plugins) {
                config.resolve.plugins = [];
            }
            config.resolve.plugins.push(new TsconfigPathsPlugin({configFile: "./tsconfig.json"}));
        }
    }
}

Now my builds works in IDE, TS Type checker and NUXT (Dev) - have not tried build yet.

I'm aware that 'references' might work as well - but nuxt (or webpack) should respect the tsconfig.json file and parse it the best way possible. So if it was NUXT maintainer would add that to the @nuxt/typescript-build.

Thanks man! Typescript support for VueJS is a hell of a pain.😁

[kevinmarrec]

Anyone wanting to provide a PR against either the module or documentation to implement this feature request ? :)

[yshrsmz]

in my case, extend function runs after serverMiddleware initialization thus this setup is not working.

EDIT:

This works

"scripts": {
  "dev": "node -r tsconfig-paths/register ./node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js"
}

[cprcrack]

Based on the previous solutions, in my case this is the best way I found to allow tsconfig.json paths. First install tsconfig-paths-webpack-plugin:

npm install --save-dev tsconfig-paths-webpack-plugin

Then be sure that the paths you want are defined in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ],
      "@myCustomPathName/*": [
        "./myPath/*"
      ]
    },
  ]
}

Then you can use your defined paths as always in your typescript files:

import myModule from "@myCustomPathName/folder/myModule";

Finally we need to update the npm run dev and npm run start scripts in package.json:

{
  "scripts": {
    "_:comments": "echo 'Scripts starting with _ are the original nuxt scripts. New ones now require tsconfig-paths-webpack-plugin in order to allow tsconfig.json path support, see https://github.com/nuxt/typescript/issues/339'",
    "_dev": "nuxt",
    "_start": "nuxt start",
    
    "dev": "node -r tsconfig-paths/register ./node_modules/nuxt/bin/nuxt.js",
    "build": "nuxt build",
    "start": "node -r tsconfig-paths/register ./node_modules/nuxt/bin/nuxt.js start",
  },
}

You can delete scripts starting with an underscore, those are just for documentation purposes.

[cprcrack]

It feels like this should be supported out of the box. Are there any plans to support this in Nuxt 3?