将function导入js文件后VueJS报错

Question

I have made a js script that allows me to send data to a database and I would like to import it into my.vue file so that I can use it when I click on a button. The problem is that Vue is showing me this error when I have the script imported and nothing is displayed on the page:

warning  in ./src/views/Journal.vue?vue&type=script&lang=js&

"export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Journal.vue?vue&type=script&lang=js&'

my js script:

const mysql = require("mysql");

async function main(userID, text) {
  const connection = mysql.createConnection({
    host: "",
    user: "",
    password: "",
    database: "",
  });
  connection.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
    var sql = `INSERT INTO 'journal' ('userID', 'journalTXT') VALUES ('${userID}', '${text}')`;
    connection.query(sql, function (err) {
      if (err) throw err;
      console.log("1 record inserted");
      connection.destroy();
    });
  });
}
main();

my vue page:

<template>
  <div class="about" v-if="!$auth.isAuthenticated">
    <h1>Bienvenue sur ton journal</h1>
    <h2>Continue d'écrire ce qu'il te passe par la tête</h2>
    <v-container fluid>
      <v-row>
        <v-col cols="7" sm="12">
          <v-form>
            <v-textarea
              id="textarea"
              counter
              placeholder="Commence à écrire quelque chose ici "
              label="Mon journal"
              v-model="journal_txt"
            ></v-textarea>
          </v-form>
        </v-col>
      </v-row>
      <br />
      <v-btn elevation="2" x-large v-on:click="dataExport(journal_txt)"
        >Sauvegarder mon travail</v-btn
      >
    </v-container>
  </div>
</template>
<script>
import main from "@/sendToDB.js";
module.exports = {
  data: function () {
    return {
      journal_txt: "",
    };
  },
  methods: {
    dataExport: function (txt) {
      main.main("1", txt);
    },
  },
};
</script>

If anyone has the solution, I'll gladly take it;)

Answer 1

You trying load NodeJS script from the client via VUE, its impossible because vue is rendering in the client only.

you should consider use Nuxt.JS

https://nuxtjs.org

Via nuxt you can create server middleware and use the connection via axios or $http to your api middleware in order to update your database.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware

Hope its helped.