How to use Require in idjs with exported module

[bagonterman]

I am having trouble importing a module. I don't know if the module file should be idjs or js but I have tried both and they don't work. I am getting an error on the require script.

UXPScript Error!

Error String: Module not found: "../../Samples/alert". Parent module folder was: "/"

[bagonterman]

Nothing? I have no answers and have found nothing on this topic. Adobe talks about UXP but it is only Photoshop. I want to migrate but how do I do it and replace //@include to import my scripts?

[rob day]

Hi @bagonterman , this came up the other day—for JavaScripts the include file extension would be .jsxinc—not sure about UXP. See this thread for more details on JS includes:

https://community.adobe.com/t5/indesign-discussions/how-do-i-import-another-jsx-file-to-my-main-jsx-...

[bagonterman]

I have used //@include for a long time with .jsx and the thread you have sent me is for .jsx. What I want to know about is the new CEP format .idjs. How to I import files in that format?

[Loic.Aigon]

Just for the sake of clarity, UXP and CEP are two different beasts. the idjs format relates to UXP Scripts. CEP refers to building Extensions that are a mix of HTML/JS/CSS for the UI and ExtendScript (jsx) for driving the native app.

That said, UXP is still on his way up. Photoshop and XD are the two apps with most UXP implementation. InDesign has received UXP Scripting for a year or so but it still needs improvements.

So to answer your question, a UXP equivalent to ExtendScript "#include" would probably consist in a let myPackage = require("myPackage");

where the myPackage file would consist in a module being exported. But at this stage, I am not sure that would work with InDesign and nor I have it at hand at the moment. But you can still try it on your own:

https://developer.adobe.com/photoshop/uxp/2022/guides/how-to/

[Anoop Valomkot]

@bagonterman To import/include other javascript modules in UXP Scripting (idjs), you can use require keyword. See below example for clarity.

const circle = require('./modules/circle.js');
const shape = require('../triangle.js');
const shape1 = require('../toplevelmodules/triangle.js');
const square = require('./square.js');


console.log(shape.name);
console.log(shape1.name);
console.log(shape1.draw());
console.log(square.draw());
console.log(circle.draw());

[vnh68]

An additional question arises: how to correctly export functions from modules?
module.exports { fuctionName }
causes an error,

If you put 'export' before the function itself, then an error occurs about the incorrect use of the reserved word 'export'.

[Kasyan Servetsky]

@vnh68 

Example of default export:
Here's the App.js file (a module): a piece of code that exports something, which you can import later on somewhere else.

// EXPORT in App.js
const App = () => {/* ... */}
export default App;
// or you can also use these one-liners
export default () => {/* ... */} // anonymous fat arrow function
export default function App() {/* ... */} // named function
// IMPORT in main.js
import App from "./App";

Examples of named exports, that allow you multiple exports per file:

// EXPORT in someFile.js
export const techSupport = "support@kasyan.ho.ua" ;
export const salesSupport = "sales@kasyan.ho.ua";
export const sendEmail = () => { /* ... */};
// IMPORT
import {techSupport, salesSupport, sendEmail} from " /someFile.js"