- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我最近在我的项目中安装了 Storybook
下面的依赖项和开发依赖项:
"dependencies": {
"@emotion/react": "^11.1.4",
"@emotion/styled": "^11.0.0",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@hot-loader/react-dom": "^17.0.1",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-content-loader": "^6.0.1",
"react-dom": "^17.0.1",
"react-hot-loader": "^4.13.0",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@emotion/babel-plugin": "^11.1.2",
"@emotion/babel-preset-css-prop": "^11.0.0",
"@emotion/jest": "^11.1.0",
"@emotion/styled-base": "^11.0.0",
"@storybook/addon-actions": "^6.1.15",
"@storybook/addon-essentials": "^6.1.15",
"@storybook/addon-links": "^6.1.15",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.1.15",
"@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-emotion": "^11.0.0",
"babel-plugin-require-context-hook": "^1.0.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.18.0",
"eslint-config-prettier": "^7.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^5.0.0-alpha.3",
"husky": "^4.3.8",
"jest": "^26.6.3",
"jest-prop-type-error": "^1.1.0",
"prettier": "^2.2.1",
"react-test-renderer": "^17.0.1",
"sass": "^1.32.4",
"sass-loader": "^10.1.1",
"standard-version": "^9.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.15.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.2"
},
我构建了一个使用
@emotion/styled
的简单按钮组件用于造型。但是,在运行
npm run storybook
时,我想为这个按钮添加一个故事。我收到以下错误
Module not found: Error: Can't resolve '@emotion/styled/base' in '/directory/to/Button'
这是我在按钮组件中导入的内容:
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';
const StyledButton = styled.button`
cursor: pointer;
font-size: ${({ fontSize }) => fontSize};
`;
这发生在使用
@emotion/styled
的其他组件上。也是。我是否缺少额外的依赖项,还是需要向 .babelrc 文件添加任何预设?
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@emotion/babel-preset-css-prop"
],
"env": {
"test": {
"plugins": ["require-context-hook"]
}
},
"plugins": ["react-hot-loader/babel", "@emotion"]
}
最佳答案
这是情感11的Break名称更改引起的问题。到目前为止,故事书内部仍在寻找v10名称以集成情感包。因此,在故事书修复它之前,您将有 2 个选项:
A. 降级为情绪 10.
B. 解决方法:
// .storybook/main.js
const path = require("path");
const fs = require("fs");
const { merge } = require("webpack-merge");
function getPackageDir(filepath) {
let currDir = path.dirname(require.resolve(filepath));
while (true) {
if (fs.existsSync(path.join(currDir, "package.json"))) {
return currDir;
}
const { dir, root } = path.parse(currDir);
if (dir === root) {
throw new Error(
`Could not find package.json in the parent directories starting from ${filepath}.`
);
}
currDir = dir;
}
}
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../components/**/*.stories.@(ts|tsx|mdx)",
],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
webpackFinal: async (config) => {
return merge(config, {
resolve: {
alias: {
"@emotion/core": getPackageDir("@emotion/react"),
"@emotion/styled": getPackageDir("@emotion/styled"),
"emotion-theming": getPackageDir("@emotion/react"),
},
},
});
},
};
关于reactjs - 找不到模块 : Error: Can't resolve '@emotion/styled/base' when running story book,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65894711/
reqwest v0.9 将 serde v1.0 作为依赖项,因此实现 converting serde_json errors into reqwest error . 在我的代码中,我使用 se
我有这个代码: let file = FileStorage { // ... }; file.write("Test", bytes.as_ref()) .map_err(|e| Mu
我只是尝试用angular-cli创建一个新项目,然后运行服务器,但是它停止并显示一条有趣的消息:Error: No errors。 我以这种方式更新了(希望有帮助):npm uninstall -g
我从我的 javascript 发送交易 Metamask 打开传输对话框 我确定 i get an error message in metamask (inpage.js:1 MetaMask -
这个问题在这里已经有了答案: How do you define custom `Error` types in Rust? (3 个答案) How to get a reference to a
我想知道两者之间有什么大的区别 if let error = error{} vs if error != nil?或者只是人们的不同之处,比如他们如何用代码表达自己? 例如,如果我使用这段代码: u
当我尝试发送超过 50KB 的图像时,我在 Blazor 服务器应用程序上收到以下错误消息 Error: Connection disconnected with error 'Error: Serv
我有一个error-page指令,它将所有异常重定向到错误显示页面 我的web.xml: [...] java.lang.Exception /vi
我有这样的对象: address: { "phone" : 888, "value" : 12 } 在 WHERE 中我需要通过 address.value 查找对象,但是在 SQL 中有函数
每次我尝试编译我的代码时,我都会遇到大量错误。这不是我的代码的问题,因为它在另一台计算机上工作得很好。我尝试重新安装和修复,但这没有帮助。这是整个错误消息: 1>------ Build starte
在我的代码的类部分,如果我写一个错误,则在不应该的情况下,将有几行报告为错误。我将'| error'放在可以从错误中恢复的良好/安全位置,但是我认为它没有使用它。也许它试图在某个地方恢复中间表情? 有
我遇到了 csv 输入文件整体读取故障的问题,我可以通过在 read_csv 函数中添加 "error_bad_lines=False" 来删除这些问题来解决这个问题。 但是我需要报告这些造成问题的文
在 Spring 中,验证后我们在 controller 中得到一个 BindingResult 对象。 很简单,如果我收到验证错误,我想重新显示我的表单,并在每个受影响的字段上方显示错误消息。 因此
我不知道出了什么问题,因为我用 Java 编程了大约一年,从来没有遇到过这个错误。在一分钟前在 Eclipse 中编译和运行工作,现在我得到这个错误: #A fatal error has been
SELECT to_char(messages. TIME, 'YYYY/MM/DD') AS FullDate, to_char(messages. TIME, 'MM/DD
我收到这些错误: AnonymousPath\Anonymized.vb : error BC30037: Character is not valid. AnonymousPath\Anonymiz
我刚刚安装了 gridengine 并在执行 qstat 时出现错误: error: commlib error: got select error (Connection refused) erro
嗨,我正在学习 PHP,我从 CRUD 系统开始,我在 Windows 上安装了 WAMP 服务器,当我运行它时,我收到以下错误消息。 SCREAM: Error suppression ignore
我刚刚开始一个新项目,我正在学习核心数据教程,可以找到:https://www.youtube.com/watch?v=zZJpsszfTHM 我似乎无法弄清楚为什么会抛出此错误。我有一个名为“Exp
当我使用 Jenkins 运行新构建时,出现以下错误: "FilePathY\XXX.cpp : fatal error C1853: 'FilePathZ\XXX.pch' precompiled
我是一名优秀的程序员,十分优秀!