Import statements do not work for React

[pzich]

If I input the following into a JavaScript + No-Library (pure JS) fiddle, I can see the expected objects on the module

import * as reactDatepicker from 'https://esm.run/react-datepicker';
console.log(reactDatepicker);

However, as soon as I switch to React, running errors out with SyntaxError: Cannot use import statement outside a module

This seems to make using modules and React impossible. I can either import the module, but not render it, or render but not use modules.

[Jean-Luc-Picard-2021]

Yeah thats a big problem that there is no option Module JavaScript + No-Library (pure JS). Currently JavaScript + No-Library (pure JS) does generate a ordinary <script> - tag. There should be an option so that a <script type="module">- tag is generated in the resulting page.

A work around is to place it in the HTML:

<script type="module">
   Your Module JavaSript here
</script>

But this is somehow a didactic nightmare, to exclude Module JavaScript from the Java Script tab of JSFiddle. Modules date back to ES6 2015 something, so they exist already for almost 10 years. Browser support for ES6 isn't so bad:

https://www.w3schools.com/js/js_es6.asp

[pzich]

@oskarkrawczyk is this something that can get added?

[oskarkrawczyk]

Fixed

[oskarkrawczyk]

Additionally the JS panel will now show info that the fiddle is intended to be a module:

[pzich]

Amazing! Do you know when this will be deployed?

[oskarkrawczyk]

@pzich Should be up now, forgot about purging assets cache on CloudFlare.

[pzich]

I'm seeing the badge now! But something still doesn't seem to be working for the React case.

[oskarkrawczyk]

Yes, ESLint doesn't like module code being used when its type is set to "script".

Need to fix this one remaining issue with the new linter.

An unfortunate regression after replacing JSHint with ESLint.

[Jean-Luc-Picard-2021]

Additionally the JS panel will now show info that the fiddle is intended to be a module:

Does the linter find a bug in the above? Like its preferable that the module "source" has the file name extension ".mjs" and not ".js"?

The extension also requires that the server delivers the MIME type "text/javascript", which many servers don't do by default for the ".mjs" extension. If the MIME type is not delivered in the Content-Type header, the browser usually refuses to execute.

Further your regex is not needed. If you support the two extensions ".mjs" and ".cjs", you can decide module versus non module (also known as common). And for the extension ".js", it should be noted that you find the information

inside the file package.json whether it is a module or not. (via "type": "module"). Disclaimer: But package.json might be a nodeJS only thing, not 100% sure.

[oskarkrawczyk]

@Jean-Luc-Picard-2021 Thanks for the input.

The way linting in JSFiddle works has nothing to do with file extensions.

Modules DO work just fine, what's currently failing is linting code in the editor itself.

As mentioned, fixing ties is next on my todo

[oskarkrawczyk]

@pzich Can you try now? It does seems to be fixed on my end.

[pzich]

@pzich Can you try now? It does seems to be fixed on my end.

Do you need to purge Cloudflare again? I tried clearing my cache but still seeing the same errors.

[oskarkrawczyk]

Can you provide a fiddle link?

[pzich]

• JavaScript + No-Library (pure JS) https://jsfiddle.net/4fdxa9ph/
• React + No-Library (pure JS) https://jsfiddle.net/96vLxfz3/
• React + React 0.14.3 https://jsfiddle.net/u7do9sjk/

You can see the "JavaScript + No-Library (pure JS)" case loads the module, but you can't use the JSX syntax so it's not very useful. For "React" (either "No-Library (pure JS)" or "React 0.14.3") I get Uncaught SyntaxError: Cannot use import statement outside a module

---

In call cases, the [Module] badge is showing up, so it's properly detecting that a module is trying to be imported, but something about the JavaScript vs React language choice is breaking it.

[pzich]

Any chance you can take a look at this? It would be really great to be able to develop react apps in JSFiddle!