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

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

How to make a pop-up if multiple conditions are satisfied

Is there a way for a pop-up to appear when all divs got ‘onmouseovered’?

function moveOver(obj)
            {
                obj.innerHTML = "POP!!!"
                obj.style.color = "#ff0000"
                obj.style.background = "transparent"
                if ()
                {
                    alert("There is no circles left!")
                }
            }

I basically have 12 circles that pop when you move your mouse over them, is there a way to make a pop-up that says “There is no circles left!” after I hover over the 12th circle?

Hidden row/columns can be seen in table cell border-spacing CSS

I have a table with fixed x number of top rows and y number of left columns.

Like : https://jsfiddle.net/26m75fge/11/

CSS :

div {
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
 
}

table {
  position: relative;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em;
  border: 0.25em solid white;
}

thead tr:nth-child(1) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0.25em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead tr:nth-child(2) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 2em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

HTML :

  <table>
    <thead>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    ....
      </tr>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
 ....
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
       .....
      </tr>
    </tbody>
  </table>
</div>

However, when I scroll my other cells I can see the “Hidden” rows in the background/ border-spacing of the table. (See: cells in border spacing)

Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?

cells in border spacing

SwiperJS breakpoint pagination issue

I’m creating a swiper slider using the SwiperJS library. On Desktop, I’d like to show custom pagination and on mobile, I’d like to set the pagination type to “bullets”. The issue is that the pagination type doesn’t change when I resize my browser until I manually refresh the page. Any help would be greatly appreciated. Here’s the code:

HTML:

<div class="swiper">
  <div class="swiper-wrapper">
    
    <div class="swiper-slide">
      <p>slide 1</p>
    </div>
    
    <div class="swiper-slide">
      <p>slide 2</p>
    </div>
    
  </div>
  
  <div class="swiper-pagination"></div>
</div>

JS:

let mySlider = new Swiper('.swiper', {
      
      slidesPerView: 1.1,
      spaceBetween: 10,
      observer: true,
      observeParents: true,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'bullets'
      },
      
      breakpoints: {
        768: {
          pagination: {
            type: 'custom',
            renderCustom: function (swiper, current, total) {
              return current + ' - ' + total
            }
          }
        }
      },

      on: {
        breakpoint: function (swiper) {
          swiper.update()
          // Also tried swiper.destroy(), swiper.pagination.init() and swiper.init()

        }
      },
      
    })

How to add dynamic or changable files as assets in pkg nodejs

I have added folders as assets to pkg for creating exe file.
The jsonfiles folder contains json files and I want to change the values of these json files and when changed should reflect in frontend.
The jsonfiles folder always displays the value which was present during compilation, I want to make these assets dynamic(i.e,json file changes should reflect on frontend)

"pkg": {
    "assets":  [  "public/**/*", "jsonfiles/**/*" ],
    "targets": ["node14-win-x64" ]
  },

Highlight country once selected with dropdown D3

I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.


//begin script when window loads
window.onload = setMap();

var attrArray = ["Algeria","Angola","Benin"];

  var expressed = attrArray[0];



//set up  map
function setMap(){
  //map frame dimensions
  var width = 1200,
      height = 1000;





  //create new svg container for the map
  var map = d3.select("body")
      .append("svg")
      .attr("class", "map")
      .attr("width", width)
      .attr("height", height);

  //create Albers equal area conic projection centered on France
  var projection = d3.geoOrthographic()
    .scale(600)
    .translate([width / 2, height / 2.7])
    .clipAngle(85)
    .precision(.1);



    var path = d3.geoPath()
      .projection(projection)



    var graticule = d3.geoGraticule()
             .step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude

         //create graticule background
    var gratBackground = map.append("path")
             .datum(graticule.outline()) //bind graticule background
             .attr("class", "gratBackground") //assign class for styling
             .attr("d", path) //project graticule

    var gratLines = map.selectAll(".gratLines")
            .data(graticule.lines()) //bind graticule lines to each element to be created
            .enter() //create an element for each datum
            .append("path") //append each element to the svg as a path element
            .attr("class", "gratLines") //assign class for styling
            .attr("d", path); //project graticule lines


    //use queue to parallelize asynchronous data loading
    d3.queue()
      .defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
      .defer(d3.json, "data/world.topojson") //load background spatial data
      .defer(d3.json, "data/Africa.topojson")
      .await(callback);

function callback(error, csvData, world, africa){
  //translate europe TopoJSON
        var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
              africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;


         //select graticule elements that will be created
        //add Europe countries to map
        var countries = map.append("path")
          .datum(basemapCountries)
          .attr("class", "countries")
          .attr("d", path);

  //add Africa countries to map
            var regions = map.selectAll(".regions")
              .data(africaCountries)
              .enter()
              .append("path")
              .attr("class", function(d){
                return "regions " + d.properties.ADMIN;
              })
              .attr("d", path);

        createDropdown(csvData);





    };

    function createDropdown(csvData){
        //add select element
        var dropdown = d3.select("body")
            .append("select")
            .attr("class", "dropdown")
            .on("change", function(){
              highlight(d.properties);
            });


        //add initial option
        var titleOption = dropdown.append("option")
            .attr("class", "titleOption")
            .attr("disabled", "true")
            .text("Select Country");

        //add attribute name options
        var attrOptions = dropdown.selectAll("attrOptions")
            .data(attrArray)
            .enter()
            .append("option")
            .attr("value", function(d){ return d })
            .text(function(d){ return d });
    };

    //function to highlight enumeration units and bars
 function highlight(props){
     //change stroke
     var selected = d3.selectAll("." + props.ADMIN)
         .style("stroke", "blue")
         .style("stroke-width", "2");
 };


};

convert php array to a javascript array in this particular case: component is a string, recipes is also a string in the format “”recipe1″,”recipe2″”

this is what I did. The following code creates a php arrray with component as id ajnd recipes as values. An example is at component “vodka”(string) we have recipes(“”recipe1″,”recipe2″”recipe3″”) the recipes are also in a format of a string. The array is $menuThings

[1]: https://i.stack.imgur.com/PJrU1.png

Close popup by Esc if there are many of them on the page

I have been searching through the web, but could not find the answer to the question, which seems to have a trivial solution.

I have three popups on my page, which user can open and the functionality to open and close them looks usual:

const popupPicture = document.querySelector(".popup_pic");
const popupProfile = document.querySelector(".popup_profile");
const profileName = document.querySelector(".profile__name");

function openPopup(popup) {
  popup.classList.add("popup_opened");
}

function closePopup(popup) {
  popup.classList.remove("popup_opened");
}

and I pass one of the popup variables to closePopup or to openPopup as a variable.
For instance

closePopupButton.addEventListener("click", () => closePopup(popupProfile));
closePopupImageButton.addEventListener("click", () => closePopup(popupImage));
closePopupPictureButton.addEventListener("click", () => closePopup(popupPicture));

The same with opening popups. I need now closing functionality by Escape button. I understand that it is easy to achieve if there is just one popup by the following code:

document.addEventListener("keydown", function (evt) {
  if (evt.key === "Escape") {
    // and close popup here
  }
});

But there are three popups in my case and I do not know, which I should close. Of course I can do it by this ugly way:

document.addEventListener("keydown", function (evt) {
  if (evt.key === "Escape") {
    closePopup(popupProfile);
    closePopup(popupImage);
    closePopup(popupPicture);
  }
});

And it solves my case, but I wonder if there is more elegant solution, which does not require calling two functions that should not be called.

Hopefully I stated my issue clear.

Thank you very much in advance!

How to disable button while form is being created and to prevent duplicate form

I am trying to make it so that a “Submit” button is disabled when submitting and forwarding data from a form. This is to prevent the user from create multiple copies of the form when rapidly clicking the button when the initial data that was inputted is being saved.

enter image description here

One approach I tried was adding a debouncer to the JavaScript function that handles the submit button operations. However if the user continues to click the button after 5 seconds, the duplicate is still created.

I think a better approach would be to disable the button while the data is being submitted and give an indication to the user that the data is in the state of being saved, and after completion, reenable the button.

Here is the javascript code for context:

setupFormIO: function(submissionFunction) {
    var $this = this;
    var submitFunc = submissionFunction;
    var labelText = "Submit";

    if ($this.projectData && !this.readonly) {
        labelText = "Save";
    }
                       
    var submits = FormioUtils.searchComponents($this.template.components,
        {
            "type": "button"
        }
    );

    if (submits) {
        _.each(submits, function (component) {
            component.label = labelText;
            //
            var timer; 
            if (timer) { 
                clearTimeout(timer); 
            }
            //

            if ($this.readonly) {
                $("#" + component.id + " > button").on("click", function(evt) {
                    evt.stopPropagation();
                    location.assign("/project/ProjectHome.aspx");
                    timer = setTimeout(process, 5000); //
                });
           }
     });
}

CORS Request to S3 Accepted for File Display but Not for Load by Javascript Library

I’m developing a small javascript browser script that retrieve files from S3.

I can display the images without any issue after requesting a SignedUrl to S3. I also updated the CORS policy on S3:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

However when I want to use the same URL to extract the EXIF data (using ExifReader), I get an error message about CORS policy:

Access to fetch at '*SIGNEDURL*' from origin 'null' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

I don’t understand the difference in the behaviour of both. Can someone help?

Thank you

How to fix This page can’t load Google Maps correctly. Do you own this website?

I am creating an web app with ReactJS & there I have to use Google Map to show some data from NASA API

Project Info

  • I have created no billing free API Key on Google Developer
  • I have created .env on my React project & use with `process.env.REACT_APP_API_KEY
  • I have installed & imported google-map-react

API Info

  • I have enable JavaScript Map API
  • App restriction selected `HTTP referrers(web sites)
  • Website restriction set
*localhost:3000
http://localhost:3000
  • API restriction
    • Restrict Key -> Map JavaScript API

Problem

  • I have clear cached & cookies & restart server many times but it show me

This page can’t load Google Maps correctly. Do you own this website? For development purposes only

Code

import GoogleMapReact from 'google-map-react'
import '../style/index.css'

const Map = ({ center, zoom }) => {
    return (
        <div className='map'>
            <GoogleMapReact
                bootstrapURLKeys={{
                    key: process.env.REACT_APP_API_KEY
                }}
                defaultCenter={center}
                defaultZoom={zoom}
            >

            </GoogleMapReact>
        </div>
    )
}
Map.defaultProps = {
    center: {
        lat: 42.3265,
        lng: -122.8756
    },
    zoom: 3
}

export default Map

Slatejs – Set type as inline

I’ve got a question regarding Slatejs.

I’m trying to implement an option to set a text to a type “url” and display this type as hyperlink.

This works fine, but actually the complete line is being marked as type “url” and not only the selected text. I want the selected text marked as type “url” and to be added inline.
This is my current code to mark the selected text as type “url”

function onFormatTextUrlButtonClick(editor) {
    const isActive = isTypeActive(editor,'url')
    Transforms.setNodes(
        editor,
        { 
            type: isActive ? 'paragraph' : 'url',
            url: isActive ? undefined : Editor.string(editor, editor.selection)
        },
        { 
            match: n => Editor.isBlock(editor, n)
        }
    );
}

I’m sure it is no big issue, but I can’t figure it out actually. Many thanks for any hint in advance!