使用 css prop 运行带有 CRA 和 Emotion 的 Quokka.js 时出现错误（运行时为经典时无法设置 importSource）
Posted
技术标签:
【中文标题】使用 css prop 运行带有 CRA 和 Emotion 的 Quokka.js 时出现错误（运行时为经典时无法设置 importSource）【英文标题】：Getting error (importSource cannot be set when runtime is classic) when running Quokka.js with CRA and Emotion using css prop 【发布时间】：2022-01-13 00:16:33 【问题描述】：我正在尝试在具有 JSX 编译指示注释的 javascript 文件上运行 Quokka（企业版）
/** @jsxImportSource @emotion/react */
在文件的顶部，我收到了错误：
SyntaxError: ./src/components/LoadingButton.js: importSource cannot be set when runtime is classic.
> 1 | /** @jsxImportSource @emotion/react */
| ^
以下是包含导入源注释需要的 CSS 道具的文档：https://emotion.sh/docs/css-prop#jsx-pragma
值得注意的是，应用程序在以下配置下运行良好，但是 Quokka 的输出一直显示错误。如果我删除 JSX pragma 注释和 CSS 导入，Quokka 就可以运行一个文件。
LoadingButtonl.js（我正在运行 Quokka 的示例文件）
// Libraries
import PropTypes from 'prop-types';
import css from '@emotion/react';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Fade from '@mui/material/Fade';
const loadingButtonStyles = css`
align-items: center;
display: flex;
justify-content: center;
position: relative;
.button-progress
position: absolute;
`;
const LoadingButton = ( isButtonLoading, ...props ) =>
return (
<div css=loadingButtonStyles>
<Button ...props>props.children</Button>
isButtonLoading && (
// this acts as a delay for the spinner so it doesn't spin as soon as the user clicks the button
<Fade in style= transitionDelay: '800ms' unmountOnExit>
<CircularProgress className="button-progress" />
</Fade>
)
</div>
);
;
LoadingButton.propTypes =
children: PropTypes.any,
isButtonLoading: PropTypes.bool
;
export default LoadingButton;
.babelrc
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
"runtime": "automatic"
]
],
"plugins": [
[
"i18next-extract",
"discardOldKeys": true,
"outputPath": "public/locales/locale.json"
],
["@babel/proposal-class-properties", "loose": true ],
["@babel/proposal-private-methods", "loose": true ],
["@babel/proposal-private-property-in-object", "loose": true ],
["@babel/proposal-object-rest-spread", "loose": true ]
]
package.json
"name": "order-customizer-ui",
"version": "0.1.0",
"private": true,
"default": "order-customizer-ui.js",
"dependencies":
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"fs": "^0.0.1-security",
"graphql-hooks": "^5.1.3",
"i18next": "^20.2.4",
"i18next-browser-languagedetector": "^6.1.1",
"i18next-http-backend": "^1.2.4",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3",
"react-i18next": "^11.8.15",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"unzipper": "^0.10.11",
"uuid": "^8.3.2",
"web-vitals": "^1.0.1"
,
"devDependencies":
"@babel/cli": "^7.14.3",
"@babel/core": "^7.14.3",
"@babel/eslint-parser": "^7.14.3",
"@babel/node": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@emotion/eslint-plugin": "^11.2.0",
"@parcel/transformer-image": "^2.0.0-rc.0",
"@storybook/addon-actions": "6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "6.3.12",
"@storybook/addon-storysource": "6.3.12",
"@storybook/node-logger": "6.3.12",
"@storybook/preset-create-react-app": "3.1.7",
"@storybook/react": "6.3.12",
"babel-plugin-i18next-extract": "^0.8.3",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.0",
"jsdoc": "^3.6.7",
"parcel": "^2.0.0-rc.0",
"prettier": "^2.3.0",
"storybook-addon-designs": "^6.2.0",
"uuid": "^8.3.2"
,
"scripts":
"start": "react-scripts start",
"build": "npm run build:translations && npm run build:parcel$PARCEL_ENV && npm run build:storybook && scripts/postbuild.sh",
"build:react": "react-scripts build",
"test": "react-scripts test --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
"test:no-watch": "react-scripts test --watchAll=false --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
"doc": "jsdoc -c jsdoc.json",
"eject": "react-scripts eject",
"build:parcel-dev": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js --no-optimize && rm src/order-customizer-ui.js",
"build:parcel": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js && rm src/order-customizer-ui.js",
"build:translations": "npm run updateLanguageKeys && npm run updateLokalise && npm run downloadLokalise",
"updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.js,jsx'",
"mockNonEnglishKeys": "node ./src/util/mockNonEnglishKeys.js",
"updateLokalise": "node ./src/util/updateLokalise.js",
"downloadLokalise": "node ./src/util/downloadLokalise.js",
"storybook": "start-storybook -p 6006 -s public",
"build:storybook": "build-storybook -s public --quiet",
"prepare": "husky install"
,
"eslintConfig":
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
"files": [
"**/*.stories.*"
],
"rules":
"import/no-anonymous-default-export": "off"
]
,
"browserslist": [
"since 2017-06"
],
"quokka":
"babel": true
.eslintc
"extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
"plugins": ["@emotion", "react", "react-hooks"],
"parser": "@babel/eslint-parser",
"env":
"browser": true,
"commonjs": true,
"jest": true,
"node": true,
"es6": true
,
"parserOptions":
"ecmaVersion": 2018,
"ecmaFeatures":
"jsx": true,
"modules": true
,
"rules":
"curly": "warn",
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"no-console": ["warn", "allow": ["error"] ],
"react/display-name": "off",
"quotes": ["warn", "single", "avoidEscape": true ],
"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
"react/no-unescaped-entities": 0,
"react/no-render-return-value": "off",
"no-unused-vars": "warn",
"react/prop-types": "warn"
【问题讨论】：
【参考方案1】：感谢 Wallaby 团队在同一天的回复！基于 Quokka 文档https://quokkajs.com/docs/configuration.html#create-react-app，因为我使用的是 CRA，所以它具有预定义的 quokka 设置，需要将其覆盖，将 autoDetect 设置为 false，同时将 Babel 设置为 true：
"quokka":
"babel": true,
"autoDetect": false
【讨论】：
以上是关于使用 css prop 运行带有 CRA 和 Emotion 的 Quokka.js 时出现错误（运行时为经典时无法设置 importSource）的主要内容，如果未能解决你的问题，请参考以下文章
带有 em 的 CSS-Grid 和 font-size 似乎无法响应式工作
使用参数时，React Router Render props 不渲染组件