Getting error (importSource cannot be set when runtime is classic) when running Quokka.js with CRA and Emotion using css prop

Question

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"
    }
}

Answer 1

Thanks to the Wallaby team for responding on the same day! Based on the Quokka docs https://quokkajs.com/docs/configuration.html#create-react-app, because I am using CRA, it has predefined quokka settings, which need to be overridden with autoDetect set to false while leaving Babel set to true:

"quokka": {
        "babel": true,
        "autoDetect": false
    }