importComponent not working

[tjwelde]

This is my intent (choose one)

• I want to report a bug
• I want to request a feature or change
• I want to provide or change a feature

The problem

Hi,
we just updated from rc27 to 11.0.1 and we really like the update. It also comes at the right time, because we wanted to introduce dynamic imports.
Unfortunately the production build is not working, when using importComponent.
The log says:

TypeError: moduleFileMap[module] is not iterable
    at modules.reduce (/myproject/node_modules/@untool/react/lib/render.js:11:53)
    at Array.reduce (<anonymous>)
    at reduce (/myproject/node_modules/@untool/react/lib/render.js:10:31)
    at determineAssets (/myproject/node_modules/@untool/react/lib/render.js:42:18)
    at render (/myproject/node_modules/@untool/react/mixins/mixin.server.js:41:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)

In the method determineAssets in @untool/react/lib/render.js I logged
moduleFileMap:

{ '47': [ '2-a7c897e789a4.css', 'myproject-2-0e0ff153dd3e.js' ],
  '48': [ '2-a7c897e789a4.css', 'myproject-2-0e0ff153dd3e.js' ],
  '67Bu': [ '2-a7c897e789a4.css', 'myproject-2-0e0ff153dd3e.js' ],
  ZI3r: [ '2-a7c897e789a4.css', 'myproject-2-0e0ff153dd3e.js' ],
  null: [ '2-a7c897e789a4.css', 'myproject-2-0e0ff153dd3e.js' ] }

and modules:
[ 'PW+f', 'PW+f' ]

Proposed solution

I think the last element in the moduleFileMap object is suspicious, since its key is null.

[robin-drexler]

Hey @tjwelde,

thanks for taking the time to report the issue.

Can you please show an example how you use importComponent?

I just tried it in a minimal example and could not reproduce the issue.

[robin-drexler]

Can you please also post the output of:

npm ls hops; npm ls webpack; npm ls @untool/core; npm ls @untool/express; npm ls @untool/webpack; npm ls @untool/yargs (or, if you are using yarn: yarn list --pattern 'hops|@untool|webpack').

Thanks!

[tjwelde]

import React from 'react';
import { importComponent } from 'hops';
...
const Home = importComponent('./Home');
...
if (path === ROOT_PATH) {
    content = <Home id={id} />;
}
...
  return (
    <Page
      path={path}
      content={content} 
      ...
    />
...
)
...

In Page we render {content} inside some other Components.
Page also uses GraphQL

[tjwelde]

Output from yarn list:

yarn list v1.12.3
├─ @storybook/core@4.0.0-alpha.24
│  ├─ webpack-dev-middleware@3.4.0
│  └─ webpack-hot-middleware@2.24.2
├─ @untool/core@1.0.0-rc.14
├─ @untool/express@1.0.0-rc.14
├─ @untool/react@1.0.0-rc.14
├─ @untool/webpack@1.0.0-rc.14
│  └─ webpack@4.28.0
│     └─ webpack-sources@1.3.0
├─ @untool/yargs@1.0.0-rc.14
├─ case-sensitive-paths-webpack-plugin@2.1.2
├─ dotenv-webpack@1.5.7
├─ generate-page-webpack-plugin@1.1.1
├─ hops-config@11.0.1
├─ hops-express@11.0.1
├─ hops-graphql@11.0.1
├─ hops-mixin@11.0.1
├─ hops-react@11.0.1
├─ hops@11.0.1
├─ terser-webpack-plugin@1.1.0
├─ uglifyjs-webpack-plugin@1.3.0
├─ webpack-bundle-analyzer@2.13.1
├─ webpack-dev-middleware@3.2.0
├─ webpack-hot-middleware@2.23.1
├─ webpack-log@2.0.0
├─ webpack-sources@1.2.0
└─ webpack@4.20.2
   └─ webpack-sources@1.3.0

[tjwelde]

we also have a custom mixin for sass support

[robin-drexler]

It appears you have two versions of webpack installed webpack@4.20.2 and webpack@4.28.0. This can cause issues.

Depending on how you've installed the webpack@4.20.2 version, it should be sufficient to rm the yarn.lock and run yarn again. If you don't feel comfortable with regenerating the entire yarn.lock, you could also give https://github.com/atlassian/yarn-deduplicate a try.

Can you please ensure you have only one webpack version installed and try again?

[tjwelde]

Unfortunately that didn't solve the issue either. But the dependencies look much better :)
Output from yarn list:

yarn list v1.12.3
├─ @svgr/webpack@4.1.0
├─ @untool/core@1.0.0-rc.14
├─ @untool/express@1.0.0-rc.14
├─ @untool/react@1.0.0-rc.14
├─ @untool/webpack@1.0.0-rc.14
├─ @untool/yargs@1.0.0-rc.14
├─ case-sensitive-paths-webpack-plugin@2.1.2
├─ dotenv-webpack@1.5.7
├─ hops-config@11.0.1
├─ hops-express@11.0.1
├─ hops-graphql@11.0.1
├─ hops-mixin@11.0.1
├─ hops-react@11.0.1
├─ hops@11.0.1
├─ html-webpack-plugin@4.0.0-beta.5
├─ terser-webpack-plugin@1.1.0
├─ webpack-bundle-analyzer@2.13.1
├─ webpack-dev-middleware@3.4.0
├─ webpack-hot-middleware@2.24.3
├─ webpack-log@2.0.0
├─ webpack-sources@1.3.0
└─ webpack@4.28.1

[robin-drexler]

I tried to reproduce the issue based on your code snippets but unfortunately wasn't able to.

Can you please try to create a minimal repository where this bug is reproducible, because there is a lot of unknowns here, like

• what does Home look like?
• what's inside your main file?
• what do your mixins do?

thanks!

[tjwelde]

Ok, will try to recreate.

[tjwelde]

Ok, after stripping the project completely down, similar to the output of create-hops-app, I found the issue: reexporting components.
Our folder structure is as follows:

└─ containers
   └─ Home
      ├─ Home.js
      ├─ Home.spec.js
      └─ index.js

and in the file, where we want to import Home, we do it like this:
const Home = importComponent('./Home');

So we actually import Home/index.js, which looks like this:

export { default } from './Home';

This indirect import causes our issues. We can circumvent it for now, by using the complete path.

[tjwelde]

Unfortunately we can't rally circumvent it, since other projects also use reexporting and will break. E.g. import { Query } from 'react-apollo'; and using it will break.

[robin-drexler]

Thanks for digging into it. We'll have a look. Considering the holidays (which I hope you'll enjoy dearly) it could take a bit for a fix to land.

We'll keep you updated.

[tjwelde]

Yes, this was also my last deed for this year. I wish you a merry christmas and a happy new year.

[toomuchdesign]

It seems to be an issue related to untool/react.

The package iterates over a moduleFileMap object which contains a few invalid keys ("" and null) when:

• Webpack's ModuleConcatenationPlugin is introduced in production mode by untool/webpack.
• User dynamically import re-exported modules

It seems to be a known webpack semi-issue, in relation to which Webpack's maintainer suggested to use an alternative way to identify generated modules.

Skipping invalid entries seems to fix the issue (but I couldn't guarantee about possible side-effects 😃).

[herschel666]

@tjwelde Hey, sorry for the premature closing of that issue, there was too much Github magic going on. 😅

We just released 11.1.0 of Hops. This includes the fix for the importComponent issue you were witnessing. Please give it a try and feel free to re-open the issue, if it still doesn't work for you.

[tjwelde]

Thanks a lot guys, works nicely.