Reactjs 在craco的creat react应用程序中导入别名未按预期工作

编辑：为了遵守Stackoverflow指导原则，让我们大家都能轻松应对，我提交了一个复制我的bug的小示例：

编辑2:如果这有帮助，我将使用

asdf

version

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

---

对于我使用CRA的现有React项目，现在已消除了大多数错误，但在调试问题几个小时后，我无法使我的别名正常工作：

npm run build

> frontend@0.1.0 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

> frontend@0.1.0 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! frontend@0.1.0 build: `nps build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend@0.1.0 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

my 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',
      },
    },
  },
}

我提供以下指导，这是我的项目的目录布局

.
├── 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

---

我试着使用这个工具，但没有成功。有什么帮助吗？

我发现craco.config.js格式需要更正

改变

 webpack: {
    resolve: { // WRONG you do not need resolve for craco.config.js
      alias: {
        things: path.resolve(__dirname, "./src/things/"),
      },

到

这是因为craco.config.json格式与webpack格式不同

参考：

之后，我还将your thing.js更新为

import React from "react"

const thing = () => { return <div> Stackover</div>}
export default thing;

从“React”导入React
const thing=（）=>{return Stackover}
出口违约物；

。你把node和deno混在一起了，问题是什么？删除所有与问题无关的代码。@Mike'Pomax'Kamermans Deno与我的错误无关，我只是用它来编写脚本，而不是节点。我已经删除了一些代码部分。仍然是@shackra，这个例子仍然非常臃肿，而且复制起来很乏味。如果你遵循并制作一个最小的、可复制的例子（即制作一个新项目并复制它），那么你很有可能找到它。如果没有，其他人都会这样做，以便能够重现错误。@johandone！我已经添加了一个最小的可复制的例子，你钉！事实上，决心是不必要的。我应该深入查看CRACO配置文件，以避免更多类似这样的问题

webpack: { 
      alias: {
        things: path.resolve(__dirname, "./src/things/"),
      },

import React from "react"

const thing = () => { return <div> Stackover</div>}
export default thing;