How to enable a SharedRuntime Environment in a custom function excel add-in with an external vuejs taskpane

David Watson 1 Reputation point
2022-07-05T14:59:48.777+00:00

I need to create a shared runtime environment so that my excel custom functions can have access to the workbook context.

Current Setup: The way the project seems to have been set up is, using the yeoman office generator to generate a custom function addin and then using vue-cli to generate a vue app to use as the taskpane.

Folder Structure:
RootFolder
Add-In
manifest.xml
jest.config.js
package.json
tsconfig.json
webpack.config.js
src
functions
commands
Taskpane
package.json
tsconfig.json
vue.config.js
src

The Add-In folder holds the custom functions and the Taskpane folder holds the Vuejs app. In order to run the whole addin (custom functions and taskpane) I need to run the taskpane first with "npm run serve" which executes "vue-cli-service serve" and then run the addin portion with "npm run serve" which executes "office-addin-debugging start manifest.xml --sideload 8081". I have left out other files and noted these because I believe they will help communicate my possible issue.

Steps To Merge:
I have edited Manifest.xml following the steps provided on Microsofts documentation:
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/configure-your-add-in-to-use-a-shared-runtime

Updated name to use SharedRuntime
<Set Name="SharedRuntime" MinVersion="1.1"/>

Added Runtimes tags within the Host tag
<Runtimes>
<Runtime resid="Taskpane.Url" lifetime="long" />
</Runtimes>

Updated the Page tag to use Taskpane.Url
<Page>
<SourceLocation resid="Taskpane.Url"/>
</Page>

Updated the FunctionFile tag with Taskpane.Url
<FunctionFile resid="Taskpane.Url"/>

In webpack.config.js: I have removed the HtmlWebpackPlugin references and replaced with the following:

new HtmlWebpackPlugin({
filename: "index.html",
template: "../taskpane/public/index.html",
chunks: ["polyfill", "taskpane", "commands", "functions"]
})

Steps I did not provided in the Documentation: Since the project was created using the yeoman office generator with the custom functions option selected, I believe I needed to add the following to the webpack.config.js file's entry object:

entry: {
functions: "./src/functions/functions.ts",
polyfill: "@babel/polyfill",
commands: "./src/commands/commands.ts",
taskpane: "../taskpane/src/main.ts" <----- new addition

When I try to build the addin with the new webpack configuration I get multiple errors, such as:

ERROR in ../taskpane/src/main.ts Module build failed Error: TypeScript emitted no output for main.ts

Module not found errors.

Property doesn't exist errors.

I'm thinking (but would love to confirm) that the steps I took to create the shared runtime provided by the documentation are indeed correct, along with adding the taskpane file to the entry object in the webpack config. But I just can't figure out why it won't compile. I'm thinking it has to do with the different tsconfig.json configurations. The addin is using target: "es5" while taskpane is using target: "esnext". There are other differences as well. I wasn't entirely sure what information would be needed here, so If somebody can help me with this and needs more information, I will be more than happy to add it.

JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
1,043 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.