Importing and exporting JavaScript libraries

Question

Importing and exporting JavaScript libraries

In this scenario, I have a collection of libraries that I've defined.

One such library is lib1.js:

export default {
    Func1() {
        return ...
    }
}

(and similarly for my other libraries in the same folder)

Now, I am importing these libraries into a main file called api.js, along with lib2 and lib3:

import './lib1';
import './lib2';
import './lib3';

Within my Vue component:

<script>
    import * as Api from '@/api/api';

    mounted() {
      Api.func1();
    }

</script>

A certain Mix error occurs indicating that the functions cannot be found:

"export 'Func1' (imported as 'Api') was not found in '@/api/api' ....

I have confirmed that the pathing is correct because directly importing the libraries into the view works fine:

For example in Vue:



<script>
    import Lib1 from '@/api/lib1'
    import Lib2 from '@/api/lib2'
    import Lib3 from '@/api/lib3'

    mounted() {
      Lib1.func1();

      ...

    }

</script>

I'm puzzled by this situation. I simply want one "master" file to handle the importation of all my API functions instead of having to import each one individually.

Additional context: I am using Laraval 6 alongside Vue.

javascript vue.js ecmascript-6 import export

Answer 1

Answer №1

If you're looking to combine modules, I have demonstrated a method using StackBlitz as an example.
The reason your current approach isn't working is because you exported as `default` and when attempting to import `./lib1`, the module name is unknown.
Using `import * as Api` only works with multiple named exports, not just one default export.
It seems like you want to merge multiple libraries into one object. There are a few ways to accomplish this:

Export named functions only (my preferred method):

lib1

export function Func1() {
  return ...;
}
export function Func2() {
  return ...;
}

then in the main file:

import * as lib1 from './lib1';

export default {
...lib1
}

Use default export as shown in your example

lib1

export default {
 Func1() {},
 Func2() {}
}

then in the main file:

import lib1 from './lib1';

export default {
...lib1
}

Export default but combined

lib1

export default {
 Func1() {},
 Func2() {}
}

then in the main file:

import lib1 from './lib1';

export default {
 lib1
}

However, in other files, you would need to use it like:

import Api from '@api/api';

Api.lib1.Func1()

Note: With your current setup, remember to use `import Api from '@api/api';` without the asterisk (*). You can also refer to this informative article on named imports versus default exports.

Answer 2

If you're looking to combine modules, I have demonstrated a method using StackBlitz as an example.
The reason your current approach isn't working is because you exported as `default` and when attempting to import `./lib1`, the module name is unknown.
Using `import * as Api` only works with multiple named exports, not just one default export.
It seems like you want to merge multiple libraries into one object. There are a few ways to accomplish this:

Export named functions only (my preferred method):

lib1

export function Func1() {
  return ...;
}
export function Func2() {
  return ...;
}

then in the main file:

import * as lib1 from './lib1';

export default {
...lib1
}

Use default export as shown in your example

lib1

export default {
 Func1() {},
 Func2() {}
}

then in the main file:

import lib1 from './lib1';

export default {
...lib1
}

Export default but combined

lib1

export default {
 Func1() {},
 Func2() {}
}

then in the main file:

import lib1 from './lib1';

export default {
 lib1
}

However, in other files, you would need to use it like:

import Api from '@api/api';

Api.lib1.Func1()

Note: With your current setup, remember to use `import Api from '@api/api';` without the asterisk (*). You can also refer to this informative article on named imports versus default exports.

Answer 3

Answer №2

When it comes to organizing my code, all roads lead to index.js. I gather all my libraries in the same directory and export them from a single index.js file for easy importing.

index.js

import lib1 from './lib1';
import lib2 from './lib2';
import lib3 from './lib3';

export {
  lib1,
  lib2,
  lib3,
};

vue

import { lib1, lib2, lib3 } from '@/[directory with index.js]';

Alternatively, you could also try this approach:

import libs from '@/[directory with index.js]';

libs.lib1.someFunction();

Answer 4

When it comes to organizing my code, all roads lead to index.js. I gather all my libraries in the same directory and export them from a single index.js file for easy importing.

index.js

import lib1 from './lib1';
import lib2 from './lib2';
import lib3 from './lib3';

export {
  lib1,
  lib2,
  lib3,
};

vue

import { lib1, lib2, lib3 } from '@/[directory with index.js]';

Alternatively, you could also try this approach:

import libs from '@/[directory with index.js]';

libs.lib1.someFunction();

Importing and exporting JavaScript libraries

Answer №1

Answer №2

Similar questions

Incorporating AngularJS into JSP for Seamless Integration

The function purported by WEBPACK_MODULE_13___default(...) does not exist

Plugin for saving inline edits in CKEditor 4

Where can content-tag and main-tag be found in vue-virtual-scroller?

Create rectangles on a canvas by parsing data from a JSON file

What can I do to resolve the issue of my Navigation Bar being blocked by a Javascript map?

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Enhance your checkbox and radio components with React Higher Order Components (H

Tooltip displacement on the webpage

Ways to halt the setInterval function after executing a specific function within it

Deactivate any days occurring prior to or following the specified dates

Switch up the image source without altering the dimensions

Tips for implementing HTML5 validation followed by automatic redirection to a different page

Utilizing helper functions in Node based on their specific types

What are the steps to utilize a public or internal class in JavaScript within an Asp.Net environment?

A step-by-step guide on installing an npm package from the GitHub registry

Triggering an id import via ajax when changes occur

Is it possible to disregard JQMIGRATE warnings for AngularJS v1.4.5 and proceed with upgrading AngularJS?

Retrieving multiple lines of text from the database and populating a TextArea

PHP Survey and Principles