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

Question

我使用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

任何帮助都会很棒，谢谢！

Answer 1

question 适用于 nodejs，而不是 React。您可以使用 craco 向您的 React 应用程序添加配置。

1. 使用yarn 或npm 安装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.json 中scripts 部分下的react-scripts 替换为craco，如下所示

 "scripts": {
   "start": "craco start",
   "build": "craco build",
   ...
 },

4. 重新启动开发服务器，您应该可以使用您的别名了。