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

The stacking order of elements is not affected by the z-index property when using absolute positioning

Run JavaScript on every website when the page loads

Extract core object from array of objects with lodash or javascript

Is there an equivalent function to onAdd in Material-UI when using MUI Chip?

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

The correct method for creating an external JSON file

Maintain checkbox selection even after the page is refreshed

Error encountered while utilizing MUI Button: Unable to access property 'borderRadius' from an undefined source

Which return type is capable of handling null type values?

I have a website hosted on Heroku and I am looking to add a blog feature to it. I initially experimented with Butter CMS, but I found it to be too pricey for my budget. Any suggestions on

The ReactJS Application Cache Client fails to display the most recent updates

Retrieve the data from every dropdown menu

Basic HTML Audio Player Featuring Several Customizable Variables

Retrieve the scope object using angular.element and the $ID parameter

What is the location where nvm saves its node.js installations?

JQuery datepicker is functioning properly only after an alert when loaded with AJAX

Mastering the art of Typescript typing

Storing a Promise in a Variable in React

Creating a new version of an existing method found within a component in a Vue store.js file

Ordering an array using Typescript within React's useEffect()