JS: `import` does not work

[BananaAcid]

Describe the bug

One would expect import to work, as it is just default js by now.

It shows "Error: Cannot use import statement outside a module" ... but the root of a JS env should be module compatible.

Please complete the following:

Which version of .NET Interactive are you using? (In a notebook, run the #!about magic command. ):

1.0.317502+9c2a225c543085a04516cc4fc490919d5925ba87

• OS
  • [ ] Windows 11
  • [ ] Windows 10
  • [x] macOS
  • [ ] Linux (Please specify distro)
  • [ ] iOS
  • [ ] Android
• Browser
  • [x] Chrome
  • [ ] Edge
  • [ ] Firefox
  • [ ] Safari
• Frontend
  • [ ] Jupyter Notebook
  • [ ] Jupyter Lab
  • [ ] nteract
  • [x] Visual Studio Code
  • [ ] Visual Studio Code Insiders
  • [ ] Visual Studio
  • [ ] Other (please specify)

Screenshots

[colombod]

Thank you. We need to support type="module" attribute. Need to explore the implication of cross origin settings. What were you trying import?

[BananaAcid]

Tried some ESM I created and host myself (a color conversion module, tried using an interactive document for teaching in school) . The jQuery module would probably be an example to target (just as an idea).

[colombod]

is there any other way you can achieve loading like emitting a script tag or using require to import the esm you need?

[BananaAcid]

Example code:

// ref: https://github.com/BananaAcid/hex-and-rgba/blob/master/esm/index.mjs
import { hexToRgba } from 'https://rawcdn.githack.com/BananaAcid/hex-and-rgba/7b1c5056ade972c1fe94b549c01eff3a65597bd6/esm/index.mjs';

const [red,green,blue, alpha] = hexToRgba('#1B2B34cc');
console.log('colors:', [red,green,blue, alpha]);

Just the usual ES6 Modules stuff. Probably any Browser + Modules example will be an issue here.

"loading like emitting a script tag " - how could that look like?

[colombod]

@rebornix

[colombod]

@rebornix is there any update on vscode side?

[misterspeedy]

@brettfo I see you closed this issue - any chance of getting a few details of how and in what build it was resolved? I'm still seeing the issue and I don't know if I should be using an insider build or something. Many thanks.

[colombod]

@rebornix we are using the new preloads api with es module exporting the activate contract. still this issue seems to be unresolved, how can the scenario be enabled?

[brettfo]

There's a slightly odd workaround that we found; it requires using an HTML cell for the import line (and assigning it to the window object) and in a separate JS cell running the actual code.

[colombod]

in pure js this is the way to use import

this works too

[colombod]

interesting use of import here