Using npm link with Webpack results in eslint errors

I have a multi-package project setup, where I have one JavaScript package that depends on a TypeScript library. Initially, I was using Sinopia and had to reinstall the TypeScript library every time I made changes to it. Then I discovered npm link and thought it would make development easier. However, when I linked the library using npm link ../typescript-package and built the project, I encountered this error:

ERROR in ../typescript-package/dist/index.js
Module build failed: Error: No ESLint configuration found.

Since these are separate packages, I'm unsure why Webpack is attempting to apply eslint to this particular package. Below is my webpack.common.js file (note that the dev vs prod configurations should not impact this issue):

// webpack.common.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const babelOptions = {
  presets: ['react', 'es2015', 'stage-0'],
  sourceMaps: true,
  retainLines: true,
};

module.exports = {
  entry: {
    solver: './source/index.jsx',
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    publicPath: '/dist/',
  },
  resolve: {
    modules: ['source', 'node_modules/'],
    extensions: ['.js', '.jsx', '/index.jsx', '.json', '.ts', '/index.ts', '.scss', '/index.scss', '.css'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: babelOptions,
          },
          {
            loader: 'eslint-loader',

            options: {
              emitWarnings: true,
            },
          },
        ],
        exclude: /node_modules/,
      }, {
        test: /\.js$/,
        loader: 'source-map-loader',
        enforce: 'pre',
        exclude: /node_modules/,
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              minimize: true,
              localIdentName: '[local]_[hash:base64:5]',
            },
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: ['source/design'],
            },
          }],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
  ],
  node: {
    global: true,
  },
};

If needed, I can provide additional configuration files or the package.json file.

Answer №1

Solution 1 - Recommended Approach by Webpack

As per the webpack documentation : https://webpack.js.org/configuration/module/#rule-conditions

It is important to note that the resource refers to the resolved path of the file, meaning symlinked resources point to the real path and not the symlink location. When using tools that symlink packages (such as npm link), common conditions like /node_modules/ may inadvertently exclude symlinked files. To resolve this issue, you can disable symlink resolving by setting resolve.symlinks to false.

Therefore, to disable symlinks, refer to: https://webpack.js.org/configuration/resolve/#resolvesymlinks

Solution 2 - Alternative Method

If your project requires symlinks, you can customize the eslint rule in the following manner :

{
  test: /\.js$/,
  enforce: 'pre',
  use: 'eslint-loader',
  include: path.resolve(__dirname), // <-- This instructs eslint to only look within your project folder
  exclude: /node_modules/
}

Additionally, make sure to configure this loader according to your specific needs.

Answer №2

Having faced a similar situation, I am puzzled by ESLint's search for the configuration file in the external package instead of relying on the local rc file as sufficient. The symlink produced by npm link removes the external package from ./node_modules/, preventing it from being excluded by the loader.

To resolve this, my workaround involves duplicating the package into ./node_modules/. This duplication is then filtered out using the excludes rule in your Webpack configuration.

Admittedly, this solution is not elegant and should not be considered ideal. Despite investing time in finding a better alternative, this method has proven to be the most effective so far. While waiting for a more optimal resolution, you can continue tackling other pressing issues in the meantime.

Answer №3

Don't forget to include a .eslintignore file and specify the actual path to the linked module

// Include this in your .eslintignore file
C:/path/to/your/linked/module

This step is important because webpack resolves modules based on their real paths, not the paths within the node_modules folder. This behavior is outlined in the webpack documentation. Usually, eslint automatically ignores files in the node_modules directory, but additional configuration is necessary in this case.

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

I possess an item that I must display its title as a <choice> in a <menu> while returning a different variable

I am working with an object: company: { name: 'Google', id: '123asd890jio345mcn', } My goal is to display the company name as an option in a material-ui selector (Autocomplete with TextField rendering). However, when a user selects ...

Having trouble updating the DataTable with extra details retrieved from a new URL

I'm currently utilizing the DataTable plugin. After loading the DataTable, my aim is to reload the table, while keeping the existing content intact, and adding information gathered from a separate json file. However, I'm encountering an issue wh ...

Import a 3-dimensional object from an .obj file and adjust its positioning within the camera view using Three.js

I am currently working on dynamically loading object files using THREE.OBJLoader and positioning them in the center of the scene or canvas to ensure the entire object is visible in the camera view. Since the objects are dynamic, I do not have fixed height ...

Copying Objects in JavaScript Using Deep Cloning

My current project involves using Nodejs to create a deep copy of an object generated by Squel, a query building library. The main dilemma lies in how to replicate the exact filteredQuery variable. The object is initialized with: filteredQuery = squel.sel ...

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

Error Encountered While Creating a Polygon Wallet on Fireblocks

After following the instructions from Fireblocks Docs, I successfully created a default wallet named "BTC_TEST" like this: enter image description here. However, when attempting to create a Matic wallet, I encountered an Axios Error. Despite Matic being a ...

How can I transform a Firestore collection into an array?

I'm struggling with converting the data retrieved from Firestore into an array that can be used for a chart.js graph. Retrieving Data from Firestore fetchData(){ //Get data this.updatesCollection = this.afs.collection(pathStats); this. ...

Encountering issues with AngularJS number filter when integrating it with UI grid

When using the angularjs number filter in angular-ui-grid, I am facing an issue. The filter works perfectly fine within the grid, but when I export the grid to csv and open it in Excel, the formatting is not maintained. I have included the filter in the e ...

Determine the available time slots for reserving a resource

I am developing an application that displays the weekly availability (Monday-Sunday) of a bookable resource. Next to this calendar view, users can select: A) Length of desired booking slot (15 min/30 min/60 min) B) Time zone The time slots are based ...

JavaScript function to toggle the visibility of navigation with a click of a button

I'm attempting to create a functionality in my code where the Open navigation button hides when the side navigation opens upon clicking. The desired behavior is for the openNav button to be hidden when it's clicked and then shown again when close ...

Managing global HTTP response errors on Vue/axios using Vuex

I've encountered an issue in my VueJS SPA where a strange limbo state occurs. The application fails to recognize that the JWT token has expired, leading it to still display as if the user is logged in. This typically happens after periods of hibernati ...

Shadows on menu buttons transform when clicked using React and CSS

I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...

activate the bootstrap popover by double-clicking instead of a single click

Clicking on a certain div triggers a popover to display another div, which works initially. However, once the popover is removed by clicking outside the div, it requires two clicks to trigger the popover again. How can this be fixed so that it always works ...

mongojs implementation that allows for asynchronous query execution without blocking

Forgive me for asking what may seem like a silly question, but I am struggling to make this work. Currently, as part of my learning journey with node.js and mongojs, I have encountered the following issue: Below is my server.js file server.get("/", funct ...

An array filled with unique and non-repeating elements

I want to display random country flags next to each other, making sure they do not match. However, my specific case requires a unique solution for dealing with arrays: function displayRandomFlags() { var flagurls = ["ZPlo8tpmp/chi","cJBo8tpk6/sov","QyLo ...

Cease the use of jQuery animations

My JavaScript code snippet looks like this: $.get("/<page>.php", "userid='.$userid.'&"+status, function(data){ $("#status").show("fast").html(data).delay(4000).hide("fast"); }); On a page with multiple links triggering thi ...

Adjust dimensions of an image retrieved from a URL

Is there a way to adjust the size of the image displayed here?: var picture = new Image(); picture.src = 'http://www.example.com/images/logo.png'; picture.width = 200; //trying to change the width of the image $('canvas').css({ ...

Is there an issue with this npm version number?

I am trying to include the following dependency in the package.json file of my npm package: "redux-saga": "^1.0.0-beta.0 || ^0.16.0"`. When I install this package in a project that already has "redux-saga": "^1.0.0-beta.1 I am expecting npm/yarn to on ...

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

Unable to add the npm package "vue-select"

I encountered an issue while attempting to add vue-select to my Vue 3 project Here is a screenshot of the error Previous attempts using commands like --force or --legacy-peer-deps have failed. Any assistance would be greatly appreciated. Thank you in adv ...