TypeError: Cannot read property 'toLowerCase' of undefined

From googling around it sounds like this might be caused by react-dom #10212 but wanted to see if you had any advice

Full Repo

error

> react-static build


=> Copying public directory...
=> [✓] Public directory copied: 0.841ms
=> Building Routes...
=> [✓] Routes Built: 2286.544ms
=> Bundling App...
=> Build Stage: prod
=> Build Stage: node
=> [✓] App Bundled: 4086.444ms
=> Exporting Routes...
TypeError: Cannot read property 'toLowerCase' of undefined
    at a.renderDOM (/Users/acarr/Code/RW/firebase-example/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:391)
    at a.render (/Users/acarr/Code/RW/firebase-example/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:228)
    at a.read (/Users/acarr/Code/RW/firebase-example/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:250)
    at renderToString (/Users/acarr/Code/RW/firebase-example/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:6)
    at renderStringAndHead (/Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:228:68)
    at Object.renderToHtml (/Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/utils.js:188:14)
    at _callee$ (/Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:251:39)
    at tryCatch (/Users/acarr/Code/RW/firebase-example/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/acarr/Code/RW/firebase-example/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/acarr/Code/RW/firebase-example/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:116:191)
    at /Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:116:437
    at new Promise (<anonymous>)
    at /Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:116:99
    at /Users/acarr/Code/RW/firebase-example/node_modules/react-static/lib/static.js:369:30
    at Array.map (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-static-example-basic@1.0.1 build: `react-static build`

package.json

{
  "name": "react-static-example-basic",
  "version": "1.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "react-static start",
    "build": "react-static build",
    "serve": "serve dist -p 3000"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "bootstrap": "^4.0.0-beta.2",
    "css-loader": "^0.28.7",
    "dotenv": "^4.0.0",
    "eslint-config-react-tools": "1.x.x",
    "extract-text-webpack-plugin": "^3.0.2",
    "firebase-tools": "^3.15.2",
    "node-sass": "^4.7.2",
    "prismic-dom": "^2.0.6",
    "prismic-javascript": "^1.4.1",
    "prismic-reactjs": "^0.2.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.2.0",
    "react-static": "^4.3.4",
    "sass-loader": "^6.0.6",
    "serve": "^6.1.0",
    "style-loader": "^0.19.0"
  }
}

static.config.js

import 'dotenv/config'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import { RichText } from 'prismic-dom'
import Prismic from 'prismic-javascript'

export default {
  getSiteProps: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const postsReq = Prismic.api(process.env.PRISMIC_API_URL)
      .then(api => api.query('[ at(document.type, "post") ]'))
      .then(response => response.results)

    const homepageReq = Prismic.api(process.env.PRISMIC_API_URL)
      .then(api => api.query('[ at(document.type, "homepage") ]'))
      .then(response => response.results[0])

    const [
      posts,
      homepage,
    ] = await Promise.all([
      postsReq,
      homepageReq,
    ])

    return [
      {
        path: '/',
        component: 'src/containers/Home',
        getProps: () => ({
          homepage: {
            id: homepage.id,
            title: RichText.asText(homepage.data.homepage.title.value),
            description: RichText.asText(homepage.data.homepage.description.value),
            contents: homepage.data.homepage.contents.value,
          },
        }),
      },
      {
        path: '/about',
        component: 'src/containers/About',
      },
      {
        path: '/posts',
        component: 'src/containers/Posts',
        getProps: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/${post.slugs[0]}`,
          component: 'src/containers/Post',
          getProps: () => ({
            post,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  webpack: [
    (config, { stage, defaultLoaders }) => {
      console.log(`=> Build Stage: ${stage}`)
      switch (stage) {
        case 'dev':
          config.module.rules = [{
            oneOf: [
              defaultLoaders.jsLoader,
              {
                test: /\.scss$/,
                exclude: /module\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
              },
              {
                test: /module\.scss$/,
                use: [
                  'style-loader',
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true,
                      localIdentName: '[folder]__[local]___[hash:base64:5]',
                    },
                  },
                  'sass-loader',
                ],
              },
              defaultLoaders.fileLoader,
            ],
          }]
          break
        case 'prod':
          config.module.rules = [{
            oneOf: [
              defaultLoaders.jsLoader,
              {
                test: /\.scss$/,
                exclude: /module\.scss$/,
                use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                    { loader: 'css-loader', options: { minimize: true } },
                    { loader: 'sass-loader' },
                  ],
                }),
              },
              {
                test: /module\.scss$/,
                use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        modules: true,
                        minimize: true,
                        importLoaders: 1,
                        localIdentName: '[folder]__[local]___[hash:base64:5]',
                      },
                    },
                    { loader: 'sass-loader' },
                  ],
                }),
              },
              defaultLoaders.fileLoader,
            ],
          }]
          config.plugins.push(
            new ExtractTextPlugin('style.css'),
          )
          break
        default:
          break
      }

      return config
    },
  ],
}

[D1no]

Also for anybody running into this issue: React v16 can create issues when the top level component is a statless function export default () => <...>. The dom renderer can not transpose them, leading to the issue 'toLowerCase' of undefined.

Solution

Change the the top level component to a react component and export it as default.

i.e. for react-static, use:

// App.js

class App extends React.Component {
  render() {
    return (
      <Router>
        ...
      </Router >
    );
  }
}

export default App;

instead of

// App.js

export default () => (
  <Router>
    ...
  </Router >
)

At some point, this might be useful to add to an FAQ.

[mtrabelsi]

I hate upgrade stupid bugs.