Module not found: Error: Can't resolve 'shacl-vue' in 'src/components'

[venkateshhs]

Getting Module not found: Error: Can't resolve 'shacl-vue'.
Steps to reproduce:

1. create venv
2. npm install https://github.com/psychoinformatics-de/shacl-vue.git
3. cd node_modules/shacl-vue
4. npm run build
5. cd ../..
6. npm run serve

This leads to the above error.

case-e currently uses vue.config.js , which leads to :Module not found: Error: Can't resolve '@/modules/namespaces' error.
Tried to fix this by configuring vue.config.js as

configureWebpack: { resolve: { alias: { "@": path.resolve(__dirname, "src"), "shacl-vue": path.resolve(__dirname, "node_modules/shacl-vue/src"), }, extensions: [".js", ".vue", ".json"], }, },

Also tried various import formats
import ShaclVue from "shacl-vue"; import { useShapeData } from "shacl-vue";

and
import ShaclVue from "shacl-vue/src/index.js"; import { useShapeData } from "shacl-vue/src/composables/shapedata.js";

[jsheunis]

Thanks @venkateshhs. This gave the necessary kickstart I needed to figure out how to build and distribute shacl-vue for use in an other applications. For context, this was previously explored in #70, and I have now made several more changes to get things working. I will push updates soon, and will update here. In the mean time, I have pushed the built distribution files to npm, so it can be installed with

npm install [email protected]

I can confirm that with some configuration I could locally import the necessary functionality from shacl-vue (installed from npm in a new clean environment) into a new project, and use it in a new component in order to get all shacl shapes from a config-provided schema url.

Here's the component code example:

<template>
    
</template>


<script setup>
    import { useShapeData } from 'shacl-vue';
    import { onMounted } from 'vue';

    const config = {}
    config.value = {}
    config.value.shapes_url = "dlschemas_shacl.ttl" // this could also be a remote URL that the server allows to be fetched

    const {
		getSHACLschema,
		shapesDataset,
        nodeShapes,
        propertyGroups,
        nodeShapeNamesArray,
        shapePrefixes,
        prefixArray,
        prefixes_ready,
        nodeShapeIRIs,
        nodeShapeNames,
		serializedData,
        page_ready
    } = useShapeData(config)

    onMounted( async () => {
        await getSHACLschema()
    })

</script>

The getSHACLschema function will internally print the retrieved shacl shapes to the console, so one can inspect that to see if the process as successful.