I’m trying to run Quokka (enterprise) on a javascript file that has a JSX pragma comment
/** @jsxImportSource @emotion/react */
at the top of the file and I am getting the error:
SyntaxError: ./src/components/LoadingButton.js: importSource cannot be set when runtime is classic.
> 1 | /** @jsxImportSource @emotion/react */
| ^
Here are the docs for the CSS prop that includes the need for the import source comment: https://emotion.sh/docs/css-prop#jsx-pragma
It is worth noting that the app runs fine with this configuration below, however, Quokka’s output keeps showing the error. If I remove the JSX pragma comment and the CSS import, Quokka is able to run a file.
LoadingButtonl.js (example file that I am running Quokka on)
// 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"
}
}