编辑:为了遵守 Stackoverflow 指南并让我们所有人的事情变得简单，我提交了一个可重现的小示例来重现我的错误:
https://github.com/shackra/stackoverflow-alias-bug
编辑 2:如果这有帮助，我正在使用 asdf 版本 v0.8.0-c6145d0 来管理我的 Nodejs安装:
~ $ whereis node
node: /usr/bin/node /usr/include/node /home/jorge/.asdf/shims/node /usr/share/man/man1/node.1.gz
~ $ node --version
v14.2.0
~ $ whereis yarn
yarn: /home/jorge/.asdf/shims/yarn
~ $ whereis npm
npm: /usr/bin/npm /home/jorge/.asdf/shims/npm /usr/share/man/man1/npm.1
对于现有的 React 项目，我使用了 CRA，现在消除了大多数错误，但是在调试问题几个小时后我无法使我的别名正常工作:
npm run build
> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badcc8d5d4cedfd4defa8a948b948a" rel="noreferrer noopener nofollow">[email protected]</a> prebuild /home/jorge/code/kue/fero/dev/frontend
> nps generate-build-version
nps is executing `generate-build-version` : nps genver
nps is executing `genver` : deno run --allow-read --allow-write generate-build-version.ts
> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1a0e1312081912183c4c524d524c" rel="noreferrer noopener nofollow">[email protected]</a> build /home/jorge/code/kue/fero/dev/frontend
> nps build
nps is executing `build` : craco build
craco: *** Cannot find ESLint loader (eslint-loader). ***
Creating an optimized production build...
● Webpack █████████████████████████ building (11%) 12/16 modules 4 active
css-loader › postcss-loader › src/App.css
Failed to compile.
./src/App.tsx
Cannot find module: 'pages/AdminLand'. Make sure this package is installed.
You can install this package by running: npm install pages/AdminLand.
The script called "build" which runs "craco build" failed with exit code 1 https://github.com/sezna/nps/blob/master/other/ERRORS_AND_WARNINGS.md#failed-with-exit-code
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bedf9e4e5ffeee5efcbbba5baa5bb" rel="noreferrer noopener nofollow">[email protected]</a> build: `nps build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b2a6bbbaa0b1bab094e4fae5fae4" rel="noreferrer noopener nofollow">[email protected]</a> build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jorge/.npm/_logs/2020-11-29T02_52_51_308Z-debug.log
我的package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@casl/ability": "^4.1.6",
"@casl/react": "^2.1.1",
"@craco/craco": "^5.8.0",
"@sentry/browser": "^5.27.6",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.8",
"antd": "^4.8.6",
"axios": "^0.21.0",
"classnames": "^2.2.6",
"craco-antd": "^1.19.0",
"currency.js": "^2.0.3",
"file-saver": "^2.0.5",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"nps": "^5.10.0",
"nps-utils": "^1.7.0",
"print-js": "^1.5.0",
"query-string": "^6.13.7",
"react": "^17.0.1",
"react-context-devtool": "^2.0.0",
"react-cosmos": "^5.5.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"typescript": "^4.0.3",
"ulid": "^2.3.0",
"url-regex": "npm:url-regex-safe@^1.0.2",
"web-vitals": "^0.2.4"
},
"scripts": {
"nps": "nps",
"clean": "rm -rf build",
"prebuild": "nps generate-build-version",
"start": "nps start",
"build": "nps build",
"test": "nps test",
"cosmos": "nps cosmos",
"lint": "nps lint",
"lint-fix": "nps lint.fix",
"tsc": "nps tsc",
"bump-patch": "nps bump-patch",
"bump-minor": "nps bump-minor",
"bump-major": "nps bump-major",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/classnames": "^2.2.11",
"@types/file-saver": "^2.0.1",
"@types/lodash": "^4.14.165",
"@types/react-router-dom": "^5.1.6",
"craco-alias": "^2.1.1",
"eslint-plugin-simple-import-sort": "^6.0.1",
"favicons-webpack-plugin": "^4.2.0",
"webpack-bundle-analyzer": "^4.1.0",
"webpackbar": "^5.0.0-3"
}
}
最后是我的craco.config.js:
const path = require('path')
// ...
process.env.BROWSER = 'none'
module.exports = {
plugins: [
// ...
],
webpack: {
// ...
resolve: {
alias: {
components: path.resolve(__dirname, './src/components/'),
modules: path.resolve(__dirname, './src/modules/'),
pages: path.resolve(__dirname, './src/pages/'),
types: path.resolve(__dirname, './src/types/'),
utils: path.resolve(__dirname, './src/utils/'),
},
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
jest: {
transformIgnorePatterns: [
'/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$',
],
configure: {
moduleNameMapper: {
'^components(.*)$': '<rootDir>/src/components$1',
'^modules(.*)$': '<rootDir>/src/modules$1',
'^pages(.*)$': '<rootDir>/src/pages$1',
'^types(.*)$': '<rootDir>/src/types$1',
'^utils(.*)$': '<rootDir>/src/utils$1',
},
},
},
}
这就是我扩展 tsconfig.json 的方式:
{
"compilerOptions": {
"pretty": false,
"jsx": "react",
"baseUrl": "src"
}
}
我提供以下指导，这是我的项目的目录布局。
.
├── build
│ ├── icono.svg
│ ├── manifest.json
│ ├── meta.json
│ └── robots.txt
├── CHANGELOG.rst
├── CONTRIBUTING.md
├── cosmos.config.json
├── craco.config.js
├── default.conf
├── docker-compose.yml
├── Dockerfile
├── generate-build-version.ts
├── index.js
├── LICENSE
├── Makefile
├── package.json
├── package-lock.json
├── package-scripts.js
├── public
│ ├── icono.svg
│ ├── index.html
│ ├── manifest.json
│ ├── meta.json
│ └── robots.txt
├── README.md
├── replace-interface-with-decimal-type.el
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── CacheBuster.tsx
│ ├── components
│ ├── cosmos.decorator.tsx
│ ├── index.tsx
│ ├── modules
│ │ ├── ability
│ │ ├── authorization
│ │ ├── invoice
│ │ ├── notification
│ │ └── resource
│ ├── pages
│ │ ├── AdminLand.tsx
│ ├── react-app-env.d.ts
│ ├── react-context-devtool.d.ts
│ ├── sentry.jsx
│ ├── serviceWorker.js
│ ├── styles
│ │ └── antd
│ ├── types
│ ├── utils
│ └── vendor.d.ts
├── tsconfig.custom.json
└── tsconfig.json
我尝试使用 babel resolver plugin没有成功。有什么帮助解决这个问题吗？
最佳答案
我发现 craco.config.js 格式需要更正。
改变
webpack: {
resolve: { // WRONG you do not need resolve for craco.config.js
alias: {
things: path.resolve(__dirname, "./src/things/"),
},
至
webpack: {
alias: {
things: path.resolve(__dirname, "./src/things/"),
},
这是因为 craco.config.js json 格式与 webpack 格式不同
引用号:https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-file
之后，我还将您的 thing.js 更新为
import React from "react"
const thing = () => { return <div> Stackover</div>}
export default thing;
关于reactjs - 在使用 craco 的 create-react-app 中导入别名无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65055214/