- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
编辑:为了遵守 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/
npm ERR! While resolving: frontend@0.1.0 npm ERR! Found: react-scripts@5.0.0 npm ERR! node_modules/r
我正在尝试添加 this插件,它使用 this webpack plugin到我的 craco 配置文件,按照指南进行操作,但它不起作用。 const CracoAlias = require('cr
我正在尝试将 Craco 与 Ant-Design 一起使用,但我无法制作合适的主题切换器。有没有更简单的方法来为此实现主题切换器? const CracoLessPlugin = require("
我的项目使用 craco 来启动/构建,我希望集成 tailwind postcss。我已遵循本教程 https://dev.to/ryandunn/how-to-use-tailwind-with-
我正在构建由 create-react-app 提供的 React 应用程序。 我使用 craco 来简化配置,并为 TypeScript 和 Webpack 设置了 alise。 但是当我运行测试命
我必须能够在运行时更改 ant 设计变量(而不是通过无主题文件)。 我用 找到了很多这样的例子定制-cra 和 react-app-rewire-less ,但似乎没有一个适用于 craco。我必须使
文件夹结构: src/index.tsx src/themes/dark.scss src/themes/light.scss ... craco webpack 修改: const path = r
当我将 tailwindcss 更新到版本 3 时,当我意识到老师正在创建和设置他们自己的 craco 时,我正在按照一个关于在框架(如 react)上使用 tailwindcss 的旧教程.conf
编辑:为了遵守 Stackoverflow 指南并让我们所有人的事情变得简单,我提交了一个可重现的小示例来重现我的错误: https://github.com/shackra/stackoverflo
编辑:为了遵守 Stackoverflow 指南并让我们所有人的事情变得简单,我提交了一个可重现的小示例来重现我的错误: https://github.com/shackra/stackoverflo
我正在使用 create react app with craco 和 craco-cesium 将铯加载到我的项目中。我正在尝试设置 jest 以开始创建测试,但问题是 Cesium 正在使用 re
我想用svgr's webpack plugin使用 create-react-app 到 use SVGs with MaterialUI's SvgIcon.我正在使用 craco将 svgr 添
概括 在创建一个新项目并尝试使用 craco 时,我遇到了一个我不明白的错误。 我有什么 错误看起来像这样...... $ craco start (node:125281) UnhandledPro
Storybook 当前调用 react-scripts 。但是,我已经用 craco 覆盖了 CRA 配置的某些部分。这意味着我的应用程序是使用 craco ... 而不是 react-script
我得到了一个 React 项目,我需要使用 Docker Compose 进行容器化。我有一个 Dockerfile: FROM node:latest # Create app directory
我想用ts-nameof在我用 create-react-app 创建的 React 应用程序中.我怎么能在不弹出的情况下做到这一点? 提示:我也用 craco ,所以涉及 craco 的解决方案对我
我在使用 create-react-app 和 craco 设置 webpack 别名路径时遇到问题,已经在谷歌上搜索,但无法解决问题。 我收到一个错误 Module not found: Can't
我试图在运行时通过 require.context 做一些要求在我的 CRA(使用 Typescript)项目中,但我只收到这些类型的错误: TypeError: __webpack_require_
我正在将 ANTd 与我为学校项目构建的 React 应用程序一起使用。该应用程序运行良好,但是在启动时我得到以下信息:craco: *** Cannot find ESLint loader (es
我是一名优秀的程序员,十分优秀!