When I ran npm run build for nextjs it does build in windows but it won't build on linux server. The problem is that build process cant resolve relative paths of my components.
import React, { Component } from "react";
import { connect } from "react-redux";
import Layout from "components/Layout";
import WithAuth from "components/WithAuth";
import Head from "next/head";
class Profile extends Component {
render() {
return (
<React.Fragment>
<Head>
<title>TripeMa</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="shortcut icon"
type="image/x-icon"
href="/static/images/tripe-ma-app-icon-rec.ico"
/>
<meta charSet="UTF-8" />
<meta name="theme-color" content="#d0f4f0" />
</Head>
<Layout Component={WithAuth} />
</React.Fragment>
);
}
}
export default connect()(Profile);
1.0.0 build /home/user/site
next build
Using external babel configuration
Location: "/home/user/site/.babelrc.js"
Failed to build
{ Error: (client) ./pages/profile.js
Module not found: Error: Can't resolve '../components/WithAuth' in '/home/useri/site/pages'
# ./pages/profile.js 20:0-46
Related
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 would like to embed this code on my Gatsby site, what would be the best practice? I'm still learning and any help would be much appreciated.
Thanks
<script
id="nc-booking-widget-script"
src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5"
data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc"
data-nc-root="https://www.neatcal.com/app"
data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>
The easiest and native approach, not only in Gatsby, but generally in React is using the Helmet component. Basically, whatever is wrapped inside this component is outputted in the <head> tag, no matter the original component.
To use it, just install (via yarn add react-helmet or npm install --save react-helmet) it and use like:
import React from "react";
import {Helmet} from "react-helmet";
const HomePage = (props)=> {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://someSite.net/example" />
<script id="nc-booking-widget-script" src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5" data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc" data-nc-root="https://www.neatcal.com/app" data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"/>
</Helmet>
...
</div>
);
};
In Gatsby, in addition, you can customize the resultant HTML (created once build) by:
cp .cache/default-html.js src/html.js
This will copy the default-html.js file from .cache to src/html.js. There, you can embed your script like:
import React from "react"
import PropTypes from "prop-types"
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...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"
/>
<script
id="nc-booking-widget-script"
src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5"
data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc"
data-nc-root="https://www.neatcal.com/app"
data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Both are valid and cleanest approaches.
I'm trying to use graphquery with react and gatsby but I can't get the data. I could get the data if it's written in js. How can I fix it? Thanks.
I started it from gatsby typesript starter but it doesn't work properly.
Uncaught ReferenceError: gatsby_1 is not defined
at ./src/templates/index-page.tsx.exports.IndexPageTemplate (index-page.tsx:56)
index.js:2177 The above error occurred in the <TemplateWrapper> component:
in TemplateWrapper (created by IndexPage)
React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
I changed sitemetadata file from js to tsx and then the error happeend
SiteMetaData.tsx
import { graphql, useStaticQuery } from "gatsby";
const useSiteMetadata = () => {
const { data } = useStaticQuery(
graphql`
query GetSiteMetaData{
site {
siteMetadata {
title
description
}
}
}
`
);
return data.siteMetaData;
};
export default useSiteMetadata;
Layout.tsx
import * as React from "react";
import Helmet from "react-helmet";
import Footer from "../Organisms/Footer";
import Navbar from "../Organisms/Navbar";
import useSiteMetadata from "../Organisms/SiteMetadata";
interface TemplateWrapperProps {
children: React.ReactChild;
}
const TemplateWrapper: React.SFC<TemplateWrapperProps> = ({ children }) => {
const { title, description }: any = useSiteMetadata();
return (
<div>
<Helmet>
<html lang="ja" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="theme-color" content="#fff" />
<meta property="og:type" content="business.business" />
{/**<meta property="og:title" content={title} /> */}
<meta property="og:url" content="/" />
<meta property="og:image" content="/img/og-image.jpg" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</Helmet>
<Navbar />
<div>{children}</div>
<Footer />
</div>
);
};
export default TemplateWrapper;
Try to separate graphql import into his own line, worked for me:
import { graphql } from 'gatsby';
import { Link, useStaticQuery } from 'gatsby';
There seem to be an issue open about it on gatsby-plugin-ts-loader repository: https://github.com/AdamLeBlanc/gatsby-plugin-ts-loader/issues/1#issuecomment-453876850
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']
I am trying to use react-bootstrap in react and installed it by using command
npm install react-bootstrap --save
but it's not working, also tried to add external react-bootstrap.js but still getting an error
error 'ReactBootstrap' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
what am I doing wrong in this code. This is HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is JSX file.
import React, { Component } from 'react';
import logo from './logo.svg';
class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
return(
<div>
<img src={logo} className="App-logo" alt="react-logo"/>
<h1> Trying react</h1>
<Button>Noob</Button>
</div>
);
}
}
export default Hello;
and here the rendering code in other file.
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
the same code is working fine , If I remove
let { Button} = ReactBootstrap.Button;
and
<Button>Noob</Button>
from JSX file.
You will need to import that component from react-bootstrap like - var Alert = require('react-bootstrap').Alert;
For more information please take a look at this - https://react-bootstrap.github.io/getting-started.html