Tips for setting up a Nuxt build with TypeScript capabilities

Trying to create a Nuxt.js app by using the "npm run build" command, specifically executing "nuxt build," has become quite challenging for me.

Sadly, the production build continuously fails because it seems like Nuxt is struggling with compiling Typescript code. Surprisingly, everything works smoothly when I use the "npm run dev" command, and the application runs without any issues. It's just the production build that poses problems.

I've experimented with different configurations in my tsconfig.json file, but none of them seem to solve the issue. Both typescript and ts-loader modules are properly included in the dependencies section of my package.json file as well.

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

An error message similar to the one below surfaces whenever I attempt to execute "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 snippet showcases the content of my tsconfig.json file

{
    "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
    }
}

If anyone has suggestions on how to resolve the compatibility issues between Nuxt.js and Typescript during production builds, your input would be greatly appreciated.

Thank you!

Answer №1

Following the advice of @Aldarund, the ultimate solution was to utilize nuxt-ts without any extra typescript modules like typescript or nuxt-typescript. Surprisingly, even the ts-loader module is unnecessary in this setup. Also, it's crucial to rename the nuxt.config.js file to nuxt.config.ts.

Furthermore, remember to solely use nuxt-ts in your npm scripts instead of the regular nuxt.

Update: April 2019: With the release of Nuxt.js version 2.5.0, there is no longer a need for nuxt-ts for typescript support. Typescript is now officially supported in Nuxt.js through the installation of @nuxt/typescript.

Check out the release notes for Nuxt v2.5.0

Answer №2

Consider implementing nuxt-ts in your project.

Check out some helpful documentation and examples here.

https://nuxtjs.org/guide/typescript

Stay tuned for additional documentation updates.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with index creation using the @index decorator in Typegoose with NestJS and MongoDB

Encountering an issue with typegoose. Trying to create a 2dsphere index on the property geoLocation of model SP. Utilized the typegoose decorator @index but it's not functioning and not throwing any errors. Uncertain about how typegoose handles this s ...

What is the process for integrating a tensorflow.js model into a React-based web application?

I've been working on a React web application in Typescript that involves loading a tensorflow.js model and then applying it each time the component updates. While I successfully implemented this in a small demo app without React, I am facing some chal ...

Discovering the best method to retrieve user details (email address) following a successful login across all pages or components within Angular

Discovering the world of Angular and TypeScript is quite exciting. In my Angular project, I have 8 pages that include a login and registration page. I'm facing an issue where I need to access the user's email data on every page/component but the ...

angular2: The element 'Validators' is not recognized

When working with Angular2, I encountered an error in Visual Studio Code that is displayed with the following message: enter image description here Here is the content of my tsconfig.json file: { "compilerOptions": { "target": "es5", "module" ...

How to link Array with Observable in Angular2 Typescript without using .interval()

Is it possible to achieve the same functionality without using the "interval()" method? I would like to link an array to an observable, and update the array as well as have the observable monitor the changes. If this approach is feasible, how can we inco ...

What is the best way to define the height in a react project?

Greetings on this fine Friday. I've experimented with various options, but none of them appear to have any effect. "height": "100%" "height": "450px" "height": "auth" I would rather avoid a ...

The issue of the list view button not responding to click events in Angular2 NativeScript

I have been working on implementing an onclick event for a listview item button. Below is the code snippet that I have tried, but unfortunately the console log is not being triggered when the button is clicked. I am unsure of what the problem might be in ...

Can user authentication be done across various subdomains?

I am looking to develop a multi-tenant application using Laravel 8.0, incorporating the Laravel multi-tenancy package and Laravel Sanctum, with Vue Frontend for customers and a separate Vue Frontend for Admins. Vue2 Frontend for customers such as: example ...

Trying to retrieve JSON data from an API in VueJS and successfully logging the results, but struggling to render the data on the page. (I

Having recently transitioned from React to VueJs, I encountered a problem where fetching data using axios.get returns a successful response in the console.log. However, when trying to iterate through the array with v-for, nothing is rendered. If you have a ...

Looking to organize an array of objects containing two string elements (countries) based on the country name using TypeScript or the Lodash library?

Below is an example of an array of objects I am working with: { countries: [{ "country_alpha2_code": "PW", "country_name": "PALAU" },{ "country_alpha2_code": "US&qu ...

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

NPM Error: 403 Access Denied - Attempting to PUT http://registry.npmjs.org/[package-name] has been Forbidden

Struggling to create a brand new npm vue component library. I've followed all the necessary steps but now I'm stuck at the point of running `npm publish`. After spending over an hour searching on Google, I still can't find a solution for th ...

Convert a nested JSON array into TypeScript class objects

Within the database exist two distinct entities: 'person' and 'name'. These entities share a many-to-many relationship with the properties 'from' and 'to'. Person PersonName Name -- ...

Tips for formatting dates retrieved from Vue.js Datepicker in Laravel

I am currently working on a project using Vuejs for the front end and Laravel for the backend. In one of my columns, I am trying to add dates using a datepicker. However, I keep encountering an error message: Error: Invalid datetime format - 1292 Incorr ...

Retrieving data from Redis cache may not always yield the exact same data

I have been working on creating a small Express app that retrieves data from a PostgreSQL query and caches the result in a Redis database. Here is my approach: app.get('/query_tile/:z/:x/:y', async (req: Request, res: Response) => { const ...

Using Angular 12 to seamlessly import JSON files into TypeScript

My project contains a JSON file located at src/assets/version.json with the following content: {"VERSION":"1.0.0"} I have imported this file into a TypeScript file (e.g., *.ts) as shown below: import * as VersionInfo from 'src/ass ...

Integrate a fresh global JSX attribute into your React project without the need for @types in node_modules

It is crucial not to mention anything in tsconfig.json. Error Type '{ test: string; }' cannot be assigned to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'test' does not exi ...

Error in Module Building: The path argument must be a string type. A different type was received, which caused the build to fail

I recently updated my Vuetify version from 1.5 to the latest 2.3.10. However, when trying to run the webpack server, I encountered this error message. Even after adding yarn add sass -D, the issue persists. Can someone please assist me in resolving this pr ...

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

I have posted my module, component, and package file here. I am attempting to implement a click event with ngif, but I keep encountering an error. The specific error message is "ERROR in NgSemanticModule is not an NgModule". I'm unsure if this error ...

Is it necessary for me to address the audit problems with the most recent version of nuxt.js?

While using nuxt for my app, I encountered some audit issues when running "yarn audit." These issues are related to dependencies of nuxt. Do I need to address these audit issues? If so, what is the process to fix them? I am currently on nuxt version 2.15 ...