在包 json 中使用别名时无法导入模块

Unable to import module when using alias in package json

我使用 this 问题作为参考,以使用别名导入我的模块。

我有以下 package.json :

{
  ...
  "imports": {
    "#components/*": "src/components/*", // tried both #components/* and #components
    "#config/*": "src/config/*",
    "#hooks/*": "src/hooks/*",
    "#pages/*": "src/pages/*",
    "#utils/*": "src/utils/*"
  }
}

在我的文件中,我这样做:

import { Layout, About } from '#components';

但是我得到以下错误:

Module not found: Error: Can't resolve '#components' in 'pwd/src/pages'
assets by chunk 1.56 MiB (name: main)
  asset static/js/bundle.js 1.56 MiB [emitted] (name: main) 1 related asset
  asset main.a40280fd506751c0b92a.hot-update.js 362 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 343 bytes
  asset asset-manifest.json 315 bytes [emitted]
  asset main.a40280fd506751c0b92a.hot-update.json 28 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 1.56 MiB (1.64 MiB) = static/js/bundle.js 1.56 MiB main.a40280fd506751c0b92a.hot-update.js 362 bytes 2 auxiliary assets
cached modules 1.44 MiB [cached] 117 modules
runtime modules 28.2 KiB 13 modules

ERROR in ./src/pages/HomePage.js 7:0-53
Module not found: Error: Can't resolve '#components' in 'pwd/src/pages'
resolve '#components' in 'pwd/src/pages'
  using description file: pwd/package.json (relative path: ./src/pages)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as internal import
      using imports field: src/components/*
        Parsed request is a module
        using description file: pwd/package.json (relative path: ./src/pages)
          Field 'browser' doesn't contain a valid alias configuration
          resolve as module
            pwd/src/pages/node_modules doesn't exist or is not a directory
            pwd/src/node_modules doesn't exist or is not a directory
            looking for modules in pwd/node_modules
              pwd/node_modules/src doesn't exist
            /Users/ankit/...paths to pwd.../node_modules doesn't exist or is not a directory
            ...                
            /Users/node_modules doesn't exist or is not a directory
            /node_modules doesn't exist or is not a directory
            looking for modules in pwd/node_modules
              pwd/node_modules/src doesn't exist
 @ ./src/App.js 15:0-26 16:0-40 20:30-38
 @ ./src/index.js 7:0-24 10:33-36

webpack 5.68.0 compiled with 1 error in 117 ms

任何帮助都会很棒,谢谢!

question 适用于 nodejs,不适用于 React。您可以使用 craco.

向您的 React 应用添加配置
  1. 使用 yarnnpm
  2. 安装 craco
yarn add @craco/craco
  1. 在项目的根目录中创建一个 craco.config.js 文件并插入别名
const path = require(`path`);

module.exports = {
    webpack: {
        alias: {
            '#components': path.resolve(__dirname, 'src/components'),
            '#x': path.resolve(__dirname, 'src/x'),
        }
    },
};
  1. package.jsonscripts 部分下的 react-scripts 替换为 craco 像这样
 "scripts": {
   "start": "craco start",
   "build": "craco build",
   ...
 },
  1. 重新启动开发服务器,您应该可以使用您的别名了。