1

I'm learning React server-side rendering. Using Koa to build the server side. Follow the official document, I installed react and react-dom:

yarn add react react-dom

And next in my server side entry:

import Koa from 'koa'
import Router from '@koa/router'
import { renderToString } from 'react-dom/server'
import ReactDOMServer from 'react-dom/server';
import Home from '../client/components/HomePage'

const app = new Koa()
const router = new Router()
const content = ReactDOMServer.renderToString(Home)

// print logger
app.use(async (ctx, next) => {
  await next()
  const rt = ctx.response.get('tt')
  console.log(`${ ctx.method }-${ ctx.url }-${ rt }`)
})

// set time
app.use(async (ctx, next) => {
  const start = Date.now()
  await next()
  const interval = Date.now() - start
  ctx.set('tt', `${ interval }ms`)
})

router.get('/', ctx => {
  ctx.body = `
    <html>
      <head>
        <title>hello</title>
      </head>
      <body>
        <div id="app">${ content }</div>
      </body>
    </html>
  `
})

app.use(router.routes())

app.use(async ctx => {
  ctx.body = 'koa'
})

app.listen(3000, () => {
  console.log('server deployed on port 3000...')
})

But when I tried to start my server, it just told me:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/ssr-plg/implessr/server/node_modules/react-dom/server' imported from /Users/ssr-plg/implessr/server/index.js
Did you mean to import react-dom/server.js?

Here is my pkg.json:

{
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "license": "MIT",
  "scripts": {
    "start": "nodemon index.js"
  },
  "dependencies": {
    "@koa/router": "^10.0.0",
    "koa": "^2.13.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

You can see my whole code in this repo for detail.

Liam_1998
  • 1,157
  • 3
  • 12
  • 27

1 Answers1

0

I'm sure you've probably fixed this by now, but did you need to specify --experimental-specifier-resolution=node when running your script?

See Customizing ESM specifier resolution algorithm

Paul Edwards
  • 1
  • 1