CODEWITHSUNDEEP
javascriptwebpackeslinteslintrc
Leon Gaban
Leon Gaban

Reputation: 39018

How to fix this eslint path not resolved error? no-unresolved

Node version: v6.11.0

Error Message:

Unable to resolve path to module './coins.json'. (import/no-unresolved)

I am also attaching a screenshot of the error:

enter image description here

Here you can see that App.js and coins.json live in the same root:

enter image description here

.eslintrc

{
  "extends": "airbnb",
  "settings": {
    "import/resolver": "webpack"
  },
  "rules": {
    "comma-dangle": ["error", "never"],
    "semi": ["error", "always"],
    "react/jsx-filename-extension": 0,
    "react/prop-types": 0,
    "react/no-find-dom-node": 0,
    "jsx-a11y/label-has-for": 0
  },
  "globals": {
    "document": true,
    "window": true
  },
  "env": {
    "jest": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  }
}

App.js

import React from 'react';
import { connect } from 'react-redux';
import Routes from './config/Routes';
import { setSearch } from './actions';
import localCoins from './coins.json';

class App extends React.Component {
  componentWillMount() {
    this.props.setSearch(localCoins);
  }

  render() {
    return (
      <Routes />
    );
  }
}

const mapDispatchToProps = dispatch => ({
  setSearch: (...args) => { dispatch(setSearch(...args)); }
});

export default connect(null, mapDispatchToProps)(App);

My webpack.config.babel.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';

const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
/* eslint-disable no-console */
const log = console.log;

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: `${__dirname}/app/index.html`,
  filename: 'index.html',
  inject: 'body'
});

const ExtractTextPluginConfig = new ExtractTextPlugin({
  filename: 'coinhover.css',
  disable: false,
  allChunks: true
});

const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);

const PATHS = {
  app,
  build: coinhover
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;

const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.s?css/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  resolve: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] }
};

const developmentConfig = {
  devServer: {
    publicPath: '',
    contentBase: path.join(__dirname, 'coinhover'),
    quiet: true,
    inline: true,
    compress: true,
    stats: 'errors-only',
    open: true
  },
  devtool: 'cheap-module-inline-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig
  ]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig,
    productionPlugin
  ]
};

log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
);

Upvotes: 6

Views: 21853

Answers (1)

Vladislav Ihost
Vladislav Ihost

Reputation: 2187

Unable to resolve path to module './coins.json'. (import/no-unresolved)

In general eslint has no knowledge about webpack existence and some configuration, that provide some resources in bundling time, such as alias and resolve mechanisms. Linter just check current folder structure, and if there is no target file, it causes a warning.
So, then using eslint with webpack build-time resolver resources, just add following ignore command: // eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies.

Upvotes: 8

Related Questions