electron: Can't load http://localhost:8080 - reactjs

I can load http://localhost:8080 from chrome, but It occur error with win.loadURL('http://localhost:8080/');, and I don't know why.
Error code :
Failed to load resource:localhost:8080 net::ERR_EMPTY_RESPONSE,

My code
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function load() {
mainWindow.loadURL('http://127.0.0.1:8080');
}
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadURL('http://127.0.0.1:8080');
mainWindow.loadFile('index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
});
// In this file you can include the rest of your app's specific main process
And this is package.json
{
"version": "1.0.0",
"name": "idena-pocket",
"private": true,
"main": "public/main.js",
"scripts": {
"dev": "export NODE_ENV=development && webpack-dev-server --https --host 127.0.0.1 --open",
"electron-dev": "concurrently \"BROWSER=none npm run dev\" \"electron .\"",
"electron-dev1": "concurrently \"BROWSER=none\" \"electron .\"",
"electron-dev2": "concurrently \"BROWSER=none npm run dev\" \"wait-on https://10.0.2.2:8080/ && electron .\"",
"electron-package": "./node_modules/.bin/electron-builder -c.extraMetadata.main=build/start-electron.js",
"preelectron-package": "npm run build",
"i18-scanner": "i18next-scanner src/**/*.{js,jsx,ts,tsx,html}",
"format": "prettier-standard --format"
},
"dependencies": {
"react-scripts": "0.8.5",
"bip39": "^3.0.2",
"concurrently": "^6.0.2",
"connected-react-router": "^6.8.0",
"crypto-js": "^4.0.0",
"electron": "^12.0.6",
"electron-builder": "^22.11.1",
"electron-is-dev": "^2.0.0",
"history": "^4.10.1",
"i18next": "^19.4.4",
"i18next-browser-languagedetector": "^4.1.1",
"i18next-scanner": "^2.11.0",
"idena-js": "1.1.5",
"react": "^16.13.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.13.1",
"react-hook-form": "^5.5.3",
"react-i18next": "^11.4.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-tooltip": "^4.2.5",
"redux": "^4.0.5",
"styled-components": "^5.0.1",
"sweetalert": "^2.1.2",
"wait-on": "^5.3.0"
},
"devDependencies": {
"#types/react": "^16.9.25",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/react-router-dom": "^5.1.3",
"#types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"pre-commit": "^1.2.2",
"prettier-standard": "^16.3.0",
"react-hot-loader": "^4.12.20",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"workbox-webpack-plugin": "^5.1.3"
},
"pre-commit": [
"format"
]
}

Related

Gatsby, Prismic - error Building static HTML failed for path "/blog/"

