Next.js: TypeError: Cannot read property 'toLowerCase' of undefined

[naquiuddin]

Everything was working fine until I did npm update, I see this problem.

TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (/Users/****/Projects/****/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776:27)
    at ReactDOMServerRenderer.render (/Users/****/Projects/****/node_modules/react-dom/cjs/react-dom-server.node.development.js:2755:23)
    at ReactDOMServerRenderer.read (/Users/****/Projects/****/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
    at renderToStaticMarkup (/Users/****/Projects/****/node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)
    at _callee3$ (/Users/****/Projects/****/node_modules/next/dist/server/render.js:224:100)
    at tryCatch (/Users/****/Projects/****/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/****/Projects/****/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/****/Projects/****/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/****/Projects/****/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/****/Projects/****/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

the only change I see that could break is "next": "^4.0.0-beta.1", changing to "next": "^4.0.0-beta.2". I reverted next back to "next": "^4.0.0-beta.1", but the isssue persists.

I run Next using node server.js using next-routes.

Server side code is:

// server.js
const next = require('next');
const routes = require('./lib/routes');
const { createServer } = require('http');

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
  createServer(handler).listen(port);
});

The issue is referenced here as well. Not sure whether it is React 16 or NEXT.js
https://github.com/amcharts/amcharts3-react/issues/53

Any idea what could be the issue?

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.0.0.beta.2 |
| node | v8.4.0 |
| OS | 10.12.6 |
| browser | Chrome 61.0.3163.100 |
| next-routes| ^1.0.40" |
| react | 16 |

[lfades]

did you also update react-dom ?

[d3sandoval]

Make sure you're importing things correctly. I had the same issue when i tried to import a component like this:
import { ProfileImage } from '../components/ProfileImage';
instead of like this:
import ProfileImage from '../components/ProfileImage';

[timneutkens]

@d3sandoval thanks, lets close this then 👍

[williamboman]

I'm having a similar issue (I don't use zeit at all, just found this issue via Google). I doubt @d3sandoval's suggestion fixes the issue. I'm having a similar stack trace as OP and the issue seems to be rendering to static markup too early (??) in production mode.

import {renderToStaticMarkup} from 'react-dom/server'

const expandedArrowHTML = renderToStaticMarkup(
    <Icon icon='caret-down' />
)

The above snippet works in dev, but fails with a similar stack trace as OP when built with NODE_ENV=production.

I've worked around this by doing:

import {renderToStaticMarkup} from 'react-dom/server'
import once from 'once'

const getExpandedArrowHTML = once(() => renderToStaticMarkup(
    <Icon icon='caret-down' />
))

where getExpandedArrowHTML is first invoked long after React mounts and does initial renders of my component tree.

[rickbyington]

This was happening to me with next.js and a shared lerna library on some shared code and the problem was the react component wasn't defined with a const, instead it looked like this:

let Thing = () => {
   return (
    <span>Test</span>
  )
}
export Thing

However the 'Thing' component needed to be a const. I'm assuming the variable was disappearing from scope and thus the error. Not sure if it is the same issue you might be having, but I hope to help some one.

//This worked
export const Thing = () => {
   return (
    <span>Test</span>
  )
}

[ayushgupta0610]

@naquiuddin How did you finally resolve the same? I'm having the exact same problem and trying to work with the solution that's provided here: https://github.com/nozzle/react-static/issues/209#issuecomment-348500044 didn't really help me!

[lfades]

@ayushgupta0610 stateless functions are allowed, it's probably something related to the way you're transpiling the imports, are you using typescript or some special babel config ?

[naquiuddin]

Sorry, I didn't respond earlier. Basically this is occurring when we close the tag with two angle brackets at the end ( >> ) in JSX code. When I fixed this with single angle bracket ( > ). This issue isn't showing up. Hope this helps.

For example if you do <p>Some paragraph</p>> instead of <p>Some paragraph</p>

[gino8080]

i had some comment on my component that produced the problem
like:

```javascript
{/*

````
pay attention to comments so!

[leonel-ai]

^ Exactly what happened to me. Check your comments.