3

I am trying to build a nuxtjs app with command "npm run build," which is executing "nuxt build."

However, the build fails and it looks like nuxt doesn't know how to compile Typescript code. But the funny thing is that the "npm run dev" command works without any problems and the app works. Just the production build is failing.

I noticed that if I remove the lang="ts" from the script tag in my single file components, the error is gone, but of course, the typescript code doesn't compile and other errors occur. I tried with various tsconfig.json configurations, but none is working. I have typescript and ts-loader modules included in dependencies in package.json file.

"ts-loader": "^5.3.3",
"typescript": "^3.3.3",

This is an example of the error message which I receive when I run "npm run build"

ERROR in ./pages/index.vue?vue&type=script&lang=ts& (./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--0-2!./node_modules/ts-loader??ref--0-3!./node_modules/babel-loader/lib??ref--4-0!./node_modules/ts-loader??ref--4-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=ts&)
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 4)
Cannot read property 'errors' of undefined

    at successfulTypeScriptInstance (../node_modules/ts-loader/dist/instances.js:90:28)
    at Object.getTypeScriptInstance (../node_modules/ts-loader/dist/instances.js:34:12)
    at Object.loader (../node_modules/ts-loader/dist/index.js:17:41)
 @ ./pages/index.vue?vue&type=script&lang=ts& 1:0-404 1:420-423 1:425-826 1:425-826
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

This is my tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "es2015"
        ],
        "module": "es2015",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "strictNullChecks": true,
        "removeComments": true,
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ]
        },
        "noUnusedLocals": true,
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Does anybody have any ideas how to make NuxtJs work with Typescript for production builds and not only for development?

Thanks

2 Answers 2

5

The final solution was (as @Aldarund) recommended, to use nuxt-ts, but without any additional typescript modules, such as typescript or nuxt-typescript. You don't even need the ts-loader module. And the nuxt.config.js has to be renamed to nuxt.config.ts.

Not to even mention that you have to use only nuxt-ts in your npm scripts instead of normal nuxt.

Edit April 2019: As of 2.5.0 version of Nuxt.js, the nuxt-ts is no longer needed for typescript support. Nuxt.js officially supports typescript by installing @nuxt/typescript.

Nuxt v2.5.0 release notes

Sign up to request clarification or add additional context in comments.

1 Comment

The important here for me was "remove typescript". Thank you.
2

You should use nuxt-ts

See some docs and example here

https://nuxtjs.org/guide/typescript

More docs will come soon

2 Comments

Thanks, I will try it out if I don't find a solution with the basic Nuxt.js :)
@papazulu ye but it is basic nuxt just, it's new official way to use ts with nuxt

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.