Importing a local external library and getting "Cannot use import statement outside a module"

Adobe XD
1

I’m getting an error when trying to import the syntax highlighter library into my project.

Cannot use import statement outside a module: 

./highlight.js/src/highlight.js:7:0
SyntaxError: Cannot use import statement outside a module
    at e.exports.execScript (uxp://uxp-internal/domjs_scripts.js:2:615558)
    at l (uxp://uxp-internal/domjs_scripts.js:2:618281)
    at uxp://uxp-internal/domjs_scripts.js:2:618478
    at o._executeCallbacks (uxp://uxp-internal/domjs_scripts.js:2:615300)
    at o.done (uxp://uxp-internal/domjs_scripts.js:2:615114)
    at e.exports._insertRemoteScript (uxp://uxp-internal/domjs_scripts.js:2:618469)
    at e.exports._checkScriptNode (uxp://uxp-internal/domjs_scripts.js:2:617352)
    at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2:616853)
    at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2:609258)
    at e.exports.appendChild (uxp://uxp-internal/domjs_scripts.js:2:13228)

I’m using the following code:

var scriptTag = document.createElement("script");
scriptTag.src = "./highlight.js/src/highlight.js";
scriptTag.type ="text/javascript";
document.head.insertAdjacentElement('beforeend', scriptTag);

I also tried to import it using require but that doesn’t load:

const highlight = require("highlight.js/src/highlight");

Error:

Plugin Error: Error loading plugin from path: /Users/project/
Plugin Error: Module not found: "highlight.js/src/highlight". Parent module folder was: "/".
    at e.exports._throwModuleNotFound (uxp://uxp-internal/runtime_scripts_loader.js:2:17391)
    at e.exports._require (uxp://uxp-internal/runtime_scripts_loader.js:2:17909)

Update
It seems the project might need to be built. I downloaded the library from the CDN and I’ve got it working.

2 Likes