timkendrick / monaco-editor

CommonJS/Webpack compatible Monaco editor
MIT License
60 stars 7 forks source link

Got "URL is not defined" with nuxt.js #7

Closed wspl closed 6 years ago

wspl commented 6 years ago
{ ReferenceError: URL is not defined
    at Object.defineProperty.value (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:2770140)
    at t (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:417)
    at Object.<anonymous> (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:2769782)
    at Object.e.exports.URL.createObjectURL.Blob.type (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:2770101)
    at t (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:417)
    at Object.defineProperty.value (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:765)
    at /Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:776
    at n (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:143)
    at Object.<anonymous> (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/@timkendrick/monaco-editor/dist/standalone/index.js:1:255)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at r (/Users/Plutonist/Documents/Projects/dyno-web/node_modules/vue-server-renderer/build.js:8147:16)
    at Object.<anonymous> (server-bundle.js:3635:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 962c8b90977c0a5be2a9:25:0)
    at Object.55 (pages/project/dev.vue?6cc8:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 962c8b90977c0a5be2a9:25:0)
    at Object.50 (pages/project/dev.vue:1:0) statusCode: 500, name: 'ReferenceError' }

Here are my vue component code:

<template>
  <div class="dev page">
    <div class="code editor">
      <div class="code editor container"></div>
    </div>
  </div>
</template>
<script>
  import * as monaco from '@timkendrick/monaco-editor'

  export default {
    layout: 'project',
    name: 'dev-page',
    async mounted() {
      console.log(monaco)
    }
  }
</script>
wspl commented 6 years ago

Solution: import editor by require on mounted method

<template>
  <div class="dev page">
    <div class="editor">
      <div class="editor container" ref="editor"></div>
    </div>
  </div>
</template>
<script>
  // import * as monaco from '@timkendrick/monaco-editor'

  export default {
    layout: 'project',
    name: 'dev-page',
    async mounted() {
      const monaco = require('@timkendrick/monaco-editor')
      console.log(this.$refs.editor )
      const editor = monaco.editor.create(this.$refs.editor, {
        value: `console.log('hello world')`,
        language: 'javascript'
      })
      console.log(editor)
    }
  }
</script>