I have 'npm install -S tabletop' into my vuepress site and I am struggling to either import or require the tabletop module.
I know next to nothing about webpack nor the internals of vuepress (this is nmy first vuepress project)
Building a static website for a friend but planning to use a google spreadsheet to hold current work opportunities and suck the line entries using tabletop.js (https://www.npmjs.com/package/tabletop) into a JSON then filter and loop through to present in a vuepress loop
However, I've failed at step one of this process ... using tabletop.js inside a vuepress container's tag
Hi all, I'm new to vuepress and webpack and I'm getting a headache over trying to use a javascript library. I'm familiar with javascript and writing my own scripts and also loading javascript libraries in raw html websites. But I've really got stuck trying to figure out where the relative path for a require statement should be
I've tried both npm installing and also inserting into the config.js HEAD (which appears in devtools) options 1 and/or 2 below
- install tabletop.js with
npm install -S tabletop
2.add link to config.js' HEAD
module.exports = {
title: 'Starlife Company Services Ltd',
description: 'Cleaning and Security services across the South East',
head: [
['link', { type: 'text/javscript', src: 'https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js' }]
]
}
- add a require in tags in component
<template>
....
</template>
<script>
export default {
name: "cleaning-cta"
};
console.log("script started from inside joblist.vue")
import as sheet from 'tabletop'
var recruitment = "https://docs.google.com/spreadsheets/d/1M7glQxJb31B3lQyKNqum5o-0eDAgKI54VBPUAJomIFM/pubhtml" ;
console.log(recruitment);
var tabletop = sheet.init({
key: '1M7glQxJb31B3lQyKNqum5o-0eDAgKI54VBPUAJomIFM',
callback: showInfo
})
</script>
I've tried various combinations of
import 'tabletop'
Tabletop.init(...)
-or-
require('tabletop')
import as from 'tabletop'
I've tried various relative pathways
'tabletop'
'./tabletop'
'../../tabletop'
'../../node_modules/tabletop'
without no avail all with either a require or an import or a HEAD inserted sript tag
without a path I get
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
return Promise.all(/*! import() */[__webpack_require__.e(20), __webpack_require__.e(29)]).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: ReferenceError: Tabletop is not defined
with a relative path I get ...
client?cae4:159 ./src/.vuepress/components/joblist.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--3-0!/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib??ref--3-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/joblist.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../../tabletop' in '/home/pi/GitHub/starlife-website/src/.vuepress/components'
errors @ client?cae4:159
(anonymous) @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:58
EventTarget.dispatchEvent @ sockjs.js?fb87:170
(anonymous) @ sockjs.js?fb87:887
SockJS._transportMessage @ sockjs.js?fb87:885
EventEmitter.emit @ sockjs.js?fb87:86
WebSocketTransport.ws.onmessage @ sockjs.js?fb87:2961
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
return __webpack_require__.e(/*! import() */ 20).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: Error: Cannot find module '../../tabletop'
Every variation of the path both for import or require seems to end up in the same two errors:
- Error: Cannot find module '../../tabletop'
-or-
- Reason: ReferenceError: Tabletop is not defined
After several hours I'm lost ... spent hours googling for examples none of which are based within vuepress and none have been helpful
With Insuffiicent knowledge to poke through webpack, and running out of alternatives my project has hit a wall and I cannot see my way around.
Any ideas are much appreciated
Current state of project can be found at https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc
See above and also in thes commit
https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc
- Error: Cannot find module '../../tabletop'
-or-
- Reason: ReferenceError: Tabletop is not defined
I know I'm probably doing something dumb here but cannot figure it out nor can I find any help for anything remotely like this inside a vuepress component.
