0

I try to use a dynamic import in the client for a big module.

The module returns an object with zips as the keys for the corresponding city names.

Now the problem is, that after the import the reference to the DOM element (e.target) is lost:

if( e.target.dataset.key ) {
  console.log(e.target) // logs the DOM element
  const cities = await import( '../../assets/json/cities' )
  const city = cities[ e.detail.value ]
  console.log('city: ', city) // logs the city correctly
  console.log(e.target) // logs null
}

First I thought that I may have the DOM rerendering (caused by a piece of code that I didn't think of) during waiting for the promise to resolve and that the value got lost there at some point, but this isn't the case.

Maybe this has something to do with my bundler, I don't know (using Parcel.js -> Code splitting).

Any ideas what's going on here??

Help would be greatly appreciated

Getter Jetter
  • 2,033
  • 1
  • 16
  • 37
  • I may be misunderstanding something here, but DOM references are easily broken. Generally when a module or library is imported they have to be retrieved again from the current DOM. – zfrisch Feb 17 '20 at 16:32
  • @zfrisch Hmm could be. thx for the hint. Do you know any article or something where I can read about this? I just googled a little bit but couldn't find anything yet. – Getter Jetter Feb 17 '20 at 16:53

0 Answers0