импорт псевдонимов не будет работать с расширением .jsx

Question

Я недавно переключил все мои реактивные файлы с расширения .js на расширение .jsx.Я также называю пути к моим файлам, используя конфигурацию resol веб-пакета.Однако теперь кажется, что мой импорт псевдонимов больше не работает.Ниже вы можете увидеть образец моего веб-пакета вместе с тем, как построено мое приложение, и с ошибкой, которую я получаю.Я гуглил и посмотрел на переполнение стека, и похоже, что я правильно использую свойство extension разрешения extensions: ['.js', '.jsx'],.Что-то не так в моем конфиге веб-пакета, может, как я настраиваю свой eslint-loader, что я делаю что-то не так?Спасибо.

сообщение об ошибке:

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;

- ОБНОВЛЕНИЕ -

Если я изменю sampleComponent.jsx на sampleComponent.js, или импортирую sampleComponent, написав

import SampleComponent from 'components/sampleComponent.jsx';

Я больше не получаю ошибку.

Answer 1

Я общался с командой eslint-plugin-import, и они помогли мне найти решение здесь .