Below is my dispatcher code
var Dispatcher = require("flux").Dispatcher;
var assign = require("react/lib/Object.assign");
var AppDispatcher = assign(new Dispatcher(), {
handleViewAction: function(action){
console.log('action', action)
this.dispatch({
source: 'VIEW_ACTION',
action: action
})
}
});
module.exports = AppDispatcher;
gulp is not starting it is throwing error
Error: Cannot find module 'react/lib/Object.assign' from '/Users/shanky-munjal/projects/testFlux/src/js/dispatchers'
at /Users/shanky-munjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/Users/shanky-munjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/shanky-munjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/Users/shanky-munjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/shanky-munjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /Users/shankymunjal/projects/testFlux/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)
I am using react 15.2.1
use Object.assign
A long time ago Dan Abramov wrote:
This is a gentle reminder that require('react/lib/SomeInternalModule')
in your component will break in some release regardless of semver.
npm install object-assign --save
this code will work
var assign = require("react/lib/Object.assign");
this code instead of
var assign = require("Object-assign");
Related
I am trying to replace bower in my repo and I am having trouble replacing this package: "jsTimezoneDetect": "1.0.4". The suggested package to replace this is "jstimezonedetect": "^1.0.6". I am using this package as shown here:
var missionJoin = {
timeZoneId : jstz.determine().name()
};
This however, gives me this error:
ReferenceError: Can't find variable: Intl in node_modules/jstimezonedetect/dist/jstz.js (line 124)
get_from_internationalization_api#node_modules/jstimezonedetect/dist/jstz.js:124:22
determine#node_modules/jstimezonedetect/dist/jstz.js:412:67
joinMission#app/scripts/controllers/robo.profile.ProfileServiceCtrl.js:1:27975
test/specs/robo.profile.profileServiceCtrl.spec.js:151:27
<Jasmine>
This package does not have any dependencies and the error seems to come from a problem in the package itself. Is there something I am doing wrong here? Has anyone else faced a similar issue? Any help would be greatly appreciated!
For anyone who might face this problem in the future, here is how I got around this issue:
Found in the last paragraph of https://github.com/iansinnott/jstz
export function findTimeZone() {
const oldIntl = window.Intl
try {
window.Intl = undefined
const tz = jstz.determine().name()
window.Intl = oldIntl
return tz
} catch (e) {
// sometimes (on android) you can't override intl
return jstz.determine().name()
}
}
and
var missionJoin = {
timeZoneId : findTimeZone()
};
I use var child = require("child_process").execFile; to run an external .exe file. When i run the app in debug mode everything runs smoothly. When i build and pack the application then it throws the following error.
Uncaught TypeError: (0 , a(...).execFile) is not a function
My code:
var path = require("path");
export function silentPrintPDF(htmlString) {
var child = require("child_process").execFile;
var executablePath = path.join(
__dirname,
"extraResources",
"ElectronPrinter.exe"
);
var parameters = [htmlString];
child(executablePath, parameters, function(err, data) {
console.log(err);
console.log(data.toString());
});
}
I pack the app with the following command:
"electron:pack": "yarn build && electron-builder build -w"
From my comment, the answer ended up being to use window.require to prevent it getting confused between Electoron's require and Browserify's require.
Source
I get this JavaScript error when running any version of wkhtmltopdf with patched Qt:
Warning: undefined:0 Error: [$injector:modulerr] Failed to instantiate module ng due to:
'undefined' is not an object
http://errors.angularjs.org/1.5.7/$injector/modulerrp0=ng&p1='undefined'%20is%20not%20an%20object
(I'm trying to render a page with angularjs 1.5).
When I use a version of wkhtmltopdf without patched Qt I don't get the error and everything works fine.
I use this heroku buildpack which installs version 0.12.3 with patched Qt, and I got this error.
Any idea how to solve my problem? I may install wkhtmltopdf without patched Qt on production but it seems I will have to compile it...
I finally managed to make it work with all versions: I needed a special version of the .bind() JavaScript function polyfill:
var isFunction = function (o) {
return typeof o == 'function';
};
var bind,
slice = [].slice,
proto = Function.prototype,
featureMap;
featureMap = {
'function-bind': 'bind'
};
function has(feature) {
var prop = featureMap[feature];
return isFunction(proto[prop]);
}
// check for missing features
if (!has('function-bind')) {
// adapted from Mozilla Developer Network example at
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
bind = function bind(obj) {
var args = slice.call(arguments, 1),
self = this,
nop = function() {
},
bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
};
nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
bound.prototype = new nop();
return bound;
};
proto.bind = bind;
}
I am developing a web app with Angular 2, typescript, nodejs and Visual Studio. I want to read a file located in my wwwroot folder. so far I have created the following class:
///<reference path="../../node_modules/angular2/ts/typings/node/node.d.ts"/>
export class LoadConfigurationService {
fs: any;
constructor() {
this.fs = require('fs');
let data = this.fs.readFileSync('input.txt');
}
}
The problem is that I always get the error "readFileSync is not a function". I have tried to install the node file system module by adding the following line
"file-system": "^2.2.1"
to my package.json dependencies. I've also added
"node.TypeScript.DefinitelyTyped": "2.8.8"
to my project.json dependencies. But it keeps giving me the same error. What am I doing wrong?
Your code works for me, such as it is. What error are you getting? Here's the (slightly amended) ts:
declare var require: any;
export class LoadConfigurationService {
fs: any;
public data: string;
constructor() {
this.fs = require('fs');
this.data = this.fs.readFileSync('input.txt').toString();
}
}
const obj = new LoadConfigurationService();
console.log(obj.data);
Run this through tsc v1.8.7 produces:
"use strict";
var LoadConfigurationService = (function () {
function LoadConfigurationService() {
this.fs = require('fs');
this.data = this.fs.readFileSync('input.txt').toString();
}
return LoadConfigurationService;
}());
exports.LoadConfigurationService = LoadConfigurationService;
var obj = new LoadConfigurationService();
console.log(obj.data);
Run this with a suitable input.txt (consisting of "File Contents", for me) in the local directory and get:
$ node temp.js
File Contents
Possible problems
There are a couple issues I can see that might get in your way.
The code depends on the native node fs, not "file-system": "^2.2.1"
The worth of the referenced npmjs library aside, you are invoking the native fs library.
Don't require a dependency inside a constructor.
Dependencies for objects is a problem and worth reading about, but this is not a good way to handle it. fs should be immutable, so there's no advantage to requiring it each time the object is constructed. Just one line at the top of the file will do:
const fs = require('fs');
fs inside Angular?
I'm not sure what the snippet has to do with Angular, but if this code is getting webpacked or browserified things will become difficult. fs is for file system access and bundling that into the browser will not end well.
I have
import fs from 'fs'
and in my package.json I have
Then I run the command
> npm i fs
> fs#0.0.2 node_modules/fs
next in my React store I import 'fs' module
import fs from 'fs'
However when I try to use fs
I don't see methods except for constructor and a few other __methods. I don't see the method createReadStream or any other file manipulation methods.
Does anybody know what is wrong? (using Webpack) and can give more information upon request, but I am getting this far...
ps: why is it that I can npm i fs --save when I read on other posts that I do not have to do that (using node 5.5.0)
import Reflux from 'reflux'
import AddItemActions from '../actions/AddItemActions'
import request from 'superagent-bluebird-promise'
import fs from 'fs'
var ImageStore = Reflux.createStore({
init(){
.
.
.
},
decryptImage(file) {
var reader = new FileReader();
var info = {}
reader.onload = (output) => {
debugger
request.post("https://camfind.p.mashape.com/image_requests")
.set("X-Mashape-Key", "KEY")
.set("Content-Type", "application/x-www-form-urlencoded")
.set("Accept", "application/json")
.send({'focus': { 'x': 480}})
.send({'focus': { 'y': 640}})
.send({'image_request': {'altitude': 27.912109375}})
.send({'image_request': {'language': "en"}})
.send({'image_request': {'latitude': 35.8714220766008}})
.send({'image_request': {'locale' : "en_US"}})
.send({'image_request': {'longitude': 14.3583203002251}})
.send({'image_request': {'image': fs.createReadStream("/path" + 'file.jpg')}})
.then(function (result) {
console.log(result.status, result.headers, result.body);
this.info = result
},
function(error) {
console.log(error);
})
}
reader.readAsDataURL(file);
return info
},
.
.
.
.
})
In create-react-app they have stubbed out 'fs'. You cannot import it.
They did this because fs is a node core module.
You'll have to find another solution to that problem. See this ticket.
It's possible this might be an environment issue. It's not possible for the browser to interpret and run some Node server-side modules like fs.
The solution is to run the fs methods in a Node environment (server-side) or to find a package which offers the same functionality but written for the browser.
It's discussed in this question...
Module not found: Error: Cannot resolve module 'fs'
And this question...
Use fs module in React.js,node.js, webpack, babel,express
npm i babel-plugin-preval
Though browser does not allow accessing file system during runtime, You can use prevail in React to read content from file system into memory during build time
like so
// loading content of text file into react project during build time.
// which means everytime text content is changed, you need to rebuild the project to get the updated content.
const greetingContent = preval`
const fs = require('fs')
module.exports = fs.readFileSync(require.resolve('./greeting.txt'), 'utf8')
`
console.log(greetingContent);