Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'listenBeforeLeavingRoute' of undefined #61

Open
ZigaVukcevicDev opened this issue Sep 14, 2016 · 2 comments
Open

Comments

@ZigaVukcevicDev
Copy link

ZigaVukcevicDev commented Sep 14, 2016

Hi,

thank you for the plugin. Although, I can not set it up, as

a) I am getting error in console
ERROR in TypeError: Cannot read property 'listenBeforeLeavingRoute' of undefined

b) Secondly, what should I write to template.ejs file?

Please see my webpack.config.js content:

const
    path = require('path'),
    StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

const scope = { window: {} };

const paths = [
    '/hello/',
    '/world/'
];

var config = {
    context: path.join(__dirname, 'src'),
    entry: [
        './main.js'
    ],
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'bundle.js',
        /* IMPORTANT!
         * You must compile to UMD or CommonJS
         * so it can be required in a Node context: */
        libraryTarget: 'umd'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolveLoader: {
        root: [
            path.join(__dirname, 'node_modules')
        ]
    },
    resolve: {
        root: [
            path.join(__dirname, 'node_modules')
        ]
    },
    plugins: [
        new StaticSiteGeneratorPlugin('main', paths, {
            // Properties here are merged into `locals`
            // passed to the exported render function
            greet: 'Hello'
        }, scope)
    ]
};

module.exports = config;

and my main.js file

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import { Router, RouterContext, match, browserHistory, createMemoryHistory } from 'react-router';

import routes from './config/routes';
import template from './config/template.ejs';

// Client render (optional):
if (typeof document !== 'undefined') {
    const mount = document.getElementById('mount');

    document.addEventListener('DOMContentLoaded', function() {
        ReactDOM.render(<Router history={browserHistory} routes={routes} />, mount)
    });
}

// Exported static site renderer:
export default (locals, callback) => {
    const history = createMemoryHistory();
    const location = history.createLocation(locals.path);

    match({ routes, location }, (error, redirectLocation, renderProps) => {
        callback(null, template({
            html: ReactDOMServer.renderToString(<RouterContext {...renderProps} />),
            assets: locals.assets
        }));
    });
};

and finally my package.json content

"dependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "express": "^4.13.4",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-router": "^2.8.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1"
},
"devDependencies": {
    "static-site-generator-webpack-plugin": "^3.0.0"
}

What am I doing wrong? I can provide more files, if necessary.

@jurosh
Copy link

jurosh commented Sep 19, 2016

a) I have same issue with listenBeforeLeavingRoute. No solution yet. // but in docs there is used old rc version 1.0.0 so maybe this is causing issues
b) as I understand, it's possible to use without this template - it only helps to render basic html (without react). As I understand it's probably used with templates loader (ejs-loader) configured in webpack so you can define basic html structure in nice way (but probably using es6 string notation is nice alternative some ${variable} inside).

Edit:
a) I had typo in routes declaration passed into match as first parameter - now this error is gone..

@HHogg
Copy link

HHogg commented Apr 26, 2017

If anyone makes there way here, the issue for me was because I was using a redirect so essentially there wasn't a route for the path given to StaticSiteGenerateWebpackPlugin, so needed to handle the redirectLocation when matching the route... something along the lines of

export default function(locals, callback) {
  const history = createMemoryHistory();
  const location = history.createLocation(locals.path); 

  function matchLocation(location) {
    match({ routes, location }, (error, redirectLocation, renderProps) => {
      if (redirectLocation) {
        return matchLocation(redirectLocation);
      }

      callback(null, template({ ... }));
    });
  }

  matchLocation(location);
})

Just an idea, but I wonder if the issue above is because the routes /hello/ or /world/ are slightly incorrect, because of trailing forward slash?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants