botframework with react is not working in IE,
I'm using my index html file similar to
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react, its working in chrome but not in IE, i tried using webchat-es5.js also.
I'm using token given by bot team.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Integrate with React</title>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.5.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-redux#5.0.7/dist/react-redux.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<div id="webchat" role="main"></div>
<script type="text/babel">
function start() {
const { createStore, ReactWebChat } = window.WebChat;
const { Provider } = window.ReactRedux;
const store = createStore();
window.ReactDOM.render(
<Provider store={ store }>
<ReactWebChat
directLine={ window.WebChat.createDirectLine({ token:'mytoken' }) }
storeKey="webchat"
/>
</Provider>,
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
}
start();
</script>
</body>
</html>
working in Chrome but not in IE, somebody help me on this please.
Unfortunatley, the "webchat-es5.js" package was designed for instantiating web chat via the window.WebChat.renderWebChat method. While the "webchat.js" package does allow for using window.ReactDOM.render, it is not designed for older browsers, such as IE.
I played with this a bunch and was simply unable to render web chat using window.ReactDOM.render while also in IE, despite utilizing any number of polyfills. That being said, I was able to get the hosted React web chat sample to work in a proper React project with a few of modifications. Please note, this also makes use of webpack.
Hope of help!
index.js: Nothing special or unexpected here.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './css/index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
app.js: Just some necessary routing.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import WebChatView from './webChatView';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path="/" exact component={WebChatView} />
</div>
</Router>
);
}
}
export default App;
webChatView.js: Renders the web chat page (with some necessary styling)
import React, { Component } from 'react';
import WebChatView from './webchatView';
const FragmentStyling = {
'container': {
'display': 'flex',
'justifyContent': 'center'
},
'div': {
'height': '40rem',
'minHeight': '20rem',
'width': '1200px',
'display': 'flex',
'justifyContent': 'space-around',
'marginTop': '2rem'
}
}
class WebChatView extends Component {
render() {
return (
<div style={FragmentStyling.container}>
<div style={FragmentStyling.div}>
<WebChatView id="webchat" role="main" />
</div >
</div>
)
}
}
export default WebChatView;
webchat.js: Several things to note:
Either import '#babel/polyfill' needs to be included or all the 'core-js' imports listed below. Babel recommends importing only the required polyfills (to keep package size down). Those shown below are what is needed. However, using the '#babel' option works, as well.
Simply using fetch as-is breaks due to compatibility issues. There may be other options, but the below 'whatwg-fetch' option works in both IE and Chrome. Others I tested did not.
'fetching' the token needs to be promise-based. Using async/await breaks React web chat in IE.
import 'core-js/es6/map';
import 'core-js/es6/promise'
import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/includes';
import 'core-js/fn/math/sign';
import 'core-js/fn/object/assign';
import 'core-js/fn/string/starts-with';
import { fetch as fetchPolyfill } from 'whatwg-fetch';
import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default class WebChat extends React.Component {
constructor(props) {
super(props);
this.state = {
directLine: null
};
}
componentDidMount() {
this.fetchToken();
}
fetchToken(token) {
fetchPolyfill('http://localhost:3500/directline/token', { method: 'POST' })
.then(res => res.json()) // expecting a json response
.then(json =>
this.setState(() => ({
directLine: createDirectLine(
{
token: json.token
}
)
}))
)
}
render() {
return (
this.state.directLine ?
<ReactWebChat
directLine={this.state.directLine}
/>
:
<div>Connecting to bot…</div>
)
}
}
index.html: The 'react-polyfill.min.js' package needs to be included and should precede any other scripts that might live here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//pitzcarraldo.github.io/react-polyfill/react-polyfill.min.js" charSet="UTF-8"></script>
<title>React Web App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js: The import 'script!react-polyfill' needs to be included at the top of this file.
import 'script!react-polyfill';
const path = require('path');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
mode: 'development'
};
Related
A while ago I made a relatively massive app for a single developer for my own personal use - a "social media" of sorts. I wrote it in React.js
I have recently decided to revisit the app and revamp it - primarily make it server-side rendered using Next.js.
The key problem is loading the themes. I had a feature where I would programmatically add an external script tag to the end of the body which would manipulate the canvas and show some animations.
I had no issues when I worked with React, as everything got loaded the way I expected it to, but when it comes to Next, that simply isn't the case. The script tag loads, but the code doesn't get executed.
The most important files I have issues with are:
My _document.jsx file:
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { BASE_URL as base } from '../config'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang={"en"}>
<Head>
<link rel={"icon"} href={`${base}/short.png`} />
<link
rel={"apple-touch-icon"}
href={`${base}/apple-icon-180x180-dunplab-manifest-34821.png`}
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel={"stylesheet"}
/>
<link
rel={"stylesheet"}
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
integrity={"sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0="}
crossOrigin={"anonymous"}
/>
<link
rel={"stylesheet"}
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity={"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"}
crossOrigin={"anonymous"}
/>
<script
defer
src={`${base}/Vector2.js`}
charSet={"utf-8"}
></script>
<link rel={"manifest"} href={`${base}/manifest.json`} />
</Head>
<body>
<div className="canvas-wrapper">
<canvas id="canvas" className="canvas-bg"></canvas>
<NextScript />
</div>
<Main>
<script
defer
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity={"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"}
crossOrigin={"anonymous"}
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity={"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"}
crossOrigin={"anonymous"}
></script>
<script
defer
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity={"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"}
crossOrigin={"anonymous"}
></script>
</Main>
</body>
</Html>
)
}
}
export default MyDocument
My _app.jsx file:
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { ThemeProvider } from "../contexts/ThemeContext";
import { FontProvider } from "../contexts/FontContext";
import { DevProvider } from "../contexts/DevContext";
import { LanguageProvider } from "../contexts/LanguageContext";
// import { SocketProvider } from "../contexts/SocketContext";
import { ColourProvider } from "../contexts/ColourContext";
import PageContent from '../components/layout/PageContent/PageContent';
import { useStore } from '../store';
import { useEffect } from "react"
import { Provider } from 'react-redux';
import Head from 'next/head';
import { BASE_URL as base } from '../config';
import Nav from "../components/layout/Nav/Nav"
import setAuthToken from '../utils/setAuthToken';
import { getUser } from '../actions/auth';
function MyApp({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState);
useEffect(() => {
if (localStorage.getItem('token')) {
setAuthToken(localStorage.getItem('token'))
}
store.dispatch(getUser())
})
return (
<>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta property="og:title" content="Impulse" />
<meta property="og:description" content="Make an impact. Change minds." />
<meta
property="og:image"
content={`${base}/favicon-96x96-dunplab-manifest-34821.png`}
/>
<meta
name="description"
content="Welcome to Impulse - make an impact, change minds. Impulse is dedicated to your enjoyment and pleasure!"
/>
<script defer src={`${base}/scripts/initlog.js`}></script>
<script defer src={`${base}/scripts/blurfocus.js`}></script>
<title>Impulse</title>
</Head>
<ColourProvider>
<DevProvider>
<FontProvider>
{/* <SocketProvider> */}
<ThemeProvider>
<LanguageProvider>
<Provider store={store}>
<PageContent>
<Nav />
<Component {...pageProps} />
</PageContent>
</Provider>
</LanguageProvider>
</ThemeProvider>
{/* </SocketProvider> */}
</FontProvider>
</DevProvider>
</ColourProvider>
</>
)
}
export default MyApp
My useScript.js hook
import { useRef } from "react"
import { BASE_URL as base } from "../config"
// actually, it's supposed to load a single script, not more of them
const useScripts = (script) => {
const scriptLoaded = useRef(false);
if (typeof window !== "undefined" && !scriptLoaded.current && script) {
const element = document.createElement("script");
element.src = `${base}/static/canvasThemes/${script}.js`;
element.type = "text/javascript";
const position = document.querySelector("head");
position.appendChild(element);
scriptLoaded.current = true;
}
};
export default useScripts
My PageContent.jsx file, which was previously referenced in the _app.jsx file:
import React, { useContext, useEffect, useState } from "react";
import { ThemeContext } from "../../../contexts/ThemeContext";
import { FontContext } from "../../../contexts/FontContext";
import { ColourContext } from "../../../contexts/ColourContext";
import StyledPageContent from '../../../styled/StyledPageContent';
import useScripts from "../../../hooks/useScript";
import cookie from 'cookie-cutter'
function PageContent(props) {
const { isDarkTheme, toggleTheme } = useContext(ThemeContext);
const { isLegacyFont } = useContext(FontContext);
const { colour } = useContext(ColourContext)
const [theme, setTheme] = useState("")
useEffect(() => {
const newOne = cookie.get("isDarkTheme")
console.log("NJUUAN _APP", newOne);
setTheme(() => newOne)
}, [])
useScripts(theme)
return (
<StyledPageContent
isDarkTheme={isDarkTheme}
isLegacyFont={isLegacyFont}
colour={colour}
>
{props.children}
</StyledPageContent>
);
}
export default PageContent;
I'm looking for a way to add a script programmatically and immediately execute it.
Important: ALL script tags I want to add are considered "themes", which would grab the canvas from the _document and manipulate its background colour/fill/add text etc.
I have been trying a million different things for a month now and am starting to lose hope.
Not sure if I'll get any help, but thanks in advance all the same!
I am learning react.js by myself, so you may find this question a silly one. But, I want to learn concepts.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
<div id="style"></div>
</body>
</html>
In my index.html, I have placed two divs, which are calling two different components, but the only first component is loaded on the page. Is there any way to call both of them? And if not then why?
Here is the pattern.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<>
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
<Home />
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App; // not necessary since you are rendering already...
you can also create a seperate component for the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Nothing is importing and rendering Home. If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.
import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<AppStyle />, document.getElementById('style'));
As others have pointed out though, the normal pattern is to only render a single react application per page.
I am trying to use the AutoComplete address service from Google Place API.
Found this library:
https://github.com/kenny-hibino/react-places-autocomplete#load-google-library
It asks for loading the library in my project:
https://github.com/kenny-hibino/react-places-autocomplete#getting-started
I would do it in the public/index.html if it's pure Reactjs project. However, the public/index.html in Gatsbyjs project will be deleted and re-generated every time when running:
Gatsby develop
command line.
How can I use the Google Place API in my Gatsbyjs project?
Update
I have tried 2 ways to achieve this.
Use React-Helmet in /layouts/index.js , here is how it looks like:
<Helmet>
<script src="https://maps.googleapis.com/maps/api/js?key={API}&libraries=places&callback=initAutocomplete" async defer></script>
</Helmet>
Put the script reference in the /public/index.html, which looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title data-react-helmet="true"></title>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places" async defer ></script>
</head>
<body>
<div id="___gatsby"></div>
<script src="/commons.js"></script>
</body>
</html>
For the 1st solution, every time after I refresh my page, the project throws an error asking for loading the Google JavaScript Map API.
For the 2nd solution, every time after I re-start the Gatsby by the command line: gatsby develop
it re-generates the index.html which flushes away my JavaScript reference in it.
You shouldn't modify any files in the public forlder with GatsbyJS.
Instead, I recommend you to customize your html.js file.
To do so, first run:
cp .cache/default-html.js src/html.js
You should have the html.js file in /src/html.js.
Now you can put your <script> tag within the <head>.
Update Feb 24, 2020
Here's a more modern implementation using React hooks with some performance optimizations based on React.memo and a custom shouldUpdate function. See this blog post for details.
import { functions, isEqual, omit } from 'lodash'
import React, { useState, useEffect, useRef } from 'react'
function Map({ options, onMount, className, onMountProps }) {
const ref = useRef()
const [map, setMap] = useState()
useEffect(() => {
// The Map constructor modifies its options object in place by adding
// a mapTypeId with default value 'roadmap'. This confuses shouldNotUpdate.
// { ...options } prevents this by passing in a copy.
const onLoad = () =>
setMap(new window.google.maps.Map(ref.current, { ...options }))
if (!window.google) {
const script = document.createElement(`script`)
script.src = `https://maps.googleapis.com/maps/api/js?key=` + YOUR_API_KEY
document.head.append(script)
script.addEventListener(`load`, onLoad)
return () => script.removeEventListener(`load`, onLoad)
} else onLoad()
}, [options])
if (map && typeof onMount === `function`) onMount(map, onMountProps)
return (
<div
style={{ height: `60vh`, margin: ` 1em 0`, borderRadius: ` 0.5em` }}
{...{ ref, className }}
/>
)
}
function shouldNotUpdate(props, nextProps) {
const [funcs, nextFuncs] = [functions(props), functions(nextProps)]
const noPropChange = isEqual(omit(props, funcs), omit(nextProps, nextFuncs))
const noFuncChange =
funcs.length === nextFuncs.length &&
funcs.every(fn => props[fn].toString() === nextProps[fn].toString())
return noPropChange && noFuncChange
}
export default React.memo(Map, shouldNotUpdate)
Map.defaultProps = {
options: {
center: { lat: 48, lng: 8 },
zoom: 5,
},
}
Old Answer
Using html.js
Modifying src/html.js like so (as Nenu suggests) is one option.
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class HTML extends Component {
render() {
return (
<html {...this.props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{this.props.headComponents}
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
// MODIFICATION // ===================
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
async
defer
/>
// ===================
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Then you can access the Google Maps API anywhere in your project from window.google.maps.(Map|Marker|etc.).
The React way
To me that felt a little anachronistic, though. If you want a reusable React component that you can import into any page or template as import Map from './Map', I suggest this instead. (Hint: See update below for equivalent function component.)
// src/components/Map.js
import React, { Component } from 'react'
export default class Map extends Component {
onLoad = () => {
const map = new window.google.maps.Map(
document.getElementById(this.props.id),
this.props.options
)
this.props.onMount(map)
}
componentDidMount() {
if (!window.google) {
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`
const headScript = document.getElementsByTagName('script')[0]
headScript.parentNode.insertBefore(script, headScript)
script.addEventListener('load', () => {
this.onLoad()
})
} else {
this.onLoad()
}
}
render() {
return <div style={{ height: `50vh` }} id={this.props.id} />
}
}
Use it like so:
// src/pages/contact.js
import React from 'react'
import Map from '../components/Map'
const center = { lat: 50, lng: 10 }
const mapProps = {
options: {
center,
zoom: 8,
},
onMount: map => {
new window.google.maps.Marker({
position: center,
map,
title: 'Europe',
})
},
}
export default function Contact() {
return (
<>
<h1>Contact</h1>
<Map id="contactMap" {...mapProps} />
</>
)
}
What woked for me was to create a gatsby-ssr.js file in the root of my project, and then include the script there, like this:
import React from "react"
export function onRenderBody({ setHeadComponents }) {
setHeadComponents([
<script
key="abc"
type="text/javascript"
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GATSBY_API_KEY}&libraries=places`}
/>,
])
}
Don't forget to include GATSBY_API_KEY or whatever you want to call it in your .env.development and .env.production files:
GATSBY_API_KEY=...
I am learning React and following integrating other Libraries chapter and tried the same they have suggested but getting below error
TypeError: this.$el.chosen is not a function
Chosen.componentDidMount
src/App.js:18
componentDidMount() {
this.$el = $(this.el);
> this.$el.chosen();
}
react website provides example codepen where they have added the jquery and chosen plugin js in dependencies and I have added jquery and chosen library js file in index.html and also added jquery using npm install jquery --save so that it can be imported in App.js
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
App.js
import React, { Component } from 'react';
import $ from 'jquery';
class Chosen extends Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
}
componentWillUnmount() {
this.$el.chosen('destroy');
}
render() {
return (
<div >
<select className="Chosen-select" ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen >
<option >vanila</option>
<option >strawberry</option>
<option >chocolate</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<section>
<Example/>
</section>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Why I am getting this error and how to fix it?
Got it to work by following these steps (after creating a project using create-react-app)
npm install jquery --save
npm install chosen-js --save
Add this in line #1 of node_modules/chosen-js/chosen.jquery.js
import jQuery from 'jquery'
As per this answer
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery'
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";
class Chosen extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
this.handleChange = this.handleChange.bind(this);
this.$el.on('change', this.handleChange);
}
componentDidUnmount() {
this.$el.off('change', this.handleChange);
this.$el.chosen('destroy');
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<div>
<select className="Chosen-select" style={{width: "200px"}} ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen className="chosen-container chosen-container-single" onChange={value => console.log(value)}>
<option>vanilla</option>
<option>chocolate</option>
<option>strawberry</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
<Example/>
</p>
</div>
);
}
}
export default App;
I have also face the same issue while reading the documentation. But instead of updating the "node_modules/chosen-js/chosen.jquery.js" file, I prefer to Use the ProvidePlugin to inject implicit globals in webpack.config.js
But when we create an application using create-react-app we didn't find the webpack.config.js file.
You will need to eject the react application. But you should first read from the following links before ejecting the application(If you’re a power user and you aren’t happy with the default configuration).
Links:-
https://github.com/satendra02/react-chrome-extension/wiki/What-happens-when-you-eject-Create-React-App
https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741
You will need to run the following command to eject the react application as this command will remove the single build dependency from your project and also copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in package.json
npm run eject
Install the dependencies
npm install jquery chosen-js --save
Now edit your webpack.config.js file and update the config object as follow
return {
...
module: {
...
},
plugins: [
...
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
...
}
Chosen.js
import React from 'react';
import $ from "jquery";
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";
class Chosen extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
this.handleChange = this.handleChange.bind(this);
this.$el.on("change", this.handleChange);
}
componentDidUpdate(prevProps) {
if (prevProps.children !== this.props.children) {
this.$el.trigger("chosen:updated");
}
}
componentWillUnmount() {
this.$el.off("change", this.handleChange);
this.$el.chosen("destroy");
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<div>
<select className="Chosen-select" ref={(el) => (this.el = el)}>
{this.props.children}
</select>
</div>
);
}
}
It seems like a issue related with dependency.
I notice that you include JQuery and its chosen plugin with CDN which means it is declared globally. But in third line of App.js you import $ from 'jquery'; which may introduce JQuery locally. In my experience, React will refer $ to local JQuery which is not with the plugin.
I suggest that you could try comment out import $ from 'jquery' and try again.
Good luck!
Use
window.$("#infomodal").modal("hide");
I am using react-helmet and on the client all is good in the inspect window and the tags are being outputted correctly. However, when I boot up in production and the SSR kicks in the tags aren't shown in the source and I'm getting no errors at all.
I tried logging the 'stringified' title tag too and got:
<title data-react-helmet="true"></title>
Here is some code:
This is one of the page components where I'm setting the tags from, the 3 page components are all set up identically to this. (I've simplified the components render function and data object as they are quite large and I'm sure these aren't at fault.)
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';
// Components
import WorkGrid from 'universal/components/Grid';
import Wrapper from 'universal/components/Wrapper';
import Container from 'universal/components/Container';
import Hero from 'universal/components/Hero';
import PageWrapper from 'universal/components/PageWrapper';
import GridHeader from 'universal/components/GridHeader';
const data = {};
class Work extends PageComponent {
render () {
return (
<PageWrapper ref="root">
<Helmet>
<title>Work</title>
<meta name="description" content="Work Description" />
</Helmet>
<h1>Work Page</h1>
</PageWrapper>
);
}
}
export default connect(state => ({
theme: state.ui.theme
}), { changeTheme }, null, { withRef: true })(Work);
This is some of the server code, specifically where the SSR goes down and I'm calling Helmet.renderStatic();
// Node Modules
import fs from 'fs';
import {basename, join} from 'path';
// Libraries
import React from 'react';
import {StaticRouter} from 'react-router';
import {renderToString} from 'react-dom/server';
// styled-components
import { ServerStyleSheet, ThemeProvider } from 'styled-components';
import { theme } from '../universal/constants';
// Redux
// import {push} from 'react-router-redux';
import createStore from 'data/redux/createStore.js';
import createHistory from 'history/createMemoryHistory';
import { Provider } from 'react-redux';
// Third Party Scripts
import * as thirdPartyScripts from './thirdPartyScripts.js';
// Helmet
import {Helmet} from 'react-helmet';
function renderApp(url, res, store, assets) {
const PROD = process.env.NODE_ENV === 'production';
const context = {};
const {
manifest,
app,
vendor
} = assets || {};
let state = store.getState();
const stylesheet = new ServerStyleSheet();
const initialState = `window.__INITIAL_STATE__ = ${JSON.stringify(state)}`;
const Layout = PROD ? require( '../../build/prerender.js') : () => {};
const root = PROD && renderToString(
stylesheet.collectStyles(
<Provider store={store}>
<ThemeProvider theme={theme}>
<StaticRouter location={url} context={context}>
<Layout />
</StaticRouter>
</ThemeProvider>
</Provider>
)
);
const styleTags = stylesheet.getStyleTags();
const seo = Helmet.renderStatic();
console.log(seo.title.toString());
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
${seo.title.toString()}
${seo.meta.toString()}
${seo.link.toString()}
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
${ styleTags }
${PROD ? '<link rel="stylesheet" href="/static/prerender.css" type="text/css" />' : ''}
<link href="${thirdPartyScripts.googleFont}" rel="stylesheet" type="text/css">
<script>${thirdPartyScripts.googleAnalytics}</script>
</head>
<body>
<script>${initialState}</script>
${PROD ? `<div id="root">${root}</div>` : '<div id="root"></div>'}
${PROD ? `<script>${manifest.text}</script>` : ''}
<script>${thirdPartyScripts.facebookPixel}</script>
<script async src="${thirdPartyScripts.googleAnalyticsSrc}"></script>
${PROD ? `<script src="${vendor.js}"></script>` : ''}
<script src="${PROD ? app.js : './static/app.js'}"></script>
</body>
</html>`;
res.send(html);
}
Also, I am using React Router v4 if that's of any help.
I found the solution to this the other week and thought I may as well update this so it can help anyone else having this problem...
Good news is it was surprisingly simple!
For me anyway it was down to the fact that I separate webpack bundles for the client and the server. So in layman's terms it was including react-helmet twice, once for the client and once for the server, meaning all the state holding the meta tags in the client side code didn't exist in the .rewind() call on the server.
Just add this to your server webpack config file
externals: ['react-helmet']