Window is not defined while importing an npm package? - node.js

I'm trying to learn how to create and publish an npm package.
I have created an npm package, https://github.com/nitte93/OnBoarding
for my learning purpose.
https://www.npmjs.com/package/onBoarding
It works fine in dev build, but when I try to import it in my isomorphic react app, I get : ReferenceError: window is not defined
I have not made any explicit use of the window object in the package, but there are places where I have explicitly use jquery.
Now, I am not sure but all I understood was, that while importing this npm package in my isomorphic app, I'm trying to use the window object in NODE environment, which I assume is wrong since window object is only accessible on the browser side.
My question is how do I handle this.
1) Do I need to handle this in my npm package itself.
2)Should I handle it in my Isomorphic app? How?
Please answer or point to a right resource to solve this issue.

I looked through your repository, and the only thing I think could be the culprit is that the semantic-ui vendor js files are required in the OnBoarding.js component, which I assume is also a server rendered file. You need to instead require those packages that only run on the browser inside the client file (the one that will call ReactDom.render().. I think it's /src/example/index.js).
Also, as a rule of thumb don't put any browser specific code in componentWillMount, as that does get called on the server. componentDidMount is safe, though, as it's only called in the browser.

Related

Openlayers node module only works with client side rendering. Why?

I initialized a brand new Next.js project and installed the official openlayers module (https://github.com/openlayers/openlayers) with npm in it.
But as soon as I import it in one of the src js files, I get some error like this: Unexpected token 'export'
The only way I got it working is by telling Next.js to not use that src file on the server side.
I understand that it only wants to work with client side rendering.
Can anyone explain to me, why is it only working like that?
What is different in this module that prevents it from using it with the default ssr settings?
OpenLayers got full node.js support since I posted my question, so with that it become obsolete.
Find more about it on their GitHub repo.

How can I use the node.js v8 module in a react app?

I'm trying to use the serialization API from the node.js v8 module in my react app (created with create-react-app) but it doesn't seem to work.
According to the documentation it should just be a case of importing/requiring the module. When I try this, it all appears to be working as expected - no errors. I can even access methods like .serialize() and .deserialize() on the v8 object too - great. But when I try to actually run my project (using react-scripts start) I get a compilation error:
Module not found: Can't resolve 'v8' in '...'
Is it looking for a file called "v8.js" to import rather than using the node module for some reason? How do I get around this?
node_modules is only a concept when working within the node ecosystem. So it is only possible to import "v8" when within a node process.
Since you ask about a "react app" that seems to imply that you are writing something for the browser. Which now has modules which use import/export (similar to require/module.exports from node), however, that still doesn't mean that the "v8" package will be present.
Many of node's packages are C++ backed (or to use the technical term, they are "native packages") instead of being purely written in JS. Also, it should be noted that unlike dependencies listed in your "package.json" file, none of the node packages are actually downloaded when you run npm install since they are all bundled with your installation of node.

Making a web extension app, how to include npm?

I am currently working on making a web extension application(chrome app) and I want to use npm in my application. When I want to use npm on my computer, I had to simply download and install it on my computer. But if I want to put it into my application, I am not sure how to include this.
Like bootstrap, do I need to include a min.js file such as bootstrap.min.js?
(what I want to do with npm is to make a crawling to happen using cheeriojs!)
Is there anyone who knows how to include npm in this case?
Thanks in advance!! Any advice would be much appreciated! :)
npm is a package management tool. It has no place being in a Chrome extension.
If you want to use packages from NPM in a browser extension, then you'll typically want to use a tool like Webpack to transpile them from module format into a single ES5 file.
Note, however, that cheeriojs is:
Fast, flexible & lean implementation of core jQuery designed specifically for the server.
… and since you want to run this in a browser, you should probably just use jQuery!

packaging node.js modules with more than code

I'm putting together a module I'd like to release, but am a bit stuck on how best to go about packaging it up. In addition to server side javascript, the module will need things like an admin screen, and client side javascript files. That is, it needs to serve out a fixed set of static html/css/js files. (I may have the node-static module as a dependency)
I'm curious what is the best way to handle this. I'd like to make this simple to install and integrate into apps, without forcing the user to dig through a long README. Basically they should be able to NPM the module, then add a line or two of code in the relevant place, and have it "just work". I don't want them to have to download other stuff, tell the module where to find the static files, etc.
Also, I'd like to make sure it can be included in both simple apps (i.e. one step from the standard "hello world") as well as complex apps using frameworks etc like Express, without undue hassle.
Is this possible, or is this beyond the scope of what the module system is designed to handle?
Once your package in installed with npm install mypackage -g you can use __dirname inside your executable to find the directory it's running in.
Likely /usr/local/lib/node_modules/mypackage/bin/mypackage
With your assets in /usr/local/lib/node_modules/mypackage/assets
so __dirname + '../assets' + myasset should correctly find your asset

Has there been any work done towards running Objective-J code in a node.js process?

More specifically, I'm looking to serialize plist's from string data within a node.js process and send them in a request.
For example:
var data = [CPPropertyListSerialization dataFromPropertyList:dict format:CPPropertyListXMLFormat_v1_0 errorDescription:errorString];
Narwhal has a module for this . I was just wondering if someone had done the same for node.js.
Your title is a bit confusing, in case you want to load .plist files as JavaScript Objects you could take a look at the the node-plist module.
I tried to install it via npm but one of its dependencies needs some additional stuff in order to compile. You should take a look at the README of libxmljs and make sure you got everything that's required installed before installing it via npm.
check out https://bitbucket.org/clbruno/objj-node

Resources