reactjs - 在使用 craco 的 create-react-app 中导入别名无法按预期工作

Question

编辑:为了遵守 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没有成功。有什么帮助解决这个问题吗？

Answer 1

我发现 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;