"Rollup, Typescript, and ESLint: a trifecta of warning

I developed a project with Rollup that incorporates Typescript and ESLint along with the typescript-eslint plugin. I've noticed that ESLint is running on compiled code instead of the original source.

Below is my Rollup configuration :

export default commandLineArgs => {
  const serving = commandLineArgs.configServe === true;

  return {
    input: 'src/main.ts',
    output: {
      file: pkg.main,
      format: 'umd',
      name: 'bot',
      sourcemap: !isProduction
    },
    plugins: [
      eslint({ include: ['src/**/*.js', 'src/**/*.ts'] }),
      nodeResolve(),
      commonjs(),
      typescript({ sourceMap: !isProduction, inlineSources: !isProduction }),
      replace({
        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
      }),
      scss({
        includePaths: ['node_modules/'],
        outputStyle: isProduction ? 'compressed' : 'expanded'
      }),
      html({ include: 'src/**/*.html' }), 
      image(), 
      isProduction && terser(),
      isProduction && filesize(),
      serving && serve({
        open: true,
        openPage: '/index.html',
        contentBase: ['demo', 'dist'],
      })
    ]
  }
}

This is my main.ts file:

import './styles/app.scss';

import ChatUI from './ui';
import Chat from './chat';

export default async function init(target: HTMLDivElement): Promise<Chat> {
  const ui = new ChatUI(target);
  const chat = new Chat(ui);

  return chat;
}

The ESLint logs display incorrect line numbers and errors, leading me to believe it's analyzing the generated js file rather than the ts source. What could be causing this issue?

Answer №1

It seems that the "official" version, @rollup/plugin-eslint, is not up-to-date and uses an older version of eslint. Two newer alternatives are available: @rbnlffl/rollup-plugin-eslint and rollup-plugin-eslint2. The former worked for me; I have yet to test the latter.

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

Using Database Data in a Material UI Select Component

I'm having trouble populating a select component from Material UI with data retrieved from my database. Although I can display the data in the component, upon selecting an option it breaks and displays the error "categorias.map is not a function". Any ...

Data filtration - techniques for removing unnecessary information in JavaScript

I have a JSON file containing data that requires filtering. Here is an example structure of the JSON: [{A:"data", C:"flightData", D:"FlightData"}, {B:"data", C:"flightData", D:"FlightData"}, {A:"data", C:"flightData", D:"FlightData"}, {B:"data", C:"flig ...

Is there a way for me to extract all the elements within an object nested inside an array and then append them to another array?

I'm currently facing a challenge that's bothering me quite a bit. My skills in handling JSON data manipulation are not up to par. The problem I'm dealing with involves an array of multiple objects, each containing some data. Within these ob ...

Issue with ReactJS and Material UI: FlexGrow functionality malfunctioning

I'm currently grappling with the implementation of FlexBox, particularly in understanding how to effectively utilize flexGrow. Despite my efforts, I haven't been able to achieve the desired result as the background appears to only wrap around the ...

How can I detect a change in user input using jQuery?

When utilizing jquery .oninput with an element, the event will trigger instantly whenever there is a change in the input value. In my scenario, it is necessary for me to validate the input value by calling the service immediately after any changes occur. ...

Utilizing Kendo UI Jsonp in conjunction with a WordPress json plugin: A comprehensive

Issue at Hand: My goal is to modify a kendo UI data-binding example to work with my own jsonp request. Description of the Problem: Starting from a data-binding example here, I have created this jsfiddle that demonstrates the desired functionality. To a ...

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

Having trouble transferring JSON data to HTML using Angular.JS for a programming course. The author doesn't seem to have this issue, can anyone provide some assistance? I've correctly linked Angular and added the app, but it's not working a ...

Guide on utilizing Chrome Push Notifications on an HTTP website

I'm looking to incorporate Chrome push notifications (GCM) on my HTTP site. I've read that it's typically only for HTTPS sites, but is there a workaround or sample code available for integrating push notifications on an HTTP site? I'm ...

Error in External JavaScript File and Uncaught Reference Error

Wanting to utilize a separate Javascript file with my HTML code, I encountered an issue. Here is the code for the HTML document: <!DOCTYPE html> <html> <a href="javascript:showAlert()">Show Alert!</a> <script type="text/jav ...

Rendering children using props within the parent container on every child component

I am currently facing an issue while creating a side menu that is supposed to render children within it. The problem occurs when each child gets wrapped in the entire render output of the side menu, and I am struggling to find a solution for this. Even wi ...

Trouble with V-if not updating after property is modified within an async TypeScript function

There is a scenario where one HTML element becomes hidden after an async call returns from the server, while another HTML element is displayed: <template> <div v-if="!showElementTwo">Element 1</div> <div v-if="show ...

Ways to verify an NPM package for non-JavaScript code

How can we determine if an npm package consists purely of JavaScript without any bindings or dependencies that require compiling? For instance, the node-speaker package (https://github.com/TooTallNate/node-speaker) requires compilation (mpg321), while req ...

The npm outdated command reveals that there are some modules missing in the current version

In my package.json file, I have specified babelify version 7.3.0 in the devDependencies section like this: "devDependencies": { ..., "babelify": "7.3.0", ... } Everything seems to be working fine and the dependency is downloaded from npm. However, ...

Why is my React Native component not getting the props it needs?

Transitioning from my experience with React, I initially believed that passing props worked the same way, but it turns out that's not the case? Currently, I am working on a login form where I want to differentiate between the styling of the sign in a ...

Leveraging the result of one ajax function within a different ajax function

My current project involves the following steps: 1. User creates a template with various elements. 2. When the user clicks a button: *The first ajax function establishes a new entry in the custom template database. *The second ajax function retrieves the ...

Is it possible to retrieve props in Vue without using methods?

<script lang='ts'> import GraphWorld from '@/components/GraphWorld.vue' // import { defineComponent } from "vue" export default { name: 'GraphView', props: ['people', 'prac'], compone ...

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

I am working with a custom Dojo widget that is based on a template and has an HTML template stored in a separate .html file. Here is the Dojo Widget code snippet: define("dojow/SomeWidgetName",[ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_Templat ...

Setting up a Typescript class for seamless use in both Browser and Node applications

I developed a web app consisting of two separate projects, each housed in different folders with their own set of unique files. The client component is built using Angular 2 (RC-4) with SystemJS Typescript 1.8.10 (as per instructions found here). The serv ...

Tips for optimizing webpack configuration for React applications

I have created a unique webpack configuration file as shown below: var webpack = require('webpack'); var path = require('path'); module.exports = { entry: { app: './src/index.js' }, output: { filena ...

GlideJS is experiencing a flashing issue on the first slide

Is anyone else experiencing a flashing issue when changing slides in the slider periodically? Specifically, the first slide flashes when transitioning from the first to the last slide. This bug seems to be isolated to Chrome only. Interestingly, I've ...