Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__

Process

In order to find a potential solution to this issue, I had to tinker with the optimization module, which was indeed the issue here, even when not enabled surprisingly. My best guess is that some parameters are set to default in production mode and not in dev mode and this causes the issues of imports and undefined properties.

I decided to try replicating the deployment environment and check if I could at least “break” the development as well and investigate the issue from here. These are the parameters that are different between production and development and that were suspect in causing the issue at hand (you can try yourself by switching to the opposite value to put your deployment like the development environment for example).

On the link I provided in the comment, the user was explaining that the issue was at deployment level and that the way the vendors chunk were built, were colliding with the main chunks and cuts the entry to one another. One of the solution was to use concatenateModules: false apparently, but to no avail, it didn’t solve my issue. So I tried with the others and found the issue bellow.

Potential solution

in module.exports, the optimization object should be edited

optimization: {
    minimize: true,
    namedModules: true,
    namedChunks: true,
    removeAvailableModules: true,
    flagIncludedChunks: true,
    occurrenceOrder: false,
    usedExports: true,
    concatenateModules: true,
    sideEffects: false, // <----- in prod defaults to true if left blank
}

Edit: all of these parameters are set to their opposite between production and development, tweak them at your own leisure, some issues stems from them

Explanation

After switching all the parameters I found that the sideEffects one is the one that breaks things and I see why:

The sideEffects flag will break down imports into separate ones as follow, as per the documentation on sideEffects:

import { a, b } from "big-module-with-flag"

is rewritten to

import { a } from "big-module-with-flag/a";
import { b } from "big-module-with-flag/b";

And will try to optimize imports accordingly across the modules, which can cause issues in production. Normally this should help optimizing the size of the package by reducing the bundles, at the cost of removing some imports but can break things at import.

I hope the explanation was somewhat clear, if somebody has deeper knowledge on WebPack optimization, any documentation and enhancement would be welcome.

Related Posts:

  1. How to import image (.svg, .png ) in a React Component
  2. React Uncaught Error: Target container is not a DOM element [duplicate]
  3. how to use react require syntax?
  4. where is create-react-app webpack config and files?
  5. Invariant Violation: Objects are not valid as a React child
  6. Invariant Violation: Objects are not valid as a React child
  7. “SyntaxError: Unexpected token < in JSON at position 0"
  8. What is Virtual DOM?
  9. React.js: Set innerHTML vs dangerouslySetInnerHTML
  10. React – uncaught TypeError: Cannot read property ‘setState’ of undefined
  11. Understanding unique keys for array children in React.js
  12. How to do a redirect to another route with react-router?
  13. Jest spy on functionality
  14. Difference between npx and npm?
  15. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  16. Reactjs – Form input validation
  17. TypeScript React.FC confusion
  18. Error Running React Native App From Terminal (iOS)
  19. Axios Delete request with body and headers?
  20. Loop inside React JSX
  21. Can’t resolve module (not found) in React.js
  22. How to implement navbar using react
  23. Loop inside React JSX
  24. Understanding React-Redux and mapStateToProps()
  25. React this.setState is not a function
  26. Console logging for react?
  27. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  28. React: trigger onChange if input value is changing by state?
  29. In reactJS, how to copy text to clipboard?
  30. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  31. You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
  32. webpack: Module not found: Error: Can’t resolve (with relative path)
  33. React-Router only one child
  34. Getting Unexpected Token Export
  35. What is prevState in ReactJS? [duplicate]
  36. React with ES7: Uncaught TypeError: Cannot read property ‘state’ of undefined
  37. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  38. Setting a backgroundImage With React Inline Styles
  39. React – TypeError: Cannot read property ‘props’ of undefined
  40. How to pass props to {this.props.children}
  41. React eslint error missing in props validation
  42. Module not found can’t resolve
  43. React Context vs React Redux, when should I use each one?
  44. Uncaught TypeError: Cannot read property ‘props’ of null
  45. ReactJS: setTimeout() not working?
  46. How to refresh a Page using react-route Link
  47. React Error: Target Container is not a DOM Element
  48. How to determine the installed webpack version
  49. Console is throwing Unterminated JSX contents error
  50. How to scroll to an element?
  51. How to handle the `onKeyPress` event in ReactJS?
  52. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  53. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  54. ReactJS: setTimeout() not working?
  55. What does “export default” do in JSX?
  56. How to add multiple classes to a ReactJS Component?
  57. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  58. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  59. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  60. React.js – Can’t read property of undefined
  61. module.exports “Module is not defined”
  62. how to download file in react js
  63. Jest TypeError: Path must be a string. Received undefined
  64. Trying to use fetch and pass in mode: no-cors
  65. React’s setState method with prevState argument
  66. onEnter not called in React-Router
  67. Pass react component as props
  68. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  69. How to clear react-native cache?
  70. Async/await in componentDidMount to load in correct order
  71. Why use Redux over Facebook Flux?
  72. Local package.json exists, but node_modules missing
  73. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  74. Access Control Origin Header error using Axios
  75. Cannot read property ‘getHostNode’ of null
  76. Can’t perform a React state update on an unmounted component
  77. onClick not working React js
  78. How can I use webpack with express?
  79. This.props.dispatch not a function – React-Redux
  80. React-Router : What is the purpose of IndexRoute?
  81. How to add a keyboard listener to my onClick handler?
  82. How to add a keyboard listener to my onClick handler?
  83. React router not showing browser history
  84. e.target.value on an input field ReactJs, how does it work?
  85. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  86. command not found: jest
  87. Jest encountered an unexpected token
  88. ReactJS – .JS vs .JSX
  89. ReactJS: Maximum update depth exceeded error
  90. React, Uncaught ReferenceError: ReactDOM is not defined
  91. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  92. Uncaught ReferenceError: React is not defined
  93. What do these three dots in React do?
  94. Expected ‘this’ to be used by class method
  95. What does “export default” do in JSX?
  96. Update style of a component onScroll in React.js
  97. Correct modification of state arrays in React.js
  98. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  99. “React.Children.only expected to receive a single React element child” error when putting and in a
  100. Await is a reserved word error inside async function

Leave a Comment