Can't load js, css

[Krakof]

Hi, Have these messages in browser console GET http://0.0.0.0:8081/_react-ssr/MyViewPage.css net::ERR_ABORTED 404 (Not Found) GET http://0.0.0.0:8081/_react-ssr/MyViewPage.js net::ERR_ABORTED 404 (Not Found)

Because of these, actions like: <span onClick={() => console.log("Click")}>Click me</span> not working.

ssr.config.js

module.exports = {
  id: 'styled-components',
};

Please share if you have any ideas anbout this I'm using nestjs-express with styled component. Thanks in advance

[saltyshiomix]

@Krakof

Thank you for your reporting the issue. Could you tell me more about this? If possible, please let me know the test repository reproducing this errors.

Best,

[saltyshiomix]

I've tried these:

server.js

app.get('/test', (req, res) => {
  res.render('MyViewPage');
});

views/MyViewPage.jsx

import '../lib/test';
import '../styles/test.css';

const TestPage = () => {
  return (
    <div>
      <p>Hello World</p>
    </div>
  );
};

export default TestPage;

lib/test.js

if (typeof window !== 'undefined') {
  alert('hello');
}

styles/test.css

body {
  color: white;
  background-color: black;
}

[saltyshiomix]

@Krakof

I reproduced this error on my Windows when production mode.

[saltyshiomix]

@Krakof

I fixed this issue by the commits above. Could you try @react-ssr/nestjs-express@^0.21.12 ?

[Krakof]

@saltyshiomix thanks, a lot. One more question why all the components should be default exported, even styled components. Have multiple notification in concole. export 'default' (imported as 'Page') was not found in

[Krakof]

Everything is fixed with new version. Thanks

[Krakof]

Hey @saltyshiomix, Hope you are good in this pandemic time.

We are hosting our sevice at heroku and because of all the actions before app.listen(including ssr) it takes too much time to start the service. Sometimes it cause service start timeout issue that follows to service restart

...
await register(app as NestExpressApplication);
await app.listen(port, '0.0.0.0');

So our solution just - start service and after start ssr.

await app.listen(port, '0.0.0.0');
await register(app as NestExpressApplication);

It's working but in this case we have the same console messages that I described 4 months ago. Maybe you have some thoughts about this. If no, sorry for desturbing and please close this issue.

Thanks in advance

[ruscon]

@saltyshiomix, we faced the same issue as described here https://github.com/saltyshiomix/react-ssr/issues/21#issuecomment-666328411, could you help?

[saltyshiomix]

Hi, @Krakof , thank you for using react-ssr in your project!

I'm good and I hope you are good, too 👍

Currently react-ssr compiles whole source codes when register(app) is called and it holds compiled codes in our memory file system. And it expects that the compiled output exists in the memory, so if we call register(app) after app.listen(), we reproduce that errors.

@Krakof @ruscon

Sorry I have no idea to avoid this problem in the current project structure. So, if you feel the limit of react-ssr and you have the time to use NEXT.js instead of react-ssr, please try the example solution the below:

THE IDEA

const app = next(options);

app.get('some-page', async (req, res) => {
  const data = { message: 'hello' };

  // pass the server data to the React client
  await this.app.render(req, res, '/path/to/some-page', data);
});

And we can get the data in /path/to/some-page:

// yes like react-ssr
export default function(props) {
  return <p>{props.message}</p>;
}

// serialize the server data
export async function getServerSideProps({ query }: NextPageContext) {
  return {
    props: JSON.parse(JSON.stringify(query)),
  };
}

[Krakof]

Thanks a lot.