question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ssr not working with webpack 4.0.0-beta1

See original GitHub issue

export const Layout = loadable( () => import( / webpackChunkName: “main.layout” / ‘./components/layouts/container.mjs’ ) )

first error: loadable-components: modules entry is missing, your are probably missing loadable-components/babel

then I set in webpack server config:

module: {
    rules: [
      {
        test: /\.(js|mjs)$/,
        use: [
          { 
            loader: 'babel-loader', 
            options: { plugins: [  'loadable-components/babel', 'dynamic-import-node' ] }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },

then another error: Error: Cannot find module ‘./components/layouts/container.mjs’

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "webpack": "^4.0.0-beta.1",
    "webpack-cli": "^2.0.4",
    "webpack-node-externals": "^1.6.0"
  },
"dependencies": {
    "loadable-components": "^1.1.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "redux": "^4.0.0-beta.1",
    "styled-components": "^3.1.6"
  }

but all works with webpack 3.10.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
gregbergecommented, Mar 29, 2018

You have to load components server-side using getLoadableState. Please follow the README for more documentation.

1reaction
artemxgrudencommented, Mar 21, 2018

@jcardella please check

@neoziro thank you, I have no problems with node 9.8.0, since node 9.6.0 has support dynamic import feature

module versions: “webpack”: “^4.1.1”, “webpack-cli”: “^2.0.12”, “loadable-components”: “^1.1.1”,

I have no webpack configuration for server, only for client and for client I have no babel-loader in module section of webpack configuration

module: {
    rules: [
      {
        test: /\.(js|mjs)$/,
        use: [
          { 
            loader: 'babel-loader', 
            options: { plugins: [  'loadable-components/babel' ] }
          }
        ],
      }
    ]
  },
Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack 4 for SSR, How to solve this ReferenceError
I have 3 webpack.config files to enable Server-Sive-Rendering. ... "bugs": { "url": "https://github.com/ShawnBaek/shawnbaek.com/issues" } ...
Read more >
React SSR with Express (webpack and babel) - CodeSandbox
React SSR with Express (webpack and babel). Template ... webpack.config.js. yarn.lock. Dependencies ... This Sandbox is running an experiment.
Read more >
Vuex NPM - npm.io
Kown issues. The code is kept as close to Vuex 3 code base as possible, and there're plenty of places where we should...
Read more >
react-loadable-ssr-addon-v5-slorber - npm
Note: react-loadable-ssr-addon should not be listed in the devDependencies . How to use. 1 - Webpack Plugin. First ...
Read more >
@umijs/runtime: Versions | Openbase
fix(bundler-webpack): do not minimize files under publicPath ... Revert "feat: add ssr.prerender configuration for umi build prerender (#7269)" (#7282) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found