breaks in React 16: Cannot read property 'toLowerCase' of undefined

[MarkLyck]

I'm rewriting an application in React Fiber and AmCharts no longer seems to work.

I can console log AmCharts and AmCharts.React just fine, but as soon as I try to render it like so:

return <AmCharts.React {...config} />

I get the following error:

Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1989:27)
    at ReactDOMServerRenderer.render (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1983:21)
    at ReactDOMServerRenderer.read (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1951:19)
    at renderToString (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:2184:25)
    at renderPage (/Users/markly/web/next.js/dist/server/render.js:164:24)
    at Function.getInitialProps (/Users/markly/web/PWA/.next/dist/pages/_document.js:61:24)
    at _callee$ (/Users/markly/web/next.js/dist/lib/utils.js:36:30)
    at tryCatch (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:117:21)

AmCharts version 2.0.7

any idea how to fix this?

[naquiuddin]

This issue is occurring for me as well. I am also using Next.js

[DreaminDani]

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';

[Pauan]

I have been unable to reproduce this issue.

I have tested all of our examples with React 16 and they all work perfectly.

Can you please show me the code that you are using to import amcharts3-react?

Also, make sure that you are using version 3.0.2 of amcharts3-react

[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>
  )
}

[Pauan]

@rickbyington Your first code example is invalid. Try this code instead:

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

(Notice the {} around Thing)

[aconital]

@Pauan I'm getting the exact same crash on server side rendering. I narrowed it down and it seems the crash is this:
TypeError: Cannot read property 'toLowerCase' of undefined at a.renderDOM (/Users/hirad/projects/react_app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:405) at a.render (/Users/hirad/projects/react_app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:228) at a.read (/Users/hirad/projects/react_app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:250) at renderToString (/Users/hirad/projects/react_app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:6) at /Users/hirad/projects/react_app/config/server/handleRender.js:72:44

Apparently the type is undefiend. This is the object that is trying to run toLowerCase() on:

{ '$$typeof': Symbol(react.element), type: undefined, key: '.1', ref: null, props: { options: { type: 'serial', theme: 'light', color: 'white', chartCursor: [Object], categoryField: 'date', categoryAxis: [Object], valueAxes: [Object], autoMargins: false, marginRight: 50, marginLeft: 125, marginBottom: 80, marginTop: 10, legend: [Object], graphs: [Object], dataProvider: [Object] }, style: { width: '100%', height: '450px' } }, _owner: null }

I following the example to load my chart:
<AmCharts.React options={chartsConfig} style={{ width: '100%', height: graphHeight, ...printStyles, }} />

[savalanpour]

did you also update react-dom ?

[Way-U-Need]

what was the solution?

[RomanLumbov]

update react-dom solves the issue