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']
Related
import { getMeta } from '#/helpers/globalHelpers';
import Head from 'next/head';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, selectValue, bulkUpdate, reset } from '#/slicers/propertySlice';
import Link from 'next/link';
export default function Home({ meta }) {
const data = useSelector(selectValue);
const dispatch = useDispatch();
console.log(meta);
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="og:title" content={meta.title} />
<meta name="og:description" content={meta.metadescription} />
<meta name="description" content={meta.metadescription} />
<meta name="keywords" content={meta.keywords} />
<title>{meta.title}</title>
</Head>
Hello world!
</>
)
}
export async function getServerSideProps({ resolvedUrl }) {
const pageData = await getMeta(resolvedUrl);
return {
props: { meta: pageData[0] }
}
}
I am working with next.js yarn and redux. I am trying to get my SEO data from my api and render is wit ssr. But it is rendering at the client side and SEO crawler tools (i am using screaming frog) can't see my title and description
Here is my code. I couldn't understand why my Head tag is rendering at the client side. Anyone can help?
Extra info, i checked _document.js, tag is correctly used and defined.
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script src="assets/js/jquery.min.js"></Script>
<Script src="assets/bootstrap/js/bootstrap.min.js"></Script>
<Script src="assets/js/aos.min.js"></Script>
<Script src="assets/js/bs-init.js"></Script>
<Script src="assets/js/checkbox-show-hide.js"></Script>
<Script src="assets/js/dropdown-saver.js"></Script>
<Script src="assets/js/floatsearch.js"></Script>
<Script src="assets/js/heroclean.js"></Script>
<Script src="assets/js/location-list.js"></Script>
<Script src="assets/js/mobilemenu.js"></Script>
</body>
</Html>
)
}
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 trying to change the favicon dynamically on all browsers, I get a response from the backend containing an https link to the icon, I am using react-helmet to change the favicon but it only works on chrome and android and doesnt work on safari, any ideas? please check out the code below:
import React from "react";
import { Helmet } from "react-helmet";
import { FavIconProps } from "./FavIconProps.types";
export const FavIcon = (props: FavIconProps) => {
const { faviconLink } = props;
console.log(faviconLink);
return (
<Helmet>
<meta name="favicon" />
<meta data-react-helmet="true" content="yes" name="apple-mobile-web-app-capable" />
<meta
data-react-helmet="true"
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<link id="favicon" rel="icon" data-react-helmet="true" href={faviconLink} />
<link
rel="apple-touch-icon"
data-react-helmet="true"
sizes="180x180"
href={faviconLink} />
</Helmet>
);
};
export default FavIcon;
I am learning reactjs I have made components from a html template, when I am calling them I am receiving this error:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
Please any one let me know why this is occurring
**App.js**
import React from 'react';
import Component from './components';
import logo from './logo.svg';
import './App.css';
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
class App extends Component {
render() {
return (
<div id="colorlib-page">
<div id="container-wrap">
<Menus></Menus>
<Welcome></Welcome>
<Welcome></Welcome>
<Services></Services>
<Reasearch></Reasearch>
<Projects></Projects>
<About></About>
<Testimonials></Testimonials>
<Blog></Blog>
<Contact></Contact>
<Footer></Footer>
</div>
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arvind Pundir - A Fullstack Web & App Developer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900"
rel="stylesheet">
<link rel="stylesheet" href="%PUBLIC_URL%/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.carousel.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.theme.default.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/aos.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/icomoon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/>
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00"/></svg></div>
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery-migrate-3.0.1.min.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.easing.1.3.js"></script>
<script src="%PUBLIC_URL%/js/jquery.waypoints.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.stellar.min.js"></script>
<script src="%PUBLIC_URL%/js/owl.carousel.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.magnific-popup.min.js"></script>
<script src="%PUBLIC_URL%/js/aos.js"></script>
<script src="%PUBLIC_URL%/js/jquery.animateNumber.min.js"></script>
<script src="%PUBLIC_URL%/js/scrollax.min.js"></script>
<script src="%PUBLIC_URL%/js/main.js"></script>
</body>
The issue is with this line of code:
import Component from './components';
Notice that this is a directory for most of your other component imports:
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
If you don't give an exact path to a component within your ./components directory there needs to be an index.js file within your ./components directory for the import Component from './components'; to work correctly. You can see this from your error message:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
This is telling you it can't find the ./components module associate with the import Component from './components'; import. Either add an index.js file within your ./components directory containing the necessary code for said component or double check that your path is correct for said import, i.e.:
import Component from './components'<COMPONENT>;
where <COMPONENT> is the name of the component you meant to import.
Hopefully that helps!
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'
};