Adding 3rd party JS libs to Webpack/Grails/Gradle project

Question

I am trying to get my head around the use of webpack in combination with gradle in an intellij environment using vue.js as the client-side JS engine.

I started by building a new grails project using the vue profile:

grails create-app foobar --profile=vue

Initially, I had problems integrating a new xyz.vue main screen with the vue library, so I cheated by cloning the Welcome.vue file that is created by the profile and hacking this until it met my needs.

Unfortunately, I am now at the stage where I want to add a new js library: https://github.com/amsik/liquor-tree.

I have attempted to install it using npm, as advised, but I can’t find a way of including it in my '.vue' file. Each time I try, the js runtime tells me that it is unable to find either the Vue class or vue-tree. I believe that webpack combines all of the npm-managed js modules into a file named bundle.js, but I can't find anywhere that that file is included, so it's all bit of a mystery.

My webpack.config.js is as shown below:

var path = require("path")

module.exports = {
    "entry": "./lib/index.js"
,   "output": {
        "path": __dirname + "/build"
    ,   "filename": "xxhash.js"
    ,   "library": "XXH"
    ,   "libraryTarget": "umd"
    }
}

================== Edit by andy:

Fatih, my bad, I know, but the issue was not in the import side of things. This was all working fine - I successfully did an

import LiquorTree from 'liquor-tree'

in my main.js. When I attempted to add node_modules and its variants to the path as you suggested, I got a file not found error, so I reverted to the form with no path prefix which worked just fine. This is as documented in the liquor-tree README - at the link that I provided.

To tidy things up I cleared everything down and started again from the beginning - lo and behold, it worked as it was meant to.

Even though your answer didn't actually solve the problem, I think I'll have to mark yours as the correct answer. I don't really want to lose my hard-earned reputation points, but it's my own fault, for not making the question clearer. Ho hum :'( Older and wiser.

Answer 1

Instead of doing this in the Webpack config, you should import the third party library in your component. See the snippet below.

<script>
  import thirdPartyLibrary from '../../node_modules/library-name/dist/library';
</script>

Make sure to update the path to the node_modules folder for your project.