babel7 causes UniversalComponent to fail when using a hash table instead of dynamic imports: "ReferenceError: _universalImport is not defined"

[chapati23]

Hey man, been playing around with babel7 in this repo some more and ran into an issue that we had solved already. Could be an error with babel-plugin-universal-import (?)

How to reproduce

1. Check out this babel6 branch that has my file structure applied
2. Run yarn start
3. See that all works fine
4. Now check out this babel7 branch — the only difference is the upgrade to babel7 (check the diff)
5. Run yarn start
6. See the below exception of ReferenceError: _universalImport is not defined :-/

Description

Refresher Your file structure:

- components/
  - PageName.js

My file structure:

- components/
  - PageName/
    - index.js

Working in Babel 6 When using your dynamic import for the UniversalComponent there is this annoying webpack chunk issue that I'm currently working around by using a hash map for my UniversalComponent:

// ./components/UniversalComponent.js
import React from 'react'
import universal from 'react-universal-component'

import NotFound from './NotFound'
import Err from './Error'
import Loading from './Loading'

const options = Object.freeze({
  minDelay: 500,
  loading: Loading,
  error: Err
})

const components = {
  Admin: universal(() => import('../pages/Admin'), options),
  Home: universal(() => import('../pages/Home'), options),
  List: universal(() => import('../pages/List'), options),
  Login: universal(() => import('../pages/Login'), options),
  Video: universal(() => import('../pages/Video'), options)
}

const UniversalComponent = ({ isLoading, page }) => {
  const Component = components[page] || NotFound
  return <Component isLoading={isLoading} />
}

export default UniversalComponent

You can see that approach working fine in this branch that runs babel6 with my file structure.

Failing in Babel 7 Same code, only difference now I'm on babel 7 and I get an error, full stack trace:

ReferenceError: _universalImport is not defined
    at eval (webpack:///./src/components/UniversalComponent.js?:55:5)
    at getConfig (webpack:///./node_modules/react-universal-component/dist/requireUniversalModule.js?:160:52)
    at requireUniversalModule (webpack:///./node_modules/react-universal-component/dist/requireUniversalModule.js?:25:16)
    at UniversalComponent.componentWillMount (webpack:///./node_modules/react-universal-component/dist/index.js?:155:58)
    at resolve (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2119:12)
    at ReactDOMServerRenderer.render (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2260:22)
    at ReactDOMServerRenderer.read (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2234:19)
    at Object.renderToString (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2501:25)
    at _callee$ (webpack:///./server/render.js?:61:45)
    at tryCatch (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (webpack:///./server/render.js?:28:221)
    at _next (webpack:///./server/render.js?:28:409)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7) ReferenceError: _universalImport is not defined
    at eval (webpack:///./src/components/UniversalComponent.js?:55:5)
    at getConfig (webpack:///./node_modules/react-universal-component/dist/requireUniversalModule.js?:160:52)
    at requireUniversalModule (webpack:///./node_modules/react-universal-component/dist/requireUniversalModule.js?:25:16)
    at UniversalComponent.componentWillMount (webpack:///./node_modules/react-universal-component/dist/index.js?:155:58)
    at resolve (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2119:12)
    at ReactDOMServerRenderer.render (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2260:22)
    at ReactDOMServerRenderer.read (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2234:19)
    at Object.renderToString (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2501:25)
    at _callee$ (webpack:///./server/render.js?:61:45)
    at tryCatch (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/chapati/projects/open-source/redux-first-router-demo/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (webpack:///./server/render.js?:28:221)
    at _next (webpack:///./server/render.js?:28:409)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

=================

Any ideas?

[dankremniov]

Any updates on this one? I am experiencing the same issue.

[dankremniov]

Okay, for people who faced this issue by trying to update to Babel 7 while using hash map for routes. I managed to solve the issue by following these steps:

1. Replace your hash map with the following syntax mentioned by @chapati23 in https://github.com/faceyspacey/react-universal-component/issues/28:

   const UniversalComponent = universal(
   ({ page }) => import(`../../pages/${page}`),
   {
   minDelay: 500,
   loading: PageSpinner,
   error: NotFound
   }
   )

2. By doing the first step you going to get a lot of unnecessarily generated chunks. In order to fix that use ContextReplacementPlugin the way described by @joaovieira in https://github.com/faceyspacey/react-universal-component/issues/33#issuecomment-365310475.

My current folder structure can be described as:

/pages/${pageName}/index.js
/pages/${pageName}/components/${componentName}/index.js

I suppose there is a better way to solve the issue with unnecessarily generated chunks by changing the folder structure rather than using ContextReplacementPlugin, however, I have not managed to make it work. @faceyspacey, what exactly I need to change in my current folder structure to make it work?

[faceyspacey]

im staying out of babel 7 until its past beta, and fully launched and settled.

[dijs]

Any update on this? I could not get the above code working in my project.