I have a website created using Gatsby v. 3.0.1 and Prismic CMS, and Github Actions for CI/CD. The build of the page on GH is triggered automatically every time content is added/edited on CMS.
Blog posts on the website are generated dynamically with gatsby-node.js createPage function:
const blog = require.resolve(
`./src/components/features/blog/post/PostDetails.tsx`
);
const result = await graphql(`
{
allPrismicBlogPost {
edges {
node {
lang
tags
data {
link {
text
}
}
}
}
}
}
`);
result?.data?.allPrismicBlogPost?.edges?.forEach(({ node }) => {
createPage({
path: `/blog/${node?.data?.link?.text}/`,
component: blog,
context: {
link: node?.data?.link?.text,
},
});
});
Couple of days ago after adding a new blog post the build failed with following error:
error Building static HTML failed for path "/blog/"
SyntaxError:Unexpected number in JSON at position 183
- JSON.parse
- render-html.js:58 readPageData
[website]/[gatsby]/dist/utils/worker/render-html.js:58:15
- render-html.js:266 async _bluebird.default.map.concurrency
[website]/[gatsby]/dist/utils/worker/render-html.js:266:24
Now every time I try to add new post the build fails, and the only way to fix this is to archive the post in Prismic. Weird thing is that this build fail doesn't happen if I edit already existing blog post, only when adding a new one.
I cannot reproduce the error locally, it only fails on Github build.
I've already looked through the blog post in order to find something that could've broken the build, like some unusual fields that weren't present in previous blog posts, reinstalled all packages, updated package-lock.json, added empty blog posts to see if this would work, looked through every file in /public folder to find some clue but nothing yet worked and the build still fails when adding new blog posts. Has anyone else had this issue and knows how to fix this?
Full stack trace:
https://pastebin.com/VbLJZk3P
My package.json:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"-": "^0.0.1",
"#reduxjs/toolkit": "^1.5.0",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.9",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"gatsby": "^3.0.1",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-force-trailing-slashes": "^1.0.5",
"gatsby-plugin-gatsby-cloud": "^2.0.0",
"gatsby-plugin-gdpr-cookies": "^2.0.8",
"gatsby-plugin-graphql-codegen": "^3.1.0",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-offline": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-robots-txt": "^1.6.10",
"gatsby-plugin-sass": "^4.1.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-sitemap": "^4.10.0",
"gatsby-plugin-social9-socialshare": "^1.0.5",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-source-prismic": "^3.3.4",
"gatsby-transformer-sharp": "^3.0.0",
"graphql": "^15.5.0",
"graphql-cli": "3.0.14",
"graphql-request": "^3.4.0",
"prismic-reactjs": "^1.3.3",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-bootstrap": "^1.5.2",
"react-cookie-consent": "^6.2.4",
"react-dom": "^17.0.1",
"react-glider": "^2.1.1",
"react-helmet": "^6.1.0",
"react-is": "^17.0.2",
"react-media": "^2.0.0-rc.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"sass": "^1.32.8",
"styled-components": "^5.2.3",
"uuid": "^8.3.2"
},
"devDependencies": {
"#types/node": "^14.14.35",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.2",
"#types/react-helmet": "^6.1.0",
"#types/uuid": "^8.3.4",
"eslint-config-prettier": "^8.3.0",
"prettier": "^2.2.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.2.3"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "npm run type-check && npm run lint",
"lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --pretty"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch on HEROKU with React

I get this error in 9 of 10 attempts of deploy, and I don't know what is the cause of it. I've tried every recommendation I found on StackOverflow, but non of them works stable. I have no ideas why it is going on, and will preciate any help, guys!
Procfile
web: npm start
initializers/server/index.js
import Express from 'express';
import handleRender from './handleRender';
const app = Express();
const port = process.env.PORT || 3000;
// Serve static files
app.use('/assets', Express.static('./dist/assets/'));
// This is fired every time the server side receives a request
app.use(handleRender);
// We are going to fill these out in the sections to follow
/* eslint no-console: 0 */
app.listen(port, () => console.log('App is listening on', port));
package.json
{
"name": "planner",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^3.1.3",
"#reduxjs/toolkit": "^1.5.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"history": "^4.1.0",
"html-webpack-plugin": "^4.5.0",
"i18next": "^19.8.5",
"mini-css-extract-plugin": "^1.3.3",
"msw": "^0.25.0",
"postcss": "^7.0.35",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.5",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.2",
"redux": "^4.0.5",
"redux-undo": "^1.0.1",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^7.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"universal-cookie": "^4.0.4",
"uuid-random": "^1.3.2",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^3.0.0",
"webpack-node-externals": "^2.5.2"
},
"engines": {
"node": "14.5.0",
"npm": "6.14.9"
},
"scripts": {
"test": "jest",
"build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "chokidar 'src/assets/tailwind.css' -c 'npm run build:css'",
"start:dev": "concurrently -n Tailwind,React 'npm run watch:css' 'webpack-dev-server --config ./initializers/webpack/development.js'",
"build:client": " rimraf ./dist/assets/* && webpack --config ./initializers/webpack/production.js",
"build:server": "NODE_ENV=production npm run build:css && webpack --config ./initializers/webpack/server.js",
"start:server": "NODE_ENV=production node --enable-source-maps ./dist/server/server",
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"src",
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"setupFilesAfterEnv": [
"<rootDir>src/tests/setupTests.js"
],
"transform": {
"^.+\\.svg$": "<rootDir>/src/tests/svgTransform.js",
"^.+\\.(js|jsx)$": "babel-jest"
}
},
"devDependencies": {
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#testing-library/dom": "^7.29.4",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"babel-eslint": "^10.1.0",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"react-test-renderer": "^17.0.1",
"redux-mock-store": "^1.5.4",
"webpack-dev-server": "^3.11.0"
}
}
What else can I do to solve this problem?
Your code looks fine but:
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
This is too much.
Put them in build or heroku-postbuild, see https://devcenter.heroku.com/changelog-items/1557 and https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process
Don't do any "building" in your start script. Use your start script to only execute your code.
It fails to bind to $PORT within 60 seconds due to building.

React-Redux not updating in IE11

