Share functions between files

I am trying to share some functions between components but I getting and error because the functions are not recognize.

This is my code:

I have this javascript file with one function which I want to share:

// lib.js   
export default function createObj(input) {
  const obj = {};
  Object.keys(input).forEach((key) => {
    obj[key] = input[key];
  });
  return obj;
}

Then I import the javascript file in my vue component like this.

// Component
import { createObj } from '../lib';

  some code....
  
  store.commit('ADD_ITEM', createObj(this.input));  <--- get an error

I am getting an error when I try to use the createObj function from the imported file.

The error is:

 Uncaught TypeError: __webpack_require__.i(...) is not a function
at VueComponent.editItem (Companies.vue?2dd5:244)
at Proxy.boundFn (vue.esm.js?65d7:164)
at click (Companies.vue?79ab:395)
at HTMLTableRowElement.invoker (vue.esm.j

Any idea why I am getting this error I tried creating this external function as a class or making first a const and the export de const but in any way I am getting an error.

I appreciate any help

If you are exporting a function as a default export, when importing it you don’t need the curly braces {}
Your import should be
import createObj from '../lib';

1 Like

Thank you. Sadick it works fine.

Whit multiple functions in the external file (lib.js),

I wrote the code like this and it works fine but it is correct way…the export default function without brackets and the export function with brackets.

//component
import createObj, { resetObjVal, compareValues } from '../lib';

//lib.js

export default function createObj(input) {
  const obj = {};
  Object.keys(input).forEach((key) => {
    obj[key] = input[key];
  });
  return obj;
}

export function resetObjVal(input) {
  const obj = {};
  Object.keys(input).forEach((key) => {
    obj[key] = '';
  });
  return obj;
}

export function compareValues(key, order = 'asc') {
  return (a, b) => {
    const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key];
    const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key];
    let comparison = 0;
    if (varA > varB) {
      comparison = 1;
    } else if (varA < varB) {
      comparison = -1;
    }
    return (
      (order === 'desc') ?
      (comparison * -1) : comparison
    );
  };
}

How can I make one export default with all the functions instead of making three exports?

I would like to use these funcions with this sintax lib.createObj(obj) instead of createOb(obj).

I hope you can help…thks,

You would just export an object with the function as properties.

export default {
  createObj () { ... },
  resetObjVal () { ... },
  compareValues () { ... },
};
1 Like
function createObj (input) {
  //your logic
}
function resetObjVal (input) {
  //your logic
}
function compareValues(key, order = 'asc') {
  //your logic
}
export default {
  createObj,
  resetObjVal,
  compareValues
}

It´s works:
thank you sadick and woodberrry.

I am trying to share some functions between files but I getting and error because the functions are not recognize.

This is my code:

I have this javascript file with one function which I want to share:
// index.js export function forceRerender(key) { console.log(key) key += 1; }