alias importing won't work with .jsx extension

Question

I recently switched all my react files from having a .js extension to .jsx extension. I also alias my file paths using webpack's resolve configuration. However, it seems now that my alias importing is no longer working. You can see below a sample of my webpack along with how my app is built and the error that I am getting. I have googled and looked at stack overflow and it looks like I am using the resolve's extension property correctly extensions: ['.js', '.jsx'], . Is there something else wrong in my webpack config, maybe how I am setting up my eslint-loader, that I am doing something wrong? Thanks.

error message:

yarn run v1.9.4
$ npm-run-all remove-dist devWebpack copy-index
$ rm -rf dist
$ webpack --config webpack.dev.js
Hash: 44f944083dcc496809b9
Version: webpack 4.33.0
Time: 8152ms
Built at: 06/08/2019 1:41:26 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  8.31 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi ./src/app/index.jsx 28 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app/api/api.js] 4.93 KiB {main} [built]
[./src/app/api/apiUrl.js] 246 bytes {main} [built]
[./src/app/api/handleError.js] 1.24 KiB {main} [built]
[./src/app/app.jsx] 466 bytes {main} [built] [failed] [1 error]
[./src/app/index.jsx] 5.61 KiB {main} [built]
[./src/app/redux/actionTypes/configsActionTypes.js] 146 bytes {main} [built]
[./src/app/redux/actionTypes/networkActionTypes.js] 879 bytes {main} [built]
[./src/app/redux/actionTypes/usersActionTypes.js] 1.38 KiB {main} [built]
[./src/app/redux/actions/configsActions.js] 2.91 KiB {main} [built]
[./src/app/redux/actions/networkActions.js] 1.29 KiB {main} [built]
[./src/app/redux/actions/usersActions.js] 9.41 KiB {main} [built]
[./src/app/redux/reducers/rootReducer.js] 4.75 KiB {main} [built]
[./src/app/redux/store.js] 1.34 KiB {main} [built]
    + 721 hidden modules

ERROR in ./src/app/app.jsx
Module build failed (from ./node_modules/eslint-loader/index.js):
Module failed because of a eslint error.

/Users/jemery/dev/bei-bei/src/app/app.jsx
  2:29  error  Unable to resolve path to module 'components/sampleComponent'  import/no-unresolved

✖ 1 problem (1 error, 0 warnings)

 @ ./src/app/index.jsx 213:11-27
 @ multi ./src/app/index.jsx
error Command failed with exit code 2.

webpack.config.js: const path = require('path');

const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
  entry: [
    `${SRC_DIR}/app/index.jsx`,
  ],
  output: {
    path: `${DIST_DIR}/app/`,
    filename: 'bundle.js',
    publicPath: '/app/',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnWarning: true,
          failOnError: true,
        },
      },
      {
        test: /\.jsx?$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2'],
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      components: path.resolve(__dirname, 'src/app/components/'),
    },
  },
};

module.exports = config;

.eslintrc:

module.exports = {
  parser: "babel-eslint",
  extends: "airbnb",
  plugins: ["jest"],
  env: {
    "jest/globals": true
  },
  rules: {
    "react/destructuring-assignment": [false, "always", { "ignoreClassFields": true }],
    "react/require-default-props": 0,
    "jsx-a11y/label-has-associated-control": 0,
    "jsx-a11y/label-has-for": 0,
    "react/no-array-index-key": 0,
    "import/prefer-default-export": 0,
  },
  settings: {
    'import/resolver': {
      alias: [
        ['components', './src/app/components'],
      ],
    },
  },
  globals: {
    "document": true,
    "window": true,
  },
};

src/app/index.jsx:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { history, store } from './redux/store';
import App from './app';

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>, document.getElementById('app'),
);

src/app/app.jsx:

import React from 'react';
import SampleComponent from 'components/sampleComponent';

const App = () => <SampleComponent />;

export default App;

src/app/components/sampleComponent.jsx:

import React from 'react';

const SampleComponent = () => <h1>This is a component</h1>;

export default SampleComponent;

-- UPDATE --

If I change sampleComponent.jsx to sampleComponent.js , or import sampleComponent by writing

import SampleComponent from 'components/sampleComponent.jsx';

I no longer get an error.

Answer 1

我与eslint-plugin-import团队进行了沟通，他们帮助我在这里找到解决方案。