I'm having a problem with IE11 in my React SPA, it is a client-side rendered app.
The issue is that while in others browsers it just works perfectly fine, in IE11 it sometimes wills stay in an infinite loading state (won't update loading flag from store) or it goes directly to the dashboard of the app when you enter the sign-in screen (obviusly it doesn't have any data).
I've setted
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
in the index.html, with no use but one thing I see it "fixes it" is that when I delete a file named "recaptcha__es_419" in the INetCache folder, the page works as intended.
Is there a known problem with redux and IE11 that i couldn't find in the forums? maybe a library or a polyfill that is missing?
This is my package.json in case it can be of help. I can't actually put any code because it's a really big project and really don't know where the problem is, since IE11 doesn't tell me about any error.
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": ">=1.0.0",
"#material-ui/icons": ">=1.0.0",
"#trainline/react-skeletor": "^1.0.2",
"apisauce": ">=0.14.1",
"autoprefixer": "^8.6.3",
"card-validator": ">=4.3.0",
"downloadjs": "^1.4.7",
"es5-shim": ">=4.5.9",
"es6-shim": ">=0.35.3",
"es7-shim": ">=6.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"history": ">=4.6.1",
"i18next": ">=10.0.1",
"lodash": ">=4.17.4",
"mobile-detect": ">=1.3.6",
"moment": ">=2.19.1",
"node-sass": "^4.9.0",
"numeral": ">=2.0.6",
"prop-types": ">=15.5.10",
"raf": "^3.3.2",
"rc-slider": "^8.6.1",
"react": ">=16.3.2",
"react-app-rewire-hot-loader": "^1.0.1",
"react-app-rewired": "^1.5.2",
"react-credit-cards": "^0.7.0",
"react-dom": ">=16.0.0",
"react-facebook-login": "^4.0.1",
"react-google-login": "^3.2.1",
"react-google-maps": "^9.4.5",
"react-google-recaptcha": "^1.0.1",
"react-hot-loader": "^4.3.3",
"react-markdown": "^3.4.1",
"react-ms-login": "^0.1.2",
"react-redux": ">=5.0.4",
"react-responsive": "^4.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "next",
"react-scripts": "^1.1.4",
"react-twitter-auth": "^0.0.12",
"recharts": "^1.1.0",
"redux": ">=3.6.0",
"redux-form": ">=6.8.0",
"redux-recompose": "^1.0.11",
"redux-thunk": ">=2.2.0",
"reselect": "^3.0.1",
"rollbar": "^2.3.9",
"sass-loader": "^7.0.3",
"seamless-immutable": ">=7.1.2",
"url-search-params-polyfill": ">=2.0.1"
},
"devDependencies": {
"babel-eslint": ">=8.0.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-app": "^3.1.2",
"eslint": ">=4.9.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": ">=2.6.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-plugin-flowtype": ">=2.39.1",
"eslint-plugin-import": ">=2.8.0",
"eslint-plugin-jsx-a11y": ">=5.0.3",
"eslint-plugin-prettier": ">=2.3.1",
"eslint-plugin-react": ">=7.4.0",
"husky": ">=0.14.3",
"prettier": ">=1.7.4",
"prettier-eslint": ">=8.2.1",
"sass-lint": "^1.12.1"
},
"scripts": {
"sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
"lint": "./node_modules/eslint/bin/eslint.js src && npm run sass-lint",
"lint-fix": "./node_modules/eslint/bin/eslint.js src --fix",
"lint-diff": "git diff --name-only --cached --relative --diff-filter=ACM | grep \\.js$ | xargs ./node_modules/eslint/bin/eslint.js",
"precommit": "npm run lint-diff & npm run sass-lint",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
}
EDIT: If you're having the same problem I had, as #Ayushya said, adding Babel-Polyfill might help. It did in my case, and since I'm using CRA with Rewired I'll leave here how I configured it:
1) Install #babel/polyfill package:
npm install --save #babel/polyfill
2) In your config-override.js:
module.exports = function override(config, env) {
config.entry.unshift('#babel/polyfill');
...All your other code...
return config;
};
In this case, entry is the array of modules of webpack and unshift will put that item in the first position of the array, this is important because the polifyll should run first of all things!.
And that's it, everything should work perfect now in IE!
You are missing babel-polyfill in your packages and webpack configuration.
https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack
Just install #babel/polyfill and include them in each of the webpack entry.
So if webpack configuration looks like below:
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
Add the #babel/polyfill in entry as follows.
var path = require('path');
require("#babel/polyfill");
module.exports = {
mode: 'development',
entry: ['#babel/polyfill', './foo.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
Hope this helps

access angular route in nodejs app on heroku

I am trying to host an angularjs project on Heroku. App works just fine on local and when running heroku local web.
But when trying to access, I am getting error TypeError: response.sendFile is not a function.
Server.js
//Load HTTP module
var express = require('express');
const app = express();
var http = require("http");
var port = process.env.PORT|| 8000 ;
//Create HTTP server and listen on port 8000 for requests
http.createServer(function (request, response) {
// Set the response HTTP header with HTTP status and Content type
response.writeHead(200, {'Content-Type': 'text/plain'});
// Send the response body "Hello World"
response.end('Hello World\n');
response.sendFile('views/main.html' , { root : __dirname});
console.log(__dirname);
}).listen(port);
// Catch all other routes and return the index file
app.use(express.static(__dirname + '/views'));
app.get('/',function(req, res){
res.sendFile('views/main.html' , { root : __dirname});
});
console.log("\n\n\n"+__dirname+"Hello\n\n\n\n"); // prints /app in node
console
console.log("\n\n"+process.version+"\n\n\n\n"); // v6.10.2
// Print URL for accessing server
console.log('Server running at '+port);
Package.json
{
"name": "startup",
"private": true,
"devDependencies": {
"#angular/cli": "^1.4.7",
"#angular/compiler-cli": "^4.4.0",
"bower": "1.8.0",
"typescript": "^2.3.4",
"graceful-fs": "^4.1.11",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-cache": "^0.2.10",
"gulp-connect": "^2.3.1",
"gulp-filter": "^2.0.2",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.12.0",
"gulp-karma": "0.0.4",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-ng-annotate": "^1.0.0",
"gulp-plumber": "^1.0.1",
"gulp-rev": "^5.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.2.4",
"jasmine-core": "^2.7.0",
"jshint": "^2.9.5",
"jshint-stylish": "^1.0.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"lazypipe": "^0.2.4",
"minimatch": "^3.0.4",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.1",
"wiredep": "^2.2.2"
},
"engines": {
"node": "6.10.2"
},
"dependencies": {
"body-parser": "~1.5.2",
"express": "^4.8.0",
"gulp-bower-fix-css-path": "^0.1.1",
"gzippo": "^0.2.0",
"method-override": "~2.1.2",
"mongoose": "^4.12.4"
},
"scripts": {
"start": "gulp serve"
},
"description": "This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) version 0.16.0.",
"version": "1.0.0",
"main": "gulpfile.js",
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "1.0.0"
},
"author": "",
"license": "ISC"
}
Few points :
1. node version is "6.10.2"
2. express version is "^4.8.0"
3. res.sendFile with uppercase F or res.sendfile with lowercase f, nothing works.
What build pack are you using on heroku? Is it possible that you have an old version of express in heroku's npm cache? Try heroku config:set NODE_MODULES_CACHE=false and push a change to force a rebuild.
Also note that sendFile is present twice in your code so have you tried to replace it with sendfile at both places.
Resolved.
Instead of http.createServer(function (request, response) {} block, I added app.listen(port);

react-bootstrap-daterangepicker not working

import React from 'react';
import $ from "jquery";
import moment from "moment";
import DateRangePicker from "react-bootstrap-daterangepicker";
import dateRangePickerCss from '../../../../media/css/shared/daterangepicker.css'
const Filter = () => {
const openDropdown = (e) => {
var parent = e.target.parentElement;
$(parent).siblings().removeClass('open');
$(parent).toggleClass('open');
};
const handleEvent = (event, picker) => {
console.log(picker.startDate);
};
return (
<DateRangePicker onEvent={handleEvent}>
<a class="selected-txt">Filter by Date</a>
</DateRangePicker>
)
}
export default Filter
The datepicker: https://github.com/skratchdot/react-bootstrap-daterangepicker
When i am using the picker it gives me the following error on the console
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded
EDIT
This is my package.json
{
"name": "a",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev_build": "webpack --display-modules --progress --colors --watch",
"prod_build": "sh frt_build_script.sh"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.28.0",
"eslint": "^3.15.0",
"eslint-config-standard": "^7.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^2.1.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"webpack": "^2.2.1"
},
"peerDependencies": {
"react": "^15.4.2"
},
"dependencies": {
"axios": "^0.12.0",
"jquery": "^3.2.1",
"react-dom": "^15.4.2",
"react-modal": "^1.7.3",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"redux": "^3.6.0",
"redux-logger": "^2.8.2",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.2.0"
}
}
I think your reason of using datepicker is because you want the user to only allow date to be chosen in between specified start date till end date. Am I right? If I am, then you can do it simply by giving input type date.. If it is the reason, let me know. Will update the answer with the solution. :)

Resources