在包 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 应用添加配置
- 使用
yarn
或 npm
安装 craco
yarn add @craco/craco
- 在项目的根目录中创建一个
craco.config.js
文件并插入别名
const path = require(`path`);
module.exports = {
webpack: {
alias: {
'#components': path.resolve(__dirname, 'src/components'),
'#x': path.resolve(__dirname, 'src/x'),
}
},
};
- 将
package.json
中 scripts
部分下的 react-scripts
替换为 craco
像这样
"scripts": {
"start": "craco start",
"build": "craco build",
...
},
- 重新启动开发服务器,您应该可以使用您的别名了。
我使用 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
.
- 使用
yarn
或npm
安装
craco
yarn add @craco/craco
- 在项目的根目录中创建一个
craco.config.js
文件并插入别名
const path = require(`path`);
module.exports = {
webpack: {
alias: {
'#components': path.resolve(__dirname, 'src/components'),
'#x': path.resolve(__dirname, 'src/x'),
}
},
};
- 将
package.json
中scripts
部分下的react-scripts
替换为craco
像这样
"scripts": {
"start": "craco start",
"build": "craco build",
...
},
- 重新启动开发服务器,您应该可以使用您的别名了。