Using ts-nameof with Vue

I’ve tried to install the npm package using both npm install ts-nameof @types/ts-nameof --save-dev and npm install @types/ts-nameof --save-dev, and included a reference to ts-nameof in my tsconfig.json like this:

{
  "compilerOptions": {
    "types": [
      "ts-nameof"
    ],
    "typeRoots": [
      "./node_modules/@types/",
    ],
  }
}

But without much luck. Do you have any suggestions as how to continue?

[perf2711]

I had the same problem. Almost got it to work (vue-cli-service build sometimes worked, and sometimes it threw nameof errors).

Your new problem is that eslint-loader is used too early. This of course does not know nameof and should only process if nameof has already been processed

This comment actually guided me to the answer, so thanks @Shinigami92 😄

If someone is still trying to make this work, this is how I accomplished this.

In tsconfig.json add:

{
  /* compilerOptions, etc. */
  "files": [
    "./node_modules/ts-nameof/ts-nameof.d.ts"
  ]
}

so this declaration file would be visible globally.

My vue.config.js was looking like this:

const tsNameOf = require('ts-nameof');

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('ts')
                .test(/\.ts$/)
                    .use('ts-loader')
                        .loader('ts-loader')
                            .options({
                                transpileOnly: true,
                                getCustomTransformers: () => ({ before: [tsNameOf] }),
                                appendTsSuffixTo: [/\.vue$/],
                                happyPackMode: true
                            })
                        .end()
                      .use('ts-nameof')
                        .loader('ts-nameof-loader')
                        .end()

I added the ts-nameof-loader (npm package has the same name) by the way, it helped actually replacing nameof calls with strings.

However it seems, that at this moment eslint-loader was “fighting” with ts-loader in parallel, creating a race condition, which caused the build to sometimes work, and sometimes not. So, by inspecting the webpack config using vue inspect, I moved the eslint-loader explicitly to run after ts-nameof-loader:

const tsNameOf = require('ts-nameof');

module.exports = {
    chainWebpack: config => {
        // Delete the rule completely
        config.module.rules.delete('eslint');

        config.module
            .rule('ts')
                .test(/\.ts$/)
                    .use('ts-loader')
                        .loader('ts-loader')
                            .options({
                                transpileOnly: true,
                                getCustomTransformers: () => ({ before: [tsNameOf] }),
                                appendTsSuffixTo: [/\.vue$/],
                                happyPackMode: true
                            })
                        .end()
                    .use('ts-nameof')
                        .loader('ts-nameof-loader')
                        .end()
                    .use('eslint') // Add the loader here
                        .loader('eslint-loader')
                        .options({
                            extensions: [
                                '.ts',
                                '.tsx',
                                '.vue'
                            ],
                            cache: true,
                            emitWarning: false,
                            emitError: false,
                            formatter: undefined
                        })

    }
};

And there we have it!

[fairking]

Moving ts scripts outside of .vue is not an option for me. The entire component must be in on single file otherwise it makes development nightmare. Sorry I am not an angular guy 😃