Cannot use import statement outside a module

[adim1973]

Hi there,

Newbie here in Office add-ins and JavaScript, so please be patient!

I created a Javascript Excel custom functions add-in, by using the Yeoman generator. In one of my custom function I want to use a JS function defined in an external file. So I defined a function named testExternal and placed it in taskpane.js file:

export function testExternal() {
  return 1;
}

then in the functions.js file I have:
import { testExternal } from "../taskpane/taskpane.js";
and in my custom function:
console.log(testExternal());

When debugging, I'm getting the desired 1 in console, but also get the "Cannot use import statement outside a module" error message:

This happens not only in debug mode, but also when the add-in is published on a web server and the add-in is sideloaded. So the external defined function is working correctly, but:

1. is there any way to get rid of that error message?
2. what are the steps to use a function defined in another JS file (not in taskpane.js)? Let's say I want to have all my utils functions in a file named utils.js and use that in my custom functions. What is the best location for utils.js and how can be automatically added to the dist folder, when the project is build in VS Code?

Thank you for your time,
Adrian

[akrantz]

If you're using the separate custom functions runtime, the task pane code and the custom functions don't interoperate directly. The taskpane runs in the webview, but the custom functions run in a separate javascript-engine only runtime. Put the custom functions into functions.js since this is built into a separate bundle from the task pane.

You can use a shared runtime where the custom functions run in the same webview as the task pane which does allow for more interop. See the documentation for more details.

[akrantz]

I'm going to close this bug now, but feel free to ask questions or reopen if needed.