Comments (5)
qbitza
commented on July 16, 2024
Ooops... looks like it is something else - I'll log something new once I've completed an in depth investigation.
from loadable-components.
qbitza
commented on July 16, 2024
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"
}
}
from loadable-components.
gregberge
commented on July 16, 2024
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.
from loadable-components.
qbitza
commented on July 16, 2024
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.
from loadable-components.
gregberge
commented on July 16, 2024
You must use import require will not work.
from loadable-components.
Related Issues (20)
- problem with redial HOT 2
- How to change referencing external styles to preload mode
- Fallback running even when component has previously loaded HOT 1
- Webpack doesn't like @loadable/server 5.16.4 HOT 5
- Server is caching old request split chunks, and these are not being re-requested when a new request is made to the server.
- ctor.requireAsync is not a function error HOT 1
- Race condition
- Not working with latest @loadable/server & @loadable/babel-plugin `v5.16.0` version HOT 4
- How to lazyload a hook? HOT 3
- Fallback behaviour HOT 1
- Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component
- error in ./node_modules/@loadable/component/dist/loadable.esm.mjs HOT 9
- Why ChunkExtractor is required? HOT 3
- Is website sync with repo?
- If I am using react18, do I still need loadable-components HOT 6
- Add esbuild support HOT 3
- react-native-web SSR support HOT 1
- Loading state is always true on first render HOT 3
- Add query parameter support HOT 3
- SSR is broken for component v5.16.2+ HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from loadable-components.