1

I'm having a problem with my linked node module. So, I'm working on react app with hole setup based on webpack 4. Apart of that, I'm building own node module which will be shared across couple react apps. I write the module in ES6 and I use babel to transpile. The problem is that once I want to start the react app with the imported module, I have the following error:

Uncaught Error: Module build failed (from ./node_modules/eslint-loader/index.js): Error: No ESLint configuration found.

Once I setup eslinter in the module it reports another issues (seems that eslinter from react app is trying to run on the linked node module what obviously should not happen for node modules).

The problem occurs only if the module is linked. Once I put the module directly to node_modules directory (it's not linked) then the problem disappear and everything works fine. So, do you have an idea how to exclude from webpack config also linked node modules? This is my webpack config:

const Dotenv = require('dotenv-webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
    template: './src/index.html',
    filename: './index.html',
});

const path = require('path');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/index.jsx',
    ],
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            modules: path.resolve(__dirname, 'src/modules/'),
            routes: path.resolve(__dirname, 'src/routes/'),
            lib: path.resolve(__dirname, 'src/lib/'),
            src: path.resolve(__dirname, 'src/'),
        },
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    'eslint-loader',
                ],
            },
            {
                test: /\.s?css$/,
                use: [
                    'style-loader', // creates style nodes from JS strings
                    'css-loader', // translates CSS into CommonJS
                    'sass-loader', // compiles Sass to CSS, using Node Sass by default
                ],
            },
            {
                test: /\.(ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'public/fonts',
                            name: '[name]-[hash].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    devServer: {
        historyApiFallback: true,
    },
    plugins: [htmlPlugin, new Dotenv()],
};

and this is my .eslintrc file in react app:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "class-methods-use-this": 0,
    "global-require": 0,
    "import/no-named-as-default": 0,
    "indent": ["error", 4],
    "jsx-a11y/label-has-associated-control": [ 2, {
      "controlComponents": ["Input"],
      "depth": 3,
    }],
    "jsx-a11y/label-has-for": 0,
    "max-len": ["error", { "code": 120 }],
    "react/jsx-indent": ["error", 4],
    "react/jsx-indent-props": ["error", 4],
    "react/prefer-stateless-function": ["off"],
    "no-underscore-dangle": 0,
    "import/no-extraneous-dependencies": ["error", { "devDependencies": ["./src/testutils/**/*.js", "./src/**/*.spec.js"] }],
    "react/style-prop-object": ["off"]
  },
  "settings": {
    "import/resolver": "webpack"
  }
}
Dominik Krzywiecki
  • 425
  • 4
  • 15
  • Did you try the following solution? [https://stackoverflow.com/questions/38173326/no-eslint-configuration-found-error](https://stackoverflow.com/questions/38173326/no-eslint-configuration-found-error) – StackMaster Oct 22 '18 at 11:38
  • It's doesn't work. The example is with grunt. There is also example with webpack but the shared config is pretty same as mine (`node_modules` dir is excluded) – Dominik Krzywiecki Oct 22 '18 at 11:44

1 Answers1

1

Ok, so I found the problem and solution. It's because the webpack doesn't see the linked module as a directory under node_modules but as an absolute path where the module is located (in my case it's /var/workspace/mymoduledirectory). Eventually the solution might be to add the absolute path to exclude key in webpack config, like this:

exclude: [/node_modules/, '/var/workspace/themoduledirectoryname'],

Also, the solution would be to use include instead of exclude and define only the files we want to lint/transpile, like:

include: './src',
Dominik Krzywiecki
  • 425
  • 4
  • 15