Currently in the process of building a web app using ReactJs and the Fluxible architecture. While trying to integrate the React-daterangepicker module into my project, I have encountered the following error of which I cannot trace the origin.
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
Here's my DatePicker Component, I have followed the github demo and done exactly the same steps.
'use strict';
var React = require('react/addons');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
import DefaultMixin from '../mixins/DefaultMixin';
module.exports = React.createClass({
mixins: [DefaultMixin],
render() {
return (
<DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
<div>Click Me To Open Picker!</div>
</DateRangePicker>
);
}
});
What could be causing this error? Googling it gave no result and I've been struggling with it for the past hours.
It seems like the react-bootstrap-daterangepicker module needs jQuery to be available globally as $. Try including jQuery on the page before you load the module.
TL;DR: this isn't a react problem, you need to load jQuery BEFORE loading your react files.
Lets deconstruct your error message:
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
I'm mostly interested in the first part Cannot set property 'daterangepicker' of undefined...
This is happening because $.fn is returning undefined.
Try This:
immediately before you require react, you should require jquery:
var $ = require('jquery');
var React = require('react/addons');
Related
I have React.js project that needs to convert to a Next.js
This project has a file data-pulse-provider.js
import { logMessage, } from './helpers';
import $ from 'jquery';
require('signalr');
window.jQuery = $;
var DataPulseProvider = /** #class */ (function () {
//...
}());
export { DataPulseProvider };
Here I am getting an error
Error: jQuery was not found. Please ensure jQuery is referenced before
the SignalR client JavaScript file.
I think this window object is not available all the time in next.js. The solution I found was use dynamic imports with SSR false and then use useEffect to window object-related code. But this is a pure js file hence I can't use the useEffect or something like that. So how can I fix this issue?
Any help!
Thanks in advance.
Hey I am doing a small project using react-app and I
have been trying all day to create export for this module.
I have installed it with npm, and i want to edit it so i can import and use it in my app.js
I have tried to define "reddit" using class\function\let and use either:
export default
module.exports
And either
import reddit from 'reddit.js';
var reddit = require('reddit.js');
And trying to check with a simple function from the module:
console.log(reddit.hot('cats'));
But I am still getting:
Uncaught TypeError: reddit.hot is not a function
I am a bit lost, what am I doing wrong?
The module uses window.reddit global variable. Don't override it!
So if you are on client side, just use:
require('reddit.js')
//...
reddit.hot('cats')
For server side - you have to do some trick to make it work, because on server side you don't have 'window' global variable.
Upd:
Example of back end usage:
const window = {};
const r = require('./reddit.js') // You don't really use r
const reddit = window.reddit;
reddit.hot('cats')
Reddit does not export anything because it was mainly designed to be added as a script tag!
// So for CommonJS module:
require('reddit.js');
//And for ES6 modules
import 'reddit.js';
And you you will be able to access reddit and reddit.hot() method through the window object.
Uncaught SyntaxError: Unexpected token <
Iam getting the above error when I am trying to integrate REACT with my existing backbone project. So i follow the **react.backbone** plugin. i included below library in my lib folder and call it in config.js file
"react": "libs/react.min",
"react.backbone": "libs/react.backbone",
"react-dom": "libs/react-dom",
"browser": "libs/browser.min",
Now the below code i add in my backbone view file like below code. But at the time of rendering i am getting the below issue. Could you help me to solve this issue. where i missed what.
'use strict';
define(["jquery",
"backbone",
"common/utils",
"coreModule/views/base.view",'react','react-dom', 'react.backbone','browser'],
function ($,
Backbone,
utils,
BaseView,
React,reactDom,reactbackbone,browser) {
var UserViewComponent = React.createBackboneClass({
render: function() {
return (<div>test</div>);
}
});
var UserView = React.createFactory(UserViewComponent);
var userView = UserView();
// Mount your component directly
React.render(userView, document.getElementById('test'));
});
Thanks in advanced
I've never used React Backbone, but I can see from the GitHub README that the render method is supposed to return JSX, not a plain string.
i.e. Change your render definition to:
render: function () {
return <div>test</div>;
}
Further to that, it's a good idea to follow the advice of the warning and use the non-minified library to help you locate the source of the error.
I've read many recommendations of how it's possible to render routed via react-router components, but I still can't to make it work. I tried to find it using github codebase search, still no luck. And at this point all I need is one working example.
Here is my boilerplate project, but maybe it's not important. I just want to see some react-route unit-testing working example.
I got mine working after I found the super-secret hidden react-router testing guide.
Instead of using Object.assign to create a router stub, I used sinon.js so I could create better stub functions that return the appropriate values for my tests.
EDIT: Went back to look again at your boilerplate and saw that your stub router is borrowed from the same example. Sorry. So where exactly did you get stuck?
EDIT-AGAIN: I'm not using Jest, so here are the other pieces that I needed to solve the testing puzzle:
If you're using browserify, and want to test in plain mocha (without having to build), you'll need to hack require to compile your jsx for you:
var fs = require("fs");
var reactTools = require("react-tools");
require.extensions[".jsx"] = function(module, filename) {
var jsxContent = fs.readFileSync(filename).toString();
var jsContent = reactTools.transform(jsxContent);
return module._compile(jsContent, filename);
};
You need a fake DOM. JSDOM is just plain terrible. I got it working using domino instead.
var domino = require("domino");
global.window = domino.createWindow();
global.document = global.window.document;
//Set the NODE_ENV so we can call `render`.
//Otherwise we get an error from react about server rendering. :(
process.env.NODE_ENV = "test";
Then you can require your components in through the stub-router, and render your components into DOM nodes using React.render():
var MyComponent = fakeRouter(require("./MyComponent.jsx"));
var component = React.render(
< MyComponent / > ,
document.body
);
node = component.getDOMNode();
//I used `zepto-node` and `chai-jq` to assert against my components
The (possbily new in v4) way of doing this is to wrap the component you're testing in the MemoryRouter provided by react-router.
import {MemoryRouter} from 'react-router-dom';
import {render} from 'react-dom';
render(<MemoryRouter>
<YourComponent>
</MemoryRouter>, node, () => {});
I'm currently trying to add Jest tests to a React application (found here).
However, when I run the following test,
/** #jsx React.DOM */
jest.dontMock('jquery');
jest.dontMock('../js/components/CategoryPage.jsx');
describe('Category Page', function() {
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var CategoryPage = require('../js/components/CategoryPage.jsx');
it('renders into the page correctly', function() {
// Render the CategoryPage into the document
var categoryPage = TestUtils.renderIntoDocument(
<CategoryPage params={{"category": "tests"}} />
);
expect(categoryPage).toBeDefined();
});
});
I get the following error:
● Category Page › it renders into the page correctly
- TypeError: Property 'makeHref' of object #<Object> is not a function
at Navigation.makeHref (/home/stephen/reps/node_modules/react- router/modules/mixins/Navigation.js:29:25)
at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17)
at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18)
at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactCompositeComponentMixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14)
at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14)
at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
Both my app and the CategoryPage component specifically use react-router. The CategoryPage contains a mixin which uses react-router for authentication. Based on my own debugging, I have found that the error is occurring when Jest tries to call makeHref, one of react-router's built-in methods for Navigation.
To fix this, I first tried calling jest.dontMock('react-router'), but this did not have any effect. The problem seems to be that, by not mocking CategoryPage, jest will automatically and irreversibly include all of its dependecies, unmocked.
Part of the reason this issue is so difficult to solve is because most people using Jest with React seem to not be testing their components, either because they are not as test-focused or because they are using Flux and only testing Stores, Dispatchers, etc. We are not yet using Flux, so this is not an option for us, but may be something we have to transition to in the future.
EDIT 1: The test passes if I remove the jest.dontMock('../js/components/CategoryPage.jsx') but then it is impossible to actually test the functionality of that component.
EDIT 2: When I exclude jest.dontMock('jquery') I get another error related to the mixin I use to create Modals:
Category Page › it encountered a declaration exception
- TypeError:
/home/stephen/reps/js/components/CategoryPage.jsx:
/home/stephen/reps/js/components/Feed.jsx:
/home/stephen/reps/js/components/InvestmentButton.jsx:
/home/stephen/reps/js/components/Modal.jsx:
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx:
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js:
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined
EDIT 3: I have seemingly isolated the bug to react-router's Navigation mixin, where it calls this.context.makeHref. The React team has deprecated this.context since version .9 so I believe this may be the source of the problems. Thus, any work-around or fix for this.context is welcome.
I went ahead and put together a fix which allows you to still use Jest.
https://labs.chie.do/jest-testing-with-react-router/
I ended up figuring this out with some help from the creator of rackt-router after creating the issue found here: https://github.com/rackt/react-router/issues/465 .
I got around this by using Karma and Jasmine to test my application. I then used the stub function makeStubbedDescriptor found here: https://gist.github.com/rpflorence/1f72da0cd9e507ebec29.