I’m new here and having some trouble importing both internal and external javascript modules into my plugin. It seems I can include internal javascript files in the <web-resource> tag within the atlassian-plugin.xml file but still cannot reference their functions in other files. I’m not sure where to start with external npm modules as trying to import them in my javascript files doesn’t work. I am clearly missing something important here and most javascript docs show the same thing.
Here’s what I have so far:
<!--atlassian-plugin.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}"/>
<param name="atlassian-data-center-compatible">true</param>
<param name="plugin-logo">images/logo.png</param>
<param name="plugin-icon">images/icon.png</param>
<param name="atlassian-data-center-status">compatible</param>
</plugin-info>
<web-resource key="toggle" name="Toggle">
<resource type="download" name="toggle.css" location="css/toggle.css"/>
<resource type="download" name="toggle.js" location="js/toggle.js"/>
<resource type="download" name="test.js" location="js/test.js"/>
<context>atl.general</context>
<context>atl.admin</context>
<dependency>bitbucket.web.resources:ajs</dependency>
</web-resource>
<web-panel key="myPanel" location="header.global.secondary.search" weight="2000">
<resource name="view" type="static"><![CDATA[<div class="button-cover">
<div class="button r" id="button-1">
<input type="checkbox" class="checkbox" id="toggleButton">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>]]>
</resource>
<dependency>${project.groupId}-${project.artifactId}:toggle</dependency>
</web-panel>
</atlassian-plugin>
// toggle.js
import {testFunction} from 'test.js';
AJS.toInit(function () {
testFunction()
});
// test.js
export function testFunction() {
console.log("Hello world")
}
Most of the time this does not compile and complains about syntax errors with the “export function …”. When it does compile, I get this error:
[INFO] Compiling javascript using YUI
[DEBUG] compressing to /Users/bailey/Repos/toggle-plugin/target/classes/js/test-min.js
[DEBUG] compressing to /Users/bailey/Repos/toggle-plugin/target/classes/js/toggle-min.js
[ERROR] syntax error
import {testFunction} from 'test.js';
[ERROR] Compilation produced 1 syntax errors.
Let’s say I try importing an NPM module. I first use npm install <modulename> and then import it in javascript:
import {someFunction} from 'external-module';
I’ve double checked the module is listed in my package.json and the plugin compiles. I then get this in the Chrome developer console:
SyntaxError: Unexpected token '{'. import call expects exactly one argument.
(anonymous function) — batch.js:52445
p — aui.chunk.17a5eb1d98b83d9b2aa6--1fbc5c7b88ec60beeea3.js:31
I’ve read a few things about setting my javascript file as type="module" when importing (though it’s being imported using a <web-resource> which doesnt give this option). Or possibly using webpack for external modules but I can’t find any proper documentation on setting up webpack for a Bitbucket plugin. Any help here would be appreciated 