loadable-components: ssr not working with webpack 4.0.0-beta1

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

About this issue

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

Most upvoted comments

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

@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' ] }
          }
        ],
      }
    ]
  },

@artemxgruden no, I am sorry I don’t see what could be the problem.

I haven’t tested Webpack 4 yet. Thanks for reporting!