Support for next.js 7

[paschaldev]

App works perfectly with next 6 but after upgrading to next 7, unexpected errors and therefore app refuses to build.

Looks like a problem with routing.

routes.js

const routes = module.exports = require('next-routes')();

routes
.add({name: 'index', pattern: '/', page: 'index'})
.add({name: 'community', pattern: '/community', page: 'profiles'})
.add({name: 'locations', pattern: '/community/locations', page: 'locations'})
.add({name: 'categories', pattern: '/community/categories', page: 'categories'})
.add({name: 'pricing', pattern: '/pricing', page: 'pricing'})
.add({name: 'blog', pattern: '/blog', page: 'blog'})
.add({name: 'blog_item', pattern: '/blog/:slug', page:'blog_item'})
.add({name: 'login', pattern: '/login', page:'login'})
.add({name: 'signup', pattern: '/signup', page:'signup'})
.add({name: 'reset', pattern: '/reset', page: 'reset'})
.add({name: 'auth', pattern: '/auth', page: 'auth'})

next.config.js

const withSass = require('@zeit/next-sass')

const getRoutes = require('./src/routes')

const path = require('path')
const process = require('process')

module.exports = withSass({
    cssModules: false,

    exportPathMap: getRoutes,
    useFileSystemPublicRoutes: false,

    ...
})

Error in console after running dev server with express.js

> node ./src/server.js

Defining routes from exportPathMap
TypeError: this.nextConfig.exportPathMap is not a function
    at Server._callee9$ (/Users/xyz/gitlab/project-x/node_modules/next/dist/server/index.js:398:40)

[fridays]

Not sure I understand, this module never returned a function for exportPathMap

[paschaldev]

@fridays There is a new next.js release for version 7, if you try this package with next.js 7, you should get the error?

[fridays]

I'm going to test and fix what is needed for next.js 7 asap.

Your problem looks related to static export, which is not supported by this module. Could you try with the bare example from the readme to narrow down the problem?

[paschaldev]

@fridays I read the documentation on next.js 7 and I think something changed with routing in next.js 7. Like I said earlier, my app works perfectly with this library on next.js 6. I only had the issue with next.js 7.

My configuration has not changed yet.

I have rolled back to next.js 6 for now pending when the issue will be resolved.

This is my express server

server.js

const express = require('express');
const compression = require('compression');
const next = require('next');
const fs = require('fs')

const http = require('http');
const https = require('https');

const dev = process.env.NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const HTTPS_PORT = process.env.HTTPS_PORT || 8443;

var httpContext = require('express-http-context');
const contextService = require('request-context');

const app = next({dev });

const routes = require('./routes')
const handler = routes.getRequestHandler(app, ({req, res, route, query}) => {

    contextService.set('cookie', req.headers.cookie);

    app.render(req, res, route.page, query)
})

app.prepare().then(() => {

    const server = express()

    if (process.env.NODE_ENV === "production") {
        server.use( compression() );
    }
    /*server.use( httpContext.middleware );*/
    server.use(contextService.middleware('request'));
    server.use( handler )

    var httpServer = http.createServer(server);
    httpServer.listen(PORT, (err) => {
        if (err) throw err;
        console.log(`> Ready on port: ${PORT}`); 
    });

    if( dev ) {

        //HTTPS (Needed for facebook authentication)
        var credentials = {
            key  : fs.readFileSync('./src/server.key'),
            cert   : fs.readFileSync('./src/server.crt'),
            passphrase: 'doctor'
        }

        https.createServer(credentials, server).listen(HTTPS_PORT, (err) => {
            if (err) throw err;
            console.log(`> HTTPS Ready on port: ${HTTPS_PORT}`); 
        });
    }
});

Thank you very much. Do take your time to check it out and try with next.js 7.

[krtwkns]

This is my configuration and this is works perfect in next.js 7.

server/index.js

// server.js
const next = require("next");
const compression = require("compression");
const cookiesMiddleware = require("universal-cookie-express");
const express = require("express");

const app = next({ dev: process.env.NODE_ENV !== "production" });
const port = 3000;

// routing
const routes = require("../routes");
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
  express()
    .use(handler)
    .use(cookiesMiddleware())
    .use(compression())
    .listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on http:localhost:${port}`);
    });
});

next.config.js

// next.config.js
const withSass = require("@zeit/next-sass");

module.exports = withSass({
  webpack: (config, { dev }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          // eslint options (if necessary)
        }
      });
    }
    return config;
  }
});

routes.js

const routes = require("next-routes");

/**
 * dynamic routes next-routes .add(name, pattern, page)
 * https://github.com/fridays/next-routes
 */
module.exports = routes()
  .add({
    name: "auth",
    pattern: "/auth",
    page: "containers/Auth"
  })
  .add({
    name: "dashboard",
    pattern: "/",
    page: ""
  });

[paschaldev]

Ok guys I just realized the problem was because I had this in my next.config.js

const withSass = require('@zeit/next-sass')
const getRoutes = require('./src/routes')
const path = require('path')
const process = require('process')

module.exports = withSass({
    cssModules: false,

    exportPathMap: getRoutes, // <--- Here is the problem, removing this fixed the issue earlier reported
})

[krtwkns]

Ok guys I just realized the problem was because I had this in my next.config.js

const withSass = require('@zeit/next-sass')
const getRoutes = require('./src/routes')
const path = require('path')
const process = require('process')

module.exports = withSass({
  cssModules: false,

  exportPathMap: getRoutes, // <--- Here is the problem, removing this fixed the issue earlier reported
})

if this issue is fixed, please close this issue