With eslint-import-resolver-webpack I'm trying to tell eslint that I want to import files referring to a "shortcut" (for example, components / counter).
In the example below, webpack (v2.2.0-rc.3) builds fine, but the test fails because it “Unable to resolve module path” / counter. I get this error also for importing “components / counter / reducer” therefore it is not limited to an index.
Both versions of npm run lint and my IDE (IntelliJ) give the same error.
Following the documents, I installed the following configs:
File structure
(part):
project-root/ app/ components/ Counter/ index.js reducer.js app.js internals/ config/ .eslintrc webpack.test.js package.json
File: project-root / app / app.js
import Counter from 'components/Counter'
Excerpt from: project-root / package.json
... "lint": "npm run lint:eslint -- . ", "lint:eslint": "eslint -c internals/config/.eslintrc --fix --ignore-path .gitignore --ignore-pattern internals" ...
File: project-root / config / .eslintrc
{ "parser": "babel-eslint", "extends": "airbnb", "env": { "browser": true, "node": true, "mocha": true, "es6": true }, "plugins": [ "redux-saga", "react", "jsx-a11y" ], "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "settings": { "import/resolver": { "webpack": { "config": "./internals/config/webpack.test.js" } } }, "rules": { "arrow-parens": [ "error", "always" ], "import/imports-first": 0, "import/newline-after-import": 0, "import/no-dynamic-require": 0, "import/no-extraneous-dependencies": 0, "import/no-named-as-default": 0, "import/prefer-default-export": 0, "jsx-a11y/aria-props": 2, "jsx-a11y/heading-has-content": 0, "jsx-a11y/href-no-hash": 2, "jsx-a11y/label-has-for": 2, "jsx-a11y/mouse-events-have-key-events": 2, "jsx-a11y/role-has-required-aria-props": 2, "jsx-a11y/role-supports-aria-props": 2, "max-len": [ 2, 120, 2, { "ignoreComments": true, "ignoreTrailingComments": false, "ignoreRegExpLiterals": true } ], "newline-per-chained-call": [ 2, { "ignoreChainWithDepth": 4 } ], "no-console": [ 1, { "allow": [ "warn", "error" ] } ], "no-use-before-define": [ 2, { "functions": false, "classes": true } ], "prefer-template": 2, "class-methods-use-this": 0, "react/forbid-prop-types": 0, "react/jsx-uses-vars": 2, "react/jsx-first-prop-new-line": [ 2, "multiline" ], "react/jsx-filename-extension": 0, "react/jsx-no-target-blank": 0, "react/prefer-stateless-function": 0, "react/require-extension": 0, "react/self-closing-comp": 0, "redux-saga/no-yield-in-race": 2, "redux-saga/yield-effects": 2, "semi": [ 2, "never" ] } }
And: project-root / internals / config / webpack.test.js:
const webpack = require('webpack') module.exports = { devtool: 'inline-source-map', module: { loaders: [ { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, loader: 'null-loader' }, { test: /\.js$/, loader: 'babel', exclude: [/node_modules/], }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i, loader: 'null-loader', }, ], }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }), ], resolve: { modules: [ 'app', 'node_modules', ], }, }
Note. I also tried to specify a file that only exports the permission object. Same:
module.exports = { resolve: { modules: [ 'app', 'node_modules', ], } }