Question

最近，我将所有我的React文件从扩展名.js切换为.jsx。我还使用webpack的resolve配置为文件路径加上别名。但是，现在看来我的别名导入不再起作用。您可以在下面看到我的Webpack的示例，以及我的应用程序的构建方式和遇到的错误。我已经用谷歌搜索并查看了堆栈溢出，看来我正确地使用了resolve的extension属性extensions: ['.js', '.jsx'],。我的webpack配置中是否还有其他错误，也许是我如何设置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团队进行了沟通，他们帮助我找出了解决方法here。

别名导入不适用于.jsx扩展名

1 个答案: