Object(...) is not a function - Named exported HOC's inside a component file and used on a child component of its component break bundle on runtime [ Repo example inside ]

Introduction

First of all I have to say that I am really concerned about its not a good practice to create a HOC on a component file and name export it but…

I’ve created a repository with a real case scenario isolated and so so simplified: https://github.com/carlesnunez/webpack-hoc-from-child-error

• master branch is the branch with the bug
• master-fixed branch is the branch with the ‘patch’

The problem

In the example branch master you’ll see that I’m using a HOC created on component PARENT app.js exported as a named export and consumed on the componentConsumingHOC file.

Doing this and bundling everything to production code does the next runtime error:

Uncaught TypeError: Object(...) is not a function

If we check the code we’ll see the code of this ‘strange’ error:

Nothing weird right? But it seem that the ‘Object’ that can use is our myHOC function.

If we step further into the error checking it with devtool: ‘none’ and mode:‘production’ we will see the next bundled code:

When s seems to be our HOC

To check it run:

> npm run build

And use a the dev server that you prefeer I’ve used:

> cd build && python -m SimpleHTTPServer 8082

Go to http://localhost:8082 and look at the console.

The ‘patch’

Don’t declare High order components that will be consumed by childrens on it’s parent component files.

To check it run:

> git checkout master-fix

> npm run build

And use a the dev server that you prefeer I’ve used:

> cd build && python -m SimpleHTTPServer 8082

Conclusions

I am really concerned about its not a good practice to create a HOC on a component file and name export it but…

When I create a HOC on a parent component export it as a named export and consume it from a child component code breaks on runtime.

I’m not really sure if is a webpack problem, babel… Seems that is trying to use a module before Its declared or maybe it can’t even reach which module it is on runtime and it just throw the error.

What could be happening? Is this a bug? Hope it helps others

[jure]

I’ve faced a similar issue (worked fine in dev, but had the Object(...) is not a function issue in production builds) and disabling the concatenateModules optimization resolved it.

The component in question was a HOC that used recompose and styled-components. 🤷‍♂️

If I can get some tips on what to look at/for, I’d be happy to dig a bit deeper.

[sokra]

Yeah I also think this is working as expected as it’s a circular dependencies. You can probably fix it this way:

- export const myHOC = (Component) => {
+ export function myHOC(Component) {