error importing functions and variables from other js files

Question

i am having a server side rendered node-express-js project ..

i have a js file which contains an object , when i am trying to import that file in backend controller files by doing

const _something = require(directory name)

i am able to import it properly

but when i am trying to import the same file in my front-end assets files i am getting an error as following

Uncaught SyntaxError: Cannot use import statement outside a module

on frontend js file i am importing it as :- require {something} from '../../dir_name'

here is my export

PoStatus = {
    "Work Order Raised":"1",
    "Pending Request Approval":"2",
    "Pending Quotes":"3",
    "Quote Pending Approver":"4",
    "Pending Purchase Order":"5",
    "Purchase Order Raised":"6",
    "Purchase Order Closed":"7",
    "Work Order Closed":"8",
    "Rejected":"9",
    "Quote Pending Proc. Mgr.":"10"
  }

module.exports={PoStatus}

and my import is :-

import {PoStatus} from '../../../constants/poStatus'

function approveReturnRejectQuote(status) {
  $.confirm({
    title: 'Confirm!',
    content: `Are you sure you want to $

here is a snapshot of my directory

https://i.stack.imgur.com/sIZQy.png

so i am exporting from constants/poStatus to assets/patra/js/quotesDetails and i am getting a big fat error . however my IDE is giving suggestions regarding what object is imported and what key value pairs it holds but browser throws an error

Answer 1

In nodeJs (js running on Desktop) to import and export you must use:

require('here the path') 
module.exports = { /* variables to export */ }

And in Js (js running on browser)

import 'here the path'
export { /*here variables*/}

if you want to use import in nodeJs you must config with webpack: https://webpack.js.org/guides/getting-started/ to use moderJs (with import and export) then it will transform to oldJs

My recomendation:

• If you are building something simple use syntax from nodeJs
• If you build something more complex you must configure webpack