Using tslint-loader alongside webpack version 2.1.0-beta.25

I have a project in Angular2 that I compress and compile using webpack.

In my webpack configuration file webpack.config.js, I use tslink loader with tslint-related settings.

module.exports = {
...
tslint: {
    configuration: {
        rules: {
            quotemark: [true, "double"]
        }
    },

    // Other tslint configurations...

},
...
preLoaders: [
        {
            test: /\.ts$/,
            loader: "tslint"
        }
    ],
}
}

After updating webpack from version 1.13.1 to 2.1.0-beta.25, the tslint configuration causes issues during the build process using npm run build.

To fix this, I changed the preLoaders directive to loaders:

module: {
        ....
        {
            test: /\.ts$/,
            loader: 'tslint',
            exclude: /(node_modules)/,
            enforce: 'pre'
        },
    ],
}

However, this change alone did not resolve the error:

For loader options: webpack 2 no longer allows custom properties in configuration.
 Loaders should be updated to allow passing options via loader options in module.rules.

As a result, I need to find a new place to store the tslint configuration. Any guidance on this issue would be greatly appreciated.

Thank you!

Answer №1

If you're facing issues with preloaders in webpack 2, be aware of the breaking changes in beta version 2.1-beta.23 regarding pre/postLoaders.

One key change is that the "loaders" section must now be renamed to "rules", and pre/postLoaders should be defined under rules.

In my situation, I was using tslint as a preLoader. To incorporate a pre/postLoader into rules, include the enforce property with either pre or post as its value.

module: {
    rules: [
        {
            enforce: 'pre',
            test: /\.tsx?$/,
            loader: 'tslint',
            exclude: /(node_modules)/,
        },
        {
            test: /\.tsx?$/,
            loaders: ['awesome-typescript-loader'],
            exclude: /(node_modules)/
        }
    ]
}

For more details, refer to the release notes on github: Webpack v2.1.0-beta.23

The release information also includes a link to a pull request demonstrating the required changes from v2.1.0-beta.22 to v2.1.0-beta.23 in the webpack config file. It indicates the necessity of using the LoaderOptionsPlugin as well.

plugins: [
    new webpack.LoaderOptionsPlugin({
        options: {
            tslint: {
                emitErrors: true,
                failOnHint: true
            }
        }
    })
]

Answer №2

Alright, after some tweaking, I realized I just had to relocate the tslint definition below:

plugins: [
    new LoaderOptionsPlugin({
        options: {
           tslint: {
             ...

and also include

const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

Answer №3

To avoid using a plugin, consider implementing the following method:

module: {
  rules: [
    {
      enforce: 'pre',
      test: /\.ts$/,
      loader: 'tslint-loader?' + JSON.stringify({
        emitErrors: true,
        failOnHint: true
      })
    }
  ]
}

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

Typescript encounters an overload error on the Accumulator argument while using reduce operation

I encountered the following code snippet: const foo = ( fields: { [key: string]: string, } ) => { const { one, two } = Object.values(fields).reduce( (acc, field) => { if (isOne(field)) { return { ...acc, two: [...acc.two, ...

Generate a TypeScript generic function that maps class member types to class types

I am dealing with the following function in my codebase export async function batchEntitiesBy<Entity, T extends keyof Entity>( entityClass: EntityTarget<Entity> by: T, variables: readonly Entity[T][] ) { by: T, variables: readonly E ...

Creating a web application using Aframe and NextJs with typescript without the use of tags

I'm still trying to wrap my head around Aframe. I managed to load it, but I'm having trouble using the tags I want, such as and I can't figure out how to load a model with an Entity or make it animate. Something must be off in my approach. ...

Webpack is having trouble locating images within Nextjs

When I import static images with no issues using npm run dev, everything runs smoothly. However, when attempting to utilize npm run build or next build, it fails and prevents deployment to Vercel. next info Operating System: Platform: win32 ...

The data type 'null' is not a valid index type to be used in the Array.reduce() accumulator

This is a follow-up inquiry from: How can JavaScript convert multiple key-value pairs in object lists into one nested object? The initial objective was to merge numerous objects with various key-value pairs into a single nested object. For example, start ...

Tips for modifying JSON response using a function

When I call the function buildFileTree, I store its response in a constant variable called data. const data = this.buildFileTree(dataObject, 0); The value of dataObject is: const dataObject = JSON.parse(TREE_DATA); And the content of TREE_DATA is: cons ...

Contrasting Dependency Injection with Exporting Class Instances

I've been diving into the world of TypeScript and working on enhancing my skills as a web developer. One project I'm currently focused on is a simple ToDo app, which you can find here: https://github.com/ludersGabriel/toDo/tree/dev/backend. My q ...

Accessing index.html via file:// from Vue-cli template

Whenever I execute the npm run build command using this Vue-cli template, it displays this message: Hint: The built files are designed to be served over an HTTP server. Attempting to open index.html via file:// will not function correctly. Therefore, the ...

What are the steps to expand the WebSocket interface using the 'ws' library?

I am struggling to extend an interface in a library and I need some help. I am trying to extend the WebSocket interface from the ws library. ... declare class WebSocket extends events.EventEmitter { ... } declare namespace WebSocket { ... } export ...

Using the index in Vue.js to locate a method within an HTML file

Currently, I am attempting to make use of the reference "index" located within <tr v-for="(note, index) in noteList" v-bind:key="index" in order to call shareToPublic(index). The method selectedID() allows for the selection of the ...

Potential absence of value in this Vue 3 component's 'this' placement

I've been encountering an issue with using this.$refs within my Vue component. No matter where I place it - whether in methods, lambdas, or lifecycle hooks - I consistently receive errors indicating that 'this' may be undefined. As a newcome ...

Deriving values in Typescript based on a subset of a union for conditional typing

Can someone provide assistance with type inference in TypeScript to narrow a union based on a conditional type? Our API validates a set of parameters by normalizing all values for easier processing. One parameter can be either an array of strings or an ar ...

The process of transferring information from a JSON API to TypeScript models

When working with my JSON API in my services, I need to pass the data to my models. What is the most efficient way to accomplish this task? Currently, I am following this process: import { Attachment } from '.'; export class Contact { id: nu ...

The aspect ratio of Threejs sprites is appearing distorted

I'm facing an issue with rendering two objects in an Orthographic camera using Three.js. The objects are not rendering correctly and I'm unsure of the reason behind it. The expected look of the two images is as follows: https://i.sstatic.net/hQ ...

What is the best way to manage the order in which Angular validators are evaluated?

Currently working with Angular 1.5 I have a good grasp on how angular validators are added to a field when the directive is triggered, and then all the validators fire when the control's value changes. For an amount field, I have implemented three di ...

Requires the refreshing of an Angular component without altering any @Input properties

Currently delving into the world of Angular (along with Typescript). I've put together a small application consisting of two components. This app is designed to help track work hours (yes, I am aware there are commercial products available for this pu ...

"Troubleshooting callback errors and viewing statistics in multi-configuration setups

Is it possible to utilize multiple Webpack configs while in watch mode? I have noticed that the compilation callback behaves differently when using build versus watch. I couldn't find any references to this behavior and was curious if anyone else has ...

Storing data received from httpClient.get and utilizing it in the future after reading

Searching for a solution to read and store data from a text file, I encountered the issue of variable scope. Despite my attempts to use the data across the project by creating a global variable, it still gets cleared once the variable scope ends. import ...

Guide to preserving canvas state in React?

I am currently working on a drawing application that allows users to draw lines on a canvas. The functionality is such that the line starts drawing on the first click, continues as the mouse moves, and stops on the second click. However, each time a user ...

Generate Interface from Current Direct Literal

Imagine having an object literal like this: const defaultConfig = { size: 'medium', shape: 'circle', material: 'metal' } Is there a simple method to generate an interface for this object, instead of manually creating o ...