Error with multiple esi-includes on one page

[watzak]

Hello @dunglas

Thanx for your great work!

I have a php website where I want to include multiple esi-includes :
<esi:include src="/esi/fragment?param=1" alt="Alternative text1" /> <esi:include src="/esi/fragment?param=2" alt="Alternative text2" />

On the other hand I have nextjs in place with version 9.1.5 with customized server.js:
server.js
`const express = require('express')
const next = require('next')
const { path, serveFragment } = require('react-esi/lib/server')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
const server = express()

server.use((req, res, next) => {
// Send the Surrogate-Control header to announce ESI support to proxies (optional with Varnish)
res.set('Surrogate-Control', 'content="ESI/1.0"')
next()
})

server.get(path, (req, res) =>
serveFragment(
req,
res,
fragmentID => require(./components/${fragmentID}).default
)
)
server.get('*', handle)

server.listen(3000, err => {
if (err) throw err
console.log(> Ready on http://localhost:3000)
})
})`

package.json
{ "name": "nextson", "version": "1.0.0", "private": true, "main": "dist/server.js", "scripts": { "dev": "node server.js", "build_old": "next build", "start_old": "next start", "build": "next build", "start": "NODE_ENV=production node server.js" }, "dependencies": { "@zeit/next-css": "^1.0.1", "@zeit/next-sass": "^1.0.1", "dotenv-webpack": "1.5.7", "express": "^4.17.1", "isomorphic-unfetch": "^3.0.0", "next": "^9.1.5", "nextjs-redirect": "^1.0.2", "node-sass": "^4.13.0", "react": "^16.9.0", "react-dom": "^16.9.0", "react-esi": "^0.2.0", "react-slick": "^0.25.2", "slick-carousel": "^1.8.1", "url-loader": "^2.2.0" }, "devDependencies": { "@babel/cli": "^7.6.0", "@babel/node": "^7.6.1" } }

pages/hoc/fragment.js
`import React from 'react';
import withESI from 'react-esi';
import Layout from '../../components/layout';
import myfragment from '../../components/myfragment';

//const MyFragmentESI = withESI(myfragment, 'myfragment');
// The second parameter is an unique ID identifying this fragment.
// If you use different instances of the same component, use a different ID per instance.

class Fragment extends React.Component {
static getInitialProps({query}) {
return {query}
}

render() {
    console.log(this.props.query.param);
    const name = 'myfragment_'+this.props.query.param;
    console.log(name);
    const MyFragmentESI = withESI(myfragment, name);
    return(
      <Layout>
        <h1>React ESI demo app</h1>
        <MyFragmentESI greeting="test greeting!" />
      </Layout>
    );
}

}

export default Fragment;
`

components/layout.js
import Link from 'next/link'

export default ({ children, title = 'This is the default title' }) => (

Home {' '} | About {' '} | Contact

{children}

<footer>{'I`m here to stay'}</footer>

)

components/myfragment.js
`import React from 'react';

export default class myfragment extends React.Component {

constructor(props) {
super(props)
this.click = this.click.bind(this)
}

click() {

}

render() {
return (

A fragment that can have its own TTL

{this.props.greeting}

{this.props.dataFromAnAPI}

Take the Shot!

);
}

static async getInitialProps({ props, req, res }) {
if (res) {
res.setHeader('Surrogate-Control','content="ESI/1.0"');
}

return new Promise(resolve => {
  if (res) {
    // Set a TTL for this fragment
    res.setHeader('Cache-Control', 's-maxage=60, max-age=30');
  }

  // Simulate a delay (call to a remote service such as a web API)
  setTimeout(
    () =>
      resolve({
        ...props, // Props coming from index.js, passed through the internal URL
        dataFromAnAPI: 'Hello there'
      }),
    2000
  );
});

}
}
`

varnish settings:
/etc/varnish/default.vlc
`

backend nextjs1 {
.host = "127.0.0.1";
.port = "3001";
.max_connections = 100;
.first_byte_timeout = 800s;
}

sub vcl_recv {
...
if ( req.url ~ "^/_next/") {
set req.url = regsub(req.url, "^/nextjs/", "/");
set req.backend_hint = nextjs.backend();
return (hash);
}

if (req.url ~ "^/esi/") {
    set req.url = regsub(req.url, "^/esi/", "/hoc/");
    # Send Surrogate-Capability headers to announce ESI support to backend
    set req.http.Surrogate-Capability = "key=ESI/1.0";
    set req.backend_hint = nextjs.backend();
    return (hash);
} 

...
}
sub vcl_backend_response {

set beresp.do_esi = true;

...
}

`
Result:

To u see by change what I am doing wrong?
The ssr part is not working properly!

getting following error:

Thanx for your help! Would love to get your library into production

Cheers Klausi

[jamyouss]

Hello @watzak,

Is you issue still relevant ? Have you tried with the latest version ?
If you still have the issue, please reformat you issue description because it hard to understand your issue.

[watzak]

Hello @jamyouss
I haven't tried out your latest version as it's not relevant anymore for me! Have found a different solution!
Thanx anyway
Cheers