Error when doing SSR. path:/: DefaultLayout is not defined

[onedr0p]

W20160221-15:52:09.673(-5)? (STDERR) Error when doing SSR. path:/: DefaultLayout is not defined
W20160221-15:52:09.674(-5)? (STDERR) ReferenceError: DefaultLayout is not defined
W20160221-15:52:09.675(-5)? (STDERR)     at Object.action (app/both/routes/authenticated.jsx:48:36)

I just updated to FlowRouter-SSR since the new beta for meteor came out (Beta.11). I could never get this version of FlowRouter to ever work since I would get the error described in #522.

Now on Beta 11, I was hopefully things would run smoothly, but now I get the above error instead.

Please advise... Do I need to start using ES6 classes instead of DefaultLayout = React.createClass({ or AccountNotifications = React.createClass({ ?

If that is the case, whenever I try using ES6 classes I can never get my classes imported because they are never found. For example if I wrote DefaultLayout in an ES6 class and tried importing it in authenticated.jsx like import DefaultLayout from '../client/components/layouts/default'; it (the file) will never be found, even thou the path is right...

Code snippet for app/client/components/layouts/default.jsx

import React from 'react';

DefaultLayout = React.createClass({
  render() {
    return (
      <div className="app-root">
        <AppHeader />
        <div className="ui container">
          {this.props.yield}
        </div>
      </div>
    );
  }
});

Code snippet for app/both/routes/authenticated.jsx

import React from 'react';
import ReactDOM from 'react-dom';

/*
 * Account Route
 */
authenticatedRoutes.route('/account/notifications', {
  name: 'accountNotifications',
  action() {
    var page = React.createElement(DefaultLayout, {
      yield: <AccountNotifications />
    });

    ReactDOM.render(page, document.getElementById('yield'));
  }
});

[novium]

Could it be as simple as that you forgot to export DefaultLayout? (You will still need to import it in your router of course)

import React from 'react';

DefaultLayout = React.createClass({
  ...
});

export default DefaultLayout;

Edit: just tried to update my project to beta 11 and it seems to work just fine

[onedr0p]

Hi @novium, I am trying to import DefaultLayout into my component but I can never seem to import it because the file isn't found. I get the following error:

W20160221-23:33:58.599(-5)? (STDERR) Error: Cannot find module ../../client/components/layouts/default

Here is the default layout located at app/client/components/layouts/default.jsx

import React from 'react';
DefaultLayout = React.createClass({
  render() {
    return (
      <div className="app-root">
        <AppHeader />
        <div className="ui container">
          {this.props.yield}
        </div>
      </div>
    );
  }
});
export default DefaultLayout;

Here is app/both/routes/common.jsx with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import DefaultLayout from '../../client/components/layouts/default';

/*
 * Home Route
 */
FlowRouter.route('/', {
  name: 'home',
  action() {
    var page = React.createElement(DefaultLayout, {
      yield: <Home />
    });
    ReactDOM.render(page, document.getElementById('yield'));
  }
});

I am using relative paths here, but even when I try absolute paths Meteor says the file is still not found.

Edit: I am not having luck at all trying to get this imported, any help would be great. I've tried evey combination of paths in common.jsx it's just never found.

[onedr0p]

I'll create a new comment for this because I strongly believe this is an issue with the SSR branch

@arunoda just to recap, I have these 2 directories: app/both/routes/ and app/client/components/

When I leave the routes/ folder in the both/ folder I get an error saying:

W20160222-00:41:40.462(-5)? (STDERR) Error when doing SSR. path:/: DefaultLayout is not defined
W20160222-00:41:40.463(-5)? (STDERR) ReferenceError: DefaultLayout is not defined
W20160222-00:41:40.463(-5)? (STDERR)     at Object.action (app/both/routes/common.jsx:8:36)
W20160222-00:41:40.463(-5)? (STDERR)     at packages/kadira:flow-router-ssr/server/route.js:77:26
W20160222-00:41:40.463(-5)? (STDERR)     at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
W20160222-00:41:40.463(-5)? (STDERR)     at packages/kadira:flow-router-ssr/server/route.js:67:33
W20160222-00:41:40.463(-5)? (STDERR)     at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
W20160222-00:41:40.463(-5)? (STDERR)     at Route._processFromSsr (packages/kadira:flow-router-ssr/server/route.js:66:29)
W20160222-00:41:40.463(-5)? (STDERR)     at packages/meteorhacks_fast-render/lib/server/routes.js:72:1
W20160222-00:41:40.464(-5)? (STDERR)     at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1)
W20160222-00:41:40.464(-5)? (STDERR)     at Object._processRoutes (packages/meteorhacks_fast-render/lib/server/routes.js:71:1)
W20160222-00:41:40.464(-5)? (STDERR)     at Object.FastRender.handleRoute (packages/meteorhacks_fast-render/lib/server/routes.js:48:1)

However the app still functions (I'm assuming with no SSR thou)

When I move the routes folder to my app/client folder the error goes away and everything appears to be running fine.

Thanks for all you help and the work on FlowRouter, it's great!

Edit: full stack trace.

Edit 2: It's my assumption that routes need to be accessed client and server side, that's why I am reluctant to move the routes/ folder into my app/client/ folder

[novium]

Edit: If you want to have the routes available to the server (so that you can use server side rendering) you'll need to have the components available on the server as well as on the client, that's probably the reason as to why you can't import the component when you move the router to the common code (your 'both' folder). [https://github.com/kadirahq/flow-router/tree/ssr#usage]() Ps: Depending on your configuration you need to append the .jsx extension to the import.

[onedr0p]

I tried importing using the .jsx extension but no luck. The import never works when importing in a parent, parent path like ../../

I guess I need to rearrange my folder structure to allow the server access to the components. But it makes no sense why when I move my /both/routes folder into the client/ folder I don't get any errors.. By @arunoda logic this shouldn't work.

Edit my folder structure now looks like this (and I get no errors and I don't need to import/export my components)

client/
    components/
    helpers/
    routes/
    vendor/ (Meteor package semantic UI stuff)
collections/
server/
    methods/
    publications/
    lib/
public/
settings/

Write your app in a place it's expose to both client and the server. You need to do it for both for the router and for React components.

To reiterate.. given my folder structure above this shouldn't work.. but it does..

[onedr0p]

It looks like I will just revert back to FlowRouter v2.10.1 as it works perfectly fine.

In SSR, I am also having issue with triggersEnter where the following code block is accessable to a logged in user. e.g. they can access my /login route.

const publicRoutes = FlowRouter.group({
  name: 'public',
  triggersEnter: [function() {
    if (Meteor.userId()) {
      FlowRouter.go('home');
    }
  }]
});

publicRoutes.route('/login', {
  name: 'login',
  action() {
    var page = React.createElement(DefaultLayout, {
      yield: <Login />
    });

    ReactDOM.render(page, document.getElementById('yield'));
  }
});

[arunoda]

@onedr0p the issue in here is pretty interesting. (I think) Even your app directory in available to the server, I don't think anything your client directory does.

Try to rename the client directory into something else or just rename the client to app.

Also, we don't support triggers in the SSR yet. See: https://github.com/kadirahq/flow-router/issues/529