CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Marina
Marina

Reputation: 1

How to inset <script> into div in nuxt

Maybe someone came across such a problem and can suggest how to solve it: I need to insert the script into a special div. And this script changes the DOM. Insets block, adds classes and styles. It is external script and it renders this page. There is no problem in Vue. then Nuxt throws errors. can someone suggest what to do about it?)

error:

nuxt-error.vue?48f2:14 Uncaught TypeError: Cannot read property 'accept' of undefined at eval (VM6157 nuxt-error.vue:14) at Object../node_modules/vue-style-loader/index.js?!./node_modules/@nuxt/webpack/node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:437) at a (app.js:2) at eval (VM6156 nuxt-error.vue:2) at Module../.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:119) at a (app.js:2) at eval (VM6151 nuxt-error.vue:4) at Module../.nuxt/components/nuxt-error.vue (app.js:95) at a (app.js:2) at eval (VM6142 index.js:35)

<template>
    <div class="skin" ref="scriptHolder">
      <div id="hwm-ubs-ticketsystem" data-id="757d440c95b9539fd9f79b8407fb8e9fe23b23315cfe6085">      </div>
    </div>
</template>

<script>

export default {
  components: {
  },
  mounted() {
    let scriptEl = document.createElement('script')
    scriptEl.src = 'https://site/assets/js/app.js'
    scriptEl.type = "text/javascript"
    let styleEl = document.createElement('link')
    styleEl.setAttribute('href', 'https://site/assets/css/app.css')
    styleEl.setAttribute('rel', 'stylesheet')
    const divEl = document.querySelector('#hwm-ubs-ticketsystem')
    this.$refs['scriptHolder'].insertBefore(styleEl, divEl)
    this.$refs['scriptHolder'].appendChild(scriptEl)
  }

}
</script>

<style>

</style>

Error Screenshot

Upvotes: 0

Views: 716

Answers (1)

Zeljko Nesic
Zeljko Nesic

Reputation: 1

You can check if problem is with webpackJson default name. Nuxt uses webpack 4 version and maybe your external script uses webpack 4 also, so webpackJson is populated by nuxt first and then with external script and there is a conflict when running so you can change default name for you nuxt project with jsonpFunction: 'webpackJsonp_name', and then your external script should load webpackJson default.

Upvotes: 0

Related Questions