I tried to use browserify to load my node modules to be used in browser. My main.js file depends on fs, cheerio, json-to-xlsx. When i bundle them using browsesrify, it bundles without any error. But when i load the bundled file,it always says cannot find module 'jszip', if i remove that dependency from my main.js and load, it shows same error with 'fs' module.
How do i use it? Or is there any other better loader to be tried to use node_modules on browser. i have tried webpack, wreq.js
this is the error in console
Any assistance is appreciated
The 'json-to-xlsx' module uses 'xlsx' module inside it. The xlsx.js uses 'jszip.js' like 'js'+'zip'. But browserify doesn't work with concatenation, hence you have to manually go and change the require('js'+'zip') to require('jszip').
Similar with the fs module also.
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I have installed vue-star-rating module with npm. I want import this module in my JS file
var StarRating = require('vue-star-rating');
When I hover on 'vue-star-rating' shows full path to module and module also exists in noe_modules folder, but when I run my app in console I get a
ReferenceError: require is not defined
message. I have tried also other methods to import, but it still doesn't work.
import StarRating from 'vue-star-rating'
Also, you will need something like Webpack to compile and create the bundle properly. It will not work without a bundler.
Are you using a compiler to generate a bundle?
You can't reference modules this way as require doesn't exist on the client. You need to use something like fuse-box, webpack, etc. to properly handle the require function and include the modules you're referencing in your client bundle.
I am trying to use select2 version 4.0 in an ampersand-js app - as such that means I am using npm and browserify.
Unfortunately I cannot get select2 to load up.
the js file is being loaded up without error, since I can add a few console.log statements in relevant places and see them output,
but when I try to use select2 I'm getting told it's not defined.
Uncaught TypeError: $(...).select2 is not a function
Here's what I'm trying to do.
var $ = require('jquery');
require('Select2');
$('select').select2();
I have a feeling the issue comes from this line in the select2.js https://github.com/select2/select2/blob/4.0.0/dist/js/select2.js#L14
Specifically that it calls factory(require('jquery')); hence I believe that select2 is loading into a copy of jQuery that is then thrown away?
I found this issue which sounds like it's about the same thing, except I cannot get it to work either: npm browserify version of jquery-select2 version 4.x
So my train of thought was almost correct - it was loading select2 onto the wrong copy of jQuery.
There was two versions of jQuery being loaded.
In my package.json I had listed jQuery as a dependancy, however I wa also loading in the bower version of jQuery via the browser: {"jquery: "./bower_components/.../jquery.js"} key.
It seems that anything outside of the node_modules directory likely uses the "browser" defined module, whereas anything inside the node_modules directory will use the npm loaded module.
Basically, if something similar happens double check that you're not loading in two copies of libraryX.
I would like to ask what is the purpose of using browserify with noparse option set to true (or how browserify works). For instance:
if browserify does not parse files at all, does it means that it will not find require statements?
if it does not find require statements, then how to force code to load module? For instance, I have toastr & jQuery. toastr requires jQuery. But when I used browserify to create a bundle with noparse set to true, and I added to this bundle both files:
var bundler = browserify();
bundler.add('jquery.js');
bundler.add('toastr.js');
bundler.bundle();
then I get the error, that jQuery module it not found.
Normally when you bundle a file with browserify, it parses the file for require() calls so it can build a dependency graph and bundle the required files. The purpose of the noParse option is to skip that parsing when you don't need or want it. For example, if you're bundling a large library file like jQuery and you know it doesn't contain any require() calls that need to be processed, it will save time in bundling if you noParse that file. Also, it's currently difficult to require() a previously browserified bundle when making a new bundle. In that case you can sometimes resolve the issue by setting noParse for the previously browserified bundle.
if browserify does not parse files at all, does it means that it will not find require statements?
Yes.
According to http://www.slant.co/topics/1089/viewpoints/1/~what-are-the-best-client-side-javascript-module-loaders~browserify#9 one of the downside of using Browserify is that:
Not all javascript libraries have an npm version
While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not.
I don't have any experience with npm aside from knowing how to install an existing module. In light of that, what is the easiest/best way to browserify with client-side non-npm libraries?
Is there a way for me to declare a local Javascript file as a dependency, instead of looking it up through npm?
You can use local modules without problems by two ways:
1.Use a relative path to a module in require:
var myModule = require('../js/my-module');
2.Use a module name, but before, you should to add it to browser property in package.json:
package.json:
...
browser: {
my-module: './js/my-module.js'
}
app.js:
var myModule = require('my-module');
Some packages are packages with bower, these can be used with browserify by using the debowerify plugin.
For non-versioned things you can copy them to a lib directory in your project or add them as a git submodule and then configure browserify so that it can find things there too.