Uncaught TypeError: Cannot set property Sidebar of #<Object> which has only a getter at ./src/components/Sidebar.js (Sidebar.js:9:1)

[gcizman]

Hi team

i am getting this issue on Sidebar.js

// Sidebar.js
/**
 * Sidebar for shipping information details
 */

import { Sidebar } from '@coreui/coreui';
import React,{Component, useEffect, useState} from 'react';
import {httpHelper} from "./helpers/httpHelper"
  
export default Sidebar =() => {
// const products
  const Products=()=>{
  const[product, setProducts] = useState(null)

  // url to pass values from the json format.

  const url = "http://localhost:3000/product"
  const api = httpHelper()


  // fetching data as json
  useEffect(()=>{
    getProducts()
  }, [])

  const postProducts = product=>{
    api 

      .post('${url}', {body:product})
      .then(response=>getProducts())
      .catch(err=>console.log(err))
  }

  // get all products information here.

  const getProducts =() =>{
    api
    .get('${url}?_expand=shipping')
    .then(response=> {
      getProducts(response)
    }).catch(err=>console.log(err))
  }

  // our products returns when nothing on json if empty.
  if(!product) return null
  }
   


}

[hyrious]

The main problem here is you're assigning things to names imported from other package. i.e.

import {A} from 'a'
A = 1

Which is not allowed in ESM context (where you can treat the A as if it was defined by const A = ..., assigning to a constant value is not allowed), and is not safe to use it in CJS conext.

When you transform this code to CJS, it becomes:

var import_a = require("a");
import_a.A = 1;

It is not SAFE when the package a export things like:

Object.defineProperty(exports, "a", { get: () => 42, enumerable: true })

You can try this code to reproduce your error message:

var import_a = {}
Object.defineProperty(import_a, "a", { get: () => 42, enumerable: true })
import_a.a = 1 // error!

[evanw]

This code looks strange to me:

export default Sidebar =() => {

There's the issue of it crashing when run due to how JavaScript imports work (which has nothing to do with esbuild). But it also just looks wrong because even if it didn't crash, why would you want to overwrite an import like this? Are you perhaps confused about how to export something in JavaScript?

Did you mean to use a default export like this instead?

export default () => {

Or did you mean to export the name Sidebar instead of default?

export let Sidebar = () => {

You can also export the same thing as both Sidebar and default if you want to:

export { Sidebar as default }
export let Sidebar = () => {

In any case, esbuild already points this out for you. This is an error when bundling:

✘ [ERROR] Cannot assign to import "Sidebar"

    example.js:10:15:
      10 │ export default Sidebar =() => {
         ╵                ~~~~~~~

  Imports are immutable in JavaScript. To modify the value of this import, you must export a setter
  function in the imported file (e.g. "setSidebar") and then import and call that function here
  instead.

I guess this means it should also be a warning when not bundling.