Importing a file using its absolute path in JavaScript

Question

Importing a file using its absolute path in JavaScript

Within the dependencies directory, there exists a module named foo:

import foo from '../dependencies/foo'; // This import statement works as intended

The challenge arises when attempting to import from a different path due to deployment in an AWS dependency layer:

import foo from '/opt/dependencies/foo';

However, this results in the following error message:

Error: Cannot locate module '/opt/dependencies/foo' or its corresponding type declarations.ts(2307)

An alternative solution would be using require(), but it prompts a warning advising to use an import statement instead:

const foo = require('/opt/dependencies/foo');

What steps can be taken to bypass this error while maintaining the /opt path?

javascript typescript

Answer 1

Answer №1

To incorporate ES6's dynamic import() function, which operates asynchronously, utilize the following approach:

const bar = await import('/usr/local/modules/bar.js');

If you're working in a Node environment that doesn't support top-level await, necessitating an async wrapper around your program, consider utilizing an Immediately Invoked Function Expression (IIFE) like so:

(async () => {
  const bar = await import('/usr/local/modules/bar.js');

  /* continue with the rest of your code */
})();

Answer 2

To incorporate ES6's dynamic import() function, which operates asynchronously, utilize the following approach:

const bar = await import('/usr/local/modules/bar.js');

If you're working in a Node environment that doesn't support top-level await, necessitating an async wrapper around your program, consider utilizing an Immediately Invoked Function Expression (IIFE) like so:

(async () => {
  const bar = await import('/usr/local/modules/bar.js');

  /* continue with the rest of your code */
})();

Importing a file using its absolute path in JavaScript

Answer №1

Similar questions

Creating a Vue Directive in the form of an ES6 class: A step-by-step

After an ajax call in ASP .NET MVC3 using Razor, jQuery may not function properly

Minimize the count of switch cases that are not empty

``There seems to be an issue with the functionality of Passport.js' multiple login system

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

Template does not reflect changes made to filters in real-time

Tips for automatically closing a dropdown menu when it loses focus

The Material UI Rating Component is malfunctioning and showing an incorrect value

AngularJS: dependent dropdown menus

Is there a way to extract the text from the inner div of an element using nightwatch.js?

Even though the Spotify API JSON response may be undefined, I am still able to log it using console.log()

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

What steps can I take to prevent receiving a 400 (Bad Request) error when using ajax PUT

Issues with the OnChange function not properly functioning in duplicate input fields

Struggling to find the width of an SVG text box or add line breaks after a specific number of characters?

What results can be expected from a piped file stream?

Ensuring User Data is Current in the UI with Firebase Auth Callbacks

Removing various data entries based on timestamp and additional fields in Firebase Firestore

Can VueJS support multiple v-slots in a component?

Utilizing namespacing in a JavaScript library can enhance organization and flexibility, providing