diff --git a/examples/streaming-server-side-rendering/.eslintrc.json b/examples/streaming-server-side-rendering/.eslintrc.json
new file mode 100644
index 000000000..a039f2105
--- /dev/null
+++ b/examples/streaming-server-side-rendering/.eslintrc.json
@@ -0,0 +1,9 @@
+{
+ "env": {
+ "browser": true
+ },
+ "rules": {
+ "import/no-unresolved": "off",
+ "import/no-extraneous-dependencies": "off"
+ }
+}
diff --git a/examples/streaming-server-side-rendering/.gitignore b/examples/streaming-server-side-rendering/.gitignore
new file mode 100644
index 000000000..e9a3310da
--- /dev/null
+++ b/examples/streaming-server-side-rendering/.gitignore
@@ -0,0 +1 @@
+public/dist
\ No newline at end of file
diff --git a/examples/streaming-server-side-rendering/README.md b/examples/streaming-server-side-rendering/README.md
new file mode 100644
index 000000000..a00744f34
--- /dev/null
+++ b/examples/streaming-server-side-rendering/README.md
@@ -0,0 +1,42 @@
+# Get the streaming SSR example running
+
+Steps:
+
+1. Download repository
+
+```bash
+git clone https://github.com/gregberge/loadable-components.git
+```
+
+2. Install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
+3. Install libary dependencies and build library
+
+```bash
+yarn
+yarn build
+```
+
+4. Move into example directory
+
+```bash
+cd ./loadable-components/examples/streaming-server-side-rendering
+```
+
+5. Install project dependencies
+
+```bash
+yarn
+```
+
+5. Run locally or build and serve
+
+```bash
+yarn dev
+
+# Or
+
+yarn build
+yarn start
+```
+
+🍻
diff --git a/examples/streaming-server-side-rendering/babel.config.js b/examples/streaming-server-side-rendering/babel.config.js
new file mode 100644
index 000000000..034578c92
--- /dev/null
+++ b/examples/streaming-server-side-rendering/babel.config.js
@@ -0,0 +1,32 @@
+function isWebTarget(caller) {
+ return Boolean(caller && caller.target === 'web')
+}
+
+function isWebpack(caller) {
+ return Boolean(caller && caller.name === 'babel-loader')
+}
+
+module.exports = api => {
+ const web = api.caller(isWebTarget)
+ const webpack = api.caller(isWebpack)
+
+ return {
+ presets: [
+ '@babel/preset-react',
+ [
+ '@babel/preset-env',
+ {
+ useBuiltIns: web ? 'entry' : undefined,
+ corejs: web ? 'core-js@3' : false,
+ targets: !web ? { node: 'current' } : undefined,
+ modules: webpack ? false : 'commonjs',
+ },
+ ],
+ ],
+ plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin',
+/* ["transform-define", {
+ "process.env.NODE_ENV": process.env.NODE_ENV,
+ }] */
+ ],
+ }
+}
diff --git a/examples/streaming-server-side-rendering/nodemon.json b/examples/streaming-server-side-rendering/nodemon.json
new file mode 100644
index 000000000..51ea33e59
--- /dev/null
+++ b/examples/streaming-server-side-rendering/nodemon.json
@@ -0,0 +1,6 @@
+{
+ "ignore": ["client", "public"],
+ "execMap": {
+ "js": "babel-node"
+ }
+}
diff --git a/examples/streaming-server-side-rendering/package.json b/examples/streaming-server-side-rendering/package.json
new file mode 100644
index 000000000..c9ef23033
--- /dev/null
+++ b/examples/streaming-server-side-rendering/package.json
@@ -0,0 +1,39 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "nodemon src/server/main.js",
+ "build": "rm -Rf ./public && NODE_ENV=production yarn build:webpack && yarn build:lib",
+ "build:webpack": "webpack",
+ "build:lib": "babel -d lib src",
+ "start": "NODE_ENV=production node lib/server/main.js",
+ "link:all": "yarn link @loadable/babel-plugin && yarn link @loadable/server && yarn link @loadable/component"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.4.4",
+ "@babel/core": "^7.6.2",
+ "@babel/node": "^7.0.0",
+ "@babel/preset-env": "^7.6.2",
+ "@babel/preset-react": "^7.0.0",
+ "@loadable/babel-plugin": "file:./../../packages/babel-plugin",
+ "@loadable/component": "file:./../../packages/component",
+ "@loadable/server": "file:./../../packages/server",
+ "@loadable/webpack-plugin": "file:./../../packages/webpack-plugin",
+ "babel-loader": "^8.0.6",
+ "babel-plugin-transform-define": "^2.1.0",
+ "css-loader": "^2.1.1",
+ "mini-css-extract-plugin": "^0.6.0",
+ "nodemon": "^1.19.0",
+ "webpack": "^4.31.0",
+ "webpack-cli": "^3.3.2",
+ "webpack-dev-middleware": "^3.6.2",
+ "webpack-node-externals": "^1.7.2"
+ },
+ "dependencies": {
+ "core-js": "^3.0.1",
+ "express": "^4.18.2",
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-error-boundary": "^3.1.4"
+ }
+}
diff --git a/examples/streaming-server-side-rendering/src/client/App.js b/examples/streaming-server-side-rendering/src/client/App.js
new file mode 100644
index 000000000..10df258bd
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/App.js
@@ -0,0 +1,47 @@
+import React from 'react'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { reactLazy } from '@loadable/component'
+import Html from './Html'
+
+const A = reactLazy(() => import('./letters/A'))
+const B = reactLazy(() => import('./letters/B'))
+const C = reactLazy(() => import(/* webpackPreload: true */ './letters/C'))
+const D = reactLazy(() => import(/* webpackPrefetch: true */ './letters/D'))
+const E = reactLazy(() => import('./letters/E?param'), { ssr: false })
+const X = reactLazy(props => import(`./letters/${props.letter}`))
+const Sub = reactLazy(props => import(`./letters/${props.letter}/file`))
+const RootSub = reactLazy(props => import(`./${props.letter}/file`))
+
+const App = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function Error({ error }) {
+ return (
+
+
Application Error
+
{error.stack}
+