Meteor SSR and SCSS

help
1

I’ve finally got SSR working but when I add Bootstrap and my SCSS files with fourseven:scss the application fails. I seem to get multiple errors but the one I’m can’t get past right now is:
TypeError: Cannot set property 'emulateTransitionEnd' of undefined

Path: ui/layouts/App.jsx

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { Meteor } from 'meteor/meteor';
import React from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Helmet } from 'react-helmet';

import Login from '../pages/login/Login';

const Index = () => <h1>Home page.</h1>;

const App = ({ initialState }) => {
  console.log('initialState', initialState);
  return (
    <div className="application">
      <Helmet>
        <meta charSet="utf-8" />
        <title>{Meteor.settings.public.companyName}</title>
        <link rel="canonical" href={Meteor.settings.public.href} />
      </Helmet>
      <Switch>
        <Route path="/" exact component={Index} public />
        <Route path="/login" exact component={Login} />
      </Switch>
    </div>
  );
};
2

Once you go Styled Components you never go back.

3

Thanks I’ll have to look into that. For this project I’d prefer to not have to worry about writing all my css.

Any idea why I’m getting the error above?

4

You have SSR working but it doesn’t mean everything will work. Sometime you have to decide which run only on client likes some transition effects.
The useful function is

if (Meteor.isClient) {
  // do some stuffs that is not able to run on server
}
5

Ahh cool. So I’ve moved the jquery, popper and boostrap files into the client file. Theres no errors bu the styles aren’t coming coming through.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { onPageLoad } from 'meteor/server-render';
import { EJSON } from 'meteor/ejson';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

// Stringify back the preloaded state into its original EJSON string form.
// Then use the EJSON parser to parse rich content types
const initialState = EJSON.parse(JSON.stringify(window.__PRELOADED_STATE__));

delete window.__PRELOADED_STATE__; // Remove what we don't need anymore

onPageLoad(async sink => {
  const App = (await import('../ui/layouts/App.jsx')).default;
  ReactDOM.hydrate(
    <BrowserRouter>
      <App initialState={initialState} />
    </BrowserRouter>,
    document.getElementById('react-target')
  );
});