Importing and using external js libraries in quasar

Kageyasha

As the topic says, I want to use a external js library (CodeMirror) in a component. The library consists multiple .js and .css files.
My Component :

<template>
  <div>
    <textarea name="cmds" id="cm"></textarea>
  </div>
</template>

<script>
import codemirror from '../../src-extern/codemirror/codemirror.js'
var editor = codemirror.fromTextArea(document.getElementById('cm'), {
  lineNumbers: true,
  autofocus: true,
  extraKeys: {
    'Ctrl-Space': 'autocomplete'
  }
})
export default {
  // name: 'ComponentName',
  data () {
    return {}
  },
  methods: {
    getCodeMirrorValue () {
      return editor.getValue()
    }
  }
}
</script>

<style>
  #cm {
  border-style:solid;
  resize: none;
  height: 44vh;
  width: 100vw;
  }
</style>

But after starting my quasar/electron app I receive the following error :

 ./src/components/CodeMirror.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/CodeMirror.vue?vue&type=script&lang=js&) 2:13-23
"export 'default' (imported as 'codemirror') was not found in '../../src-extern/codemirror/codemirror.js'

The path is right and I know there is an npm package for codemirror but Im not able to use it due to some restrictions.
Is there something im missing?

qyloxe

@Kageyasha you can add this to your package.json in “dependencies” section:

“vue-codemirror”: “^4.0.6”,

It is a Vue wrapper for CodeMirror and it works quite OK.

Kageyasha

@qyloxe I would but unfortunately im not allowed to add any npm packages anymore due to some restrictions. I need to use the regular .js files

qyloxe

@Kageyasha said in Importing and using external js libraries in quasar:

@qyloxe I would but unfortunately im not allowed to add any npm packages anymore due to some restrictions. I need to use the regular .js files

vue-codemirror is open source and just a wrapper for codemirror itself. You can copy their code into your js files and maintain it yourself. Basically you need a wrapper component and this is what their component does. I assume you’re familiar with wrapper components:
https://vuejs.org/v2/examples/select2.html

Kageyasha

@qyloxe So is there no other way to import the required files from codemirror into my vue project(10x js files,4 css files) except using npm or building my own wrapper component? I know this is a very strange problem/request since its so easy to get it working with vue-codemirror… But the guy, who requested that kind of project doesnt want more npm modules into the project and I cant convince him.
Somewhere I read that I can just link the “.js” files into the index.html of my vue/quasar project.
Like that :

<!DOCTYPE html>
<html>
  <head>
    <title><%= htmlWebpackPlugin.options.productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">  
    <link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
    <script src="../src-extern/codemirror/codemirror.js"></script>
      <link rel="stylesheet" href="../src-extern/codemirror/codemirror.css">
  </head>
  <body>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
  </body>
</html>

But after starting the APP (without using the library somewhere at all) I receive following error :

(index):1 Refused to apply style from 'http://localhost:8080/src-extern/codemirror/codemirror.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

codemirror.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

(index):1 Refused to execute script from 'http://localhost:8080/src-extern/codemirror/codemirror.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

(index):1 Refused to apply style from 'http://localhost:8080/src-extern/codemirror/codemirror.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Its an electron/quasar project btw. Maybe someone got a nice idea/workaround on how to get it into my project?

patryckx

It is not recommended to develop projects this way. But here is a solution I used to import files that I downloaded locally into the project.

I put in my statics folder my js files, and imported it into template.html

this way the webpack can solve the “statics” directory for me automatically

No More Posting New Topics!

Importing and using external js libraries in quasar