I am trying to use my template to build a project in the gatsby js but all the CSS and js aren't working.
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import {Helmet} from 'gatsby'
import Header from "./header"
import "./layout.css"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Helmet>
<link href="js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="js/vendor/slick/slick.min.css" rel="stylesheet"/>
<link href="js/vendor/fancybox/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="js/vendor/animate/animate.min.css" rel="stylesheet"/>
<link href="css/style-light.css" rel="stylesheet"/>
<link href="fonts/icomoon/icomoon.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"/>
<script src="js/vendor/jquery/jquery.min.js"></script>
<script src="js/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="js/vendor/slick/slick.min.js"></script>
<script src="js/vendor/scrollLock/jquery-scrollLock.min.js"></script>
<script src="js/vendor/instafeed/instafeed.min.js"></script>
<script src="js/vendor/countdown/jquery.countdown.min.js"></script>
<script src="js/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="js/vendor/ez-plus/jquery.ez-plus.min.js"></script>
<script src="js/vendor/tocca/tocca.min.js"></script>
<script src="js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js"></script>
<script src="js/vendor/isotope/jquery.isotope.min.js"></script>
<script src="js/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="js/vendor/cookie/jquery.cookie.min.js"></script>
<script src="js/vendor/bootstrap-select/bootstrap-select.min.js"></script>
<script src="js/vendor/lazysizes/lazysizes.min.js"></script>
<script src="js/vendor/lazysizes/ls.bgset.min.js"></script>
<script src="js/vendor/form/jquery.form.min.js"></script>
<script src="js/vendor/form/validator.min.js"></script>
<script src="js/vendor/slider/slider.js"></script>
<script src="js/app.js"></script>
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
But all the files not included any CSS or JS from this example.
Here are all files
Tell me if I am doing something wrong. Any help would be appreciating.
After doing lots of research and #Ferran reply and these post
How to include local javascript on a Gatsby page?
How to use global css style sheet includes with GatsbyJS
I have been completed like this.
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"
import Header from "./header"
import "./layout.css"
import "../../static/js/vendor/bootstrap/bootstrap.min.css"
import "../../static/js/vendor/slick/slick.min.css"
import "../../static/js/vendor/fancybox/jquery.fancybox.min.css"
import "../../static/js/vendor/animate/animate.min.css"
import "../../static/css/style-light.css"
import "../../static/fonts/icomoon/icomoon.css"
// import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
// import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Helmet>
<script src={withPrefix('js/vendor/jquery/jquery.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/slick/slick.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/scrollLock/jquery-scrollLock.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/instafeed/instafeed.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/countdown/jquery.countdown.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/imagesloaded/imagesloaded.pkgd.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/ez-plus/jquery.ez-plus.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap-tabcollapse/bootstrap-tabcollapse.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/isotope/jquery.isotope.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/fancybox/jquery.fancybox.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/cookie/jquery.cookie.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap-select/bootstrap-select.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/lazysizes/lazysizes.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/lazysizes/ls.bgset.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/form/jquery.form.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/form/validator.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/slider/slider.js')} type="text/javascript" />
<script src={withPrefix('js/app.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/bootstrap/bootstrap.bundle.min.js')} type="text/javascript" />
<script src={withPrefix('js/vendor/tocca/tocca.min.js')} type="text/javascript" />
{/* <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> */}
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
I hope anyone won't waste at the same time as I wasted.
According to Gatsby's docs you need to point your static/external assets using relative paths, such as (extracted from their documentation):
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in the “Importing Assets Directly Into Files” page.
return <img src={'/logo.png'} alt="Logo" />;
}
Without knowing your project folder structure it seems that your issue is related to this. Try to use relative paths in your component. If you have kept the Gatsby default structure, I would suggest something like this:
<link href="../js/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>
And so on...
I've replied your structure on my project and it should work with ../js/your/path/to-file,../css/your/path/to-file, etc.
I try to use snipcart in a single product page (like here) with react.
With the code below a click on the button (class="snipcart-add-item") doesn't do anything. How do I have to import?
In my version "data-api-key" is my correct snipcart api key of course.
import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css"
import React from 'react';
function App() {
return (
<div className="App">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="API_KEY"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />
<button
class="snipcart-add-item"
data-item-id="2"
data-item-name="Bacon"
data-item-price="3.00"
data-item-weight="20"
data-item-url="http://myapp.com/products/bacon"
data-item-description="Some fresh bacon">
Buy bacon
</button>
</div>
);
}
export default App;
Go to public/index.html and paste your scripts and link inside the head
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']
From this question (Is it OK to use React.render() multiple times in the DOM?) it seem like we can call React.render() multiple times in a page. However when I tried following code I got " _registerComponent(...): Target container is not a DOM element." error on the second component.
import React, {Component} from 'react';
import {render} from 'react-dom';
import {Button} from 'office-ui-fabric-react/lib/components/Button'
class App extends Component {
render () {
</div>;
return(
<div><Button>I am a button.</Button></div>
)
}
}
render(<App/>, document.getElementById('app'));
render(<App/>, document.getElementById('app2'));
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<div id="app2" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
You have a closing div above the return statement in you render function,apart from that as stated in the docs of office-ui-fabric-react Button is being import from lib and not lib/components
Import it like
import { Button } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
render () {
return(
<div>I am a button</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
ReactDOM.render(<App/>, document.getElementById('app2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<div id="app2"></div>
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