UnhandledPromiseRejectionWarning on node v9.5.0

[qbitza]

(node:68523) UnhandledPromiseRejectionWarning: TypeError: getComponent(...).then is not a function
at Function.load (/Users/.../node_modules/loadable-components/dist/loadable-components.cjs.js:191:59)

[qbitza]

Ooops... looks like it is something else - I'll log something new once I've completed an in depth investigation.

[qbitza]

Okay, no, still getting it.

We're using server-rendered pages, and I've tried different versions of Node, all produce the same error the first time I try to dynamically load a component.

The full stack trace:

(node:10163) UnhandledPromiseRejectionWarning: TypeError: getComponent(...).then is not a function
    at Function.load (/home/.../node_modules/loadable-components/dist/loadable-components.cjs.js:191:59)
    at /home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:151:28
    at walkTree (/home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:104:11)
    at walkTree (/home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:120:7)
    at walkTree (/home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:120:7)
    at /home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:131:11
    at R (/home/.../node_modules/react/cjs/react.production.min.js:17:311)
    at P (/home/.../node_modules/react/cjs/react.production.min.js:16:236)
    at Object.forEach (/home/.../node_modules/react/cjs/react.production.min.js:19:165)
    at walkTree (/home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:129:22)
    at /home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:131:11
    at R (/home/.../node_modules/react/cjs/react.production.min.js:17:311)
    at P (/home/.../node_modules/react/cjs/react.production.min.js:16:236)
    at P (/home/.../node_modules/react/cjs/react.production.min.js:16:361)
    at Object.forEach (/home/.../node_modules/react/cjs/react.production.min.js:19:165)
    at walkTree (/home/.../node_modules/loadable-components/dist/loadable-components.server.cjs.js:129:22)
(node:10163) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10163) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

.babelrc

{ 
  "presets": ["razzle/babel"],  
  "plugins": ["emotion", "loadable-components/babel", "babel-plugin-dynamic-import-node"]
}

package.json

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "./node_modules/standard/bin/cmd.js 'src/**/*.js' && razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "autoprefixer": "^7.2.5",
    "axios": "^0.17.1",
    "clean-webpack-plugin": "^0.1.18",
    "express": "^4.16.2",
    "fs": "0.0.1-security",
    "history": "^4.7.2",
    "loadable-components": "^1.1.1",
    "qs": "^6.5.1",
    "raf": "^3.4.0",
    "react": "^16.2.0",
    "react-burger-menu": "^2.2.3",
    "react-dom": "^16.2.0",
    "react-google-publisher-tag": "^1.0.4",
    "react-headroom": "^2.2.2",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.6",
    "react-responsive": "^4.0.3",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "react-spinners": "^0.2.6",
    "react-swipeable-views": "^0.12.12",
    "redux": "^3.7.2",
    "redux-burger-menu": "^0.2.4",
    "redux-saga": "^0.16.0",
    "semantic-ui-css": "^2.2.14",
    "semantic-ui-react": "^0.77.2",
    "shrink-ray": "^0.1.3"
  },
  "devDependencies": {
    "axios-mock-adapter": "^1.12.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "clean-css-loader": "^0.1.4",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.9",
    "emotion": "^8.0.12",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.17.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-node": "^5.2.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "isomorphic-style-loader": "^4.0.0",
    "moxios": "^0.4.0",
    "node-sass": "^4.7.2",
    "razzle": "^0.8.11",
    "react-code-splitting": "^1.2.1",
    "sass-loader": "^6.0.6",
    "standard": "^10.0.3",
    "style-loader": "^0.20.1",
    "sw-precache-webpack-plugin": "^0.11.4",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "url-loader": "^0.6.2",
    "webpack-visualizer-plugin": "^0.1.11"
  }
}

[gregberge]

You specify a function into loadable(...) that is not a promise.

Can you give me your loadable call?

Also be careful of not using babel-plugin-dynamic-import-node for Webpack build, else code splitting will not work. It is only required for server-side.

[qbitza]

My loadable call is:

export const HomePage = loadable(() => require('./LandingPages/HomePage'))

Currently both my server and client are using the same .bablerc. I'm going to split it and try again.

[gregberge]

You must use import require will not work.