rough-notation icon indicating copy to clipboard operation
rough-notation copied to clipboard

Cannot use import statement outside a module

Open SyntaxSamurai43 opened this issue 2 years ago • 1 comments

If I just add this code, it gives the error "Cannot use import statement outside a module" What am I doing wrong? See the code here: https://jsfiddle.net/4gvwatLn/

<script type="module" src="https://unpkg.com/rough-notation?module"></script>

<script>
import { annotate } from 'rough-notation';
// Or using unpkg
// import { annotate } from 'https://unpkg.com/rough-notation?module';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
</script>

SyntaxSamurai43 avatar Apr 16 '23 20:04 SyntaxSamurai43

import { annotate } from 'rough-notation'; is an import statement. The <script> needs to be <script type="module"> for code that uses import.

Since you're using the link, you'll want to use the unpkg syntax below, the import { annotate } from 'https://unpkg.com/rough-notation?module';

If you delete your first line, add type module to the script tag, and use the second import commented out, the fiddle starts to work :)

Commenting here because I went through the exact same experience and came to this realization.

iamjenny avatar Jun 27 '23 20:06 iamjenny