Dependency was not found using a npm package

twin322

I wanted to use the npm nomnoml package in Quasar and got an error during build.

This dependency was not found: fs in ./node_modules/nomnoml/dist/nomnoml.js
To install it, you can run: npm install --save fs

my script part of the page looks like this:

<script>
var nomnoml = require('nomnoml');
var src = '[<start>st]->[<state>plunder]'
export default {
  mounted(){
    console.log(nomnoml.renderSvg(src)); 
  }
}
</script>

Did i miss something? I’ve read that is has to do something with webpack and that i have to add something like…
node: {
fs: ‘empty’
}

I hope you can help

benoitranque

you should be using ES6 import instead of require

twin322

ok thanks. i’ve changed to import * as nomnoml from ‘nomnoml’;
Now i got an WEBPACK_IMPORTED_MODULE_0_nomnoml__.color255 is not a function :). I should say that i’ve also got this error by using require()

It could be that I’m just to stupid to use this library

btw. the fs error i solved with
extendWebpack (cfg) {
cfg.node = {
fs: ‘empty’
}
}

a47ae

Hey, from looking at the package source (I assume it is this one https://github.com/skanaar/nomnoml) my guess is that for waht ever reason webpack loads the cli version.
There are two releases, one for the web and one for nedjs and the cli: https://github.com/skanaar/nomnoml/tree/master/dist

In your error it says This dependency was not found: fs in ./node_modules/nomnoml/dist/nomnoml.js
This means that webpack tries to resolve the fs package, which is a default package for nodejs to access the filesystem and which is not usable in the browser, only in nodjs apps.

The strange thing is that the path in the error points to the non cli version.

Also your use of import is wrong. import * as ...is used when multiple exports are defined on the package. In this case you should use import nomnoml from 'nomnoml' .
Please try and report if this fixes the error.

P.S.: This forum supports markdown. If you want to post code blocks, please escape them with thre backticks (```) at the beginning and at the end of the code block

twin322

Hi,

thanks for your help I changed my code and think that it’s nearly correct.

import nomnom from 'nomnoml'

export default {
  name:"App",
  methods:{
    click(){
      var canvas = document.getElementById('target');
      var src = '[nomnoml] is -> [awesome]';      
      nomnom.draw(canvas,src)
    }
  }
}

There is just one error left
Error in event handler for "click": "TypeError: _.object is not a function"

I’ve tried the same code in a simple vue template from this git account
https://github.com/vuejs-templates/webpack and it works, but in quasar I encounter the error.

a47ae

_.object is not a function looks like it is referring to underscore.js which is a dependency of nomnoml.
Do you happen to include underscore.js as dependency on your project? Maybe it is a version mismatch

twin322

Due to this problem I just created a new quasar project for testing, which has no underscore.js as a module dependency. I will take a closer look into the dependencies of the template from the repo and the .quasar deps. Maybe I’ll find some difference.
I’ve just noticed the lodash dependency… I will look into that

twin322

Ok i solved the problem by downgrading the lodash package using
npm install lodash@3.7.0
I hope this will not interfere with some other quasar functionalities
Now it’s working fine and i can use the package.

thanks for your help

rstoenescu

Quasar doesn’t uses lodash, so you’re safe with whatever version that you need.

No More Posting New Topics!

Dependency was not found using a npm package