Getting error in console

[anthonybrown]

(

node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: require.ensure is not a function /search (node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: require.ensure is not a function / (node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): TypeError: require.ensure is not a function /search (node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: require.ensure is not a function / (node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 6): TypeError: require.ensure is not a function /

[bmullican]

Same here. When I do "NODE_ENV=server node --trace-warnings server.js" I get:

(node:12608) TypeError: require.ensure is not a function
    at _react2.default.createElement.loadingPromise (C:/Users/Bryce/www/complete-intro-to-react/js/App.jsx:17:77)
    at component (C:/Users/Bryce/www/complete-intro-to-react/js/App.jsx:17:77)
    at C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:306:16
    at measureLifeCyclePerf (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:305:14)
    at ReactCompositeComponentWrapper._constructComponent (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:280:21)
    at ReactCompositeComponentWrapper.mountComponent (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:188:21)
    at Object.mountComponent (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactReconciler.js:46:35)
    at ReactCompositeComponentWrapper.performInitialMount (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:371:34)
    at ReactCompositeComponentWrapper.mountComponent (C:\Users\Bryce\www\complete-intro-to-react\node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)

I have been working on it. I was assuming it may be a windows issue.

[btholt]

Yeah, I was having these as well. It's because it's trying to invoke that import statement in Node and Node doesn't understand require.ensure which is what import translate to. You'd solve this by having Babel translate to a no-op or using something like this Babel transform.

[lehcosta]

Same here.

[anthonybrown]

Yeah, I was having these as well. It's because it's trying to invoke that import statement in Node and Node doesn't understand require.ensure which is what import translate to. You'd solve this by having Babel translate to a no-op or using something like this Babel transform.

So do we just do a yarn add babel-plugin-dynamic-import-node --dev and add "dynamic-import-node" in the .babelrc file?

[bmullican]

I tried that. It didn't work for me.

[anthonybrown]

@bmullican that's too bad. I wonder if node-bable would work? I remember using it for a universal React app so node could understand ES6 syntax?

[anthonybrown]

@btholt can you elaborate or show the solution?

[Gabri3l]

Has anybody found a working solution to this ? I tried all sorts of approaches and none of them worked, the closest I got was with this https://github.com/ctrlplusb/react-async-component but then hot reload in dev wouldn't work. I'll keep investigating ;)

[diazweb]

I've been trying to solve this issue but nothing, does someone found a solution? SSR not working because of this error

[dannypule]

TypeError: require.ensure is not a function is related to async loading of components in the App.jsx and AsyncRoute.jsx files. import(...) gets translated to require.ensure using the babel-plugin-dynamic-import-webpack plugin but something is going wrong underneath the hood. When I load a component directly using <Route exact path="/" component={Landing} /> I don't get the error.

I'm looking into the issue but if anyone finds any clues or fixes please post them here. I'll post any fixes here.

[dannypule]

The fix for the TypeError: require.ensure is not a function issue is to paste the following code in your App.jsx file underneath the import preload from "../data.json"; statement.

if (typeof require.ensure !== "function")
  require.ensure = (d, c) => {
    c(require);
  };
if (typeof require.include !== "function") require.include = () => {};

Credit goes to the commenters here particularly Sokra's comment: https://github.com/webpack/webpack/issues/183#issuecomment-36219163

import() (not import, note the parenthesis) is currently in stage 3 of the TC39 process. This means node doesn't natively support it yet. The above code snippet resolves the error in the console output when doing server side rendering on your production builds.

[dannypule]

Another fix for this and probably what Brian Holt was intending in his course is to use the npm package which is already available in this project's package.json called babel-plugin-dynamic-import-node.

Simply include "babel-plugin-dynamic-import-node" in your .babelrc file. If you were following along with the Frontend Masters videos and you're on branch "v3-30" or "v3-31", your file should now look like this

{
    "presets": [
        "react",
        ["env", {
            "targets": {
                "browsers": "last 2 versions"
            },
            "loose": true,
            "modules": false
        }]
    ],
  "plugins": [
    "react-hot-loader/babel",
    "babel-plugin-syntax-dynamic-import",
    "babel-plugin-dynamic-import-webpack",
    "babel-plugin-transform-class-properties"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "babel-plugin-dynamic-import-node"
      ]
    },
    "server": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "babel-plugin-dynamic-import-node"
      ]
    }
  }
}

babel-plugin-dynamic-import-node allows node to understand dynamic imports using the import() syntax.

I've submitted a pull request here: https://github.com/btholt/complete-intro-to-react/pull/92

So whether you fix the issue using the method in my previous comment or the one listed here, you'll no longer get the TypeError: require.ensure is not a function issue.