Búsqueda de sitios web

javascript - ¿Cómo arreglar este error de eslint de ruta no resuelta? no-unresolved


Versión de Node: v6.11.0

Mensaje de error:

No se puede resolver la ruta al módulo './coins.json'. (import/no-unresolved)

También estoy adjuntando una captura de pantalla del error:

Aquí puedes ver que App.js y coins.json viven en la misma raíz:

.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);

Mi 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
);

Respuesta #1

No se puede resolver la ruta al módulo './coins.json'. (import/no-unresolved)

En general, eslint no tiene conocimiento sobre la existencia de webpack ni algunas configuraciones que proporcionan ciertos recursos en tiempo de empaquetado, como alias y mecanismos de resolución. El linter solo verifica la estructura de carpetas actual, y si no existe el archivo objetivo, genera una advertencia.
Por lo tanto, al usar eslint con los recursos del resolvedor en tiempo de compilación de webpack, solo agrega el siguiente comando de ignorar: // eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies.