Migrate to webpack@4 API

[7rulnik]

No description provided.

[NandoSangenetto]

Hey @7rulnik, thank you for the update!

I've got this error when I tried to compile with Webpack:

/Users/user/my_side/node_modules/webpack-cli/bin/webpack.js:237
                                throw err;
                                ^

Error: Cannot find module './lib/webpack'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (/Users/user/my_side/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/user/my_side/node_modules/react-loadable/webpack.js:1:80)
    at Module._compile (/Users/user/my_side/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (/Users/user/my_side/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/user/my_side/webpack.config.js:6:33)
    at Module._compile (/Users/user/my_side/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (/Users/user/my_side/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/Users/user/my_side/node_modules/webpack-cli/bin/convert-argv.js:133:13)
    at requireConfig (/Users/user/my_side/node_modules/webpack-cli/bin/convert-argv.js:135:6)
    at /Users/user/my_side/node_modules/webpack-cli/bin/convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/user/my_side/node_modules/webpack-cli/bin/convert-argv.js:140:15)
    at yargs.parse (/Users/user/my_side/node_modules/webpack-cli/bin/webpack.js:234:39)
    at Object.parse (/Users/user/my_side/node_modules/yargs/yargs.js:539:18)
    at /Users/user/my_side/node_modules/webpack-cli/bin/webpack.js:212:8
    at Object.<anonymous> (/Users/user/my_side/node_modules/webpack-cli/bin/webpack.js:504:3)
    at Module._compile (module.js:660:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1```

[joacub]

in webpack 4 all import() is wrapped in default, need change code in render of object assign to return obj.default

[joacub]

function render(loaded, props) {
  const resolved = resolve(loaded);
  const component = Object.prototype.hasOwnProperty.call(resolved, 'default') ? resolved.default : resolved;
  return React.createElement(resolve(loaded), props);
}

this resolve the problem when use import for loading the components
---- UPDATE -----
have more issues, the fetch not work

for example this load the datas for universal js await trigger('fetch', components, triggerLocals);

now this not work

[7rulnik]

@NandoSangenetto seems that you forget to transpile files.

@joacub good catch! Can you give more info about await trigger('fetch', components, triggerLocals)?

[bertho-zero]

Instead of hasOwnProperty on the default property, you can use something like:

const component = resolved && resolved.__esModule ? resolved.default : resolved;

[Obooman]

Waiting for the further merge operation

[joacub]

@7rulnik trigger fetch running before correct and running ok if in the import use a

import(Component).then(object => object.default)

the solution not is in the module, aparently webpack change the method for return the imports and react-loadable never can return object without default

[Oza94]

@7rulnik ,

Is there an estimated timeline for this PR to land ? We're waiting it in order to move to webpack 4.

Sorry to ask the question here, I understand this may not be the right place but since issues are not enabled /accessible 😅

By the way thanks to all react-loadable contributors this is really awesome 👍

[7rulnik]

@Oza94 Im not a maintainer of this project. So, we are waiting for @jamiebuilds reaction.
But I can publish scoped version today.

[Oza94]

Thanks for the feedback @7rulnik :)

The scoped package is a good option for us, at least we can validate that everything works fine. However we can also wait a few days for the main package and @jamiebuilds 's response so do not feel committed to publish it

[7rulnik]

@Oza94 just published https://yarnpkg.com/en/package/@7rulnik/react-loadable
Feel free to test it.

[onetrickwolf]

@7rulnik tried using your release but am getting Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

If I downgrade to Webpack 3 everything works as expected. Any ideas? Been debugging for awhile.

[7rulnik]

@onetrickwolf did you saw #110 (comment)?

Are you using es6 modules or commonJS?

[onetrickwolf]

@7rulnik hey sorry should have read better, thanks that fixed it. For others having the same problem this fixed it for me:

const myComponent = Loadable({
  loader: () => import('./myComponent.react').then(object => object.default),
  loading: Loading,
});

Will this be the permanent fix by the way? Should the docs be updated once this PR is merged?

[joacub]

@onetrickwolf yes, aparently this is the way, webpack in the import return always object { default }, this not is catcheable for react-loadable.

[alamchrstn]

can I confirm is the current master version of react-loadable compatible with webpack 4 out of the box? Sorry still newbie here 🙇

[EvgeniyKumachev]

@alamchrstn I don't think current master version supports webpack 4, that's why this pull is still open

[alamchrstn]

@EvgeniyKumachev ah I see, can someone give a working example of react loadable with webpack 4? thanks in advance 🙇 I'm still learning here...

[7rulnik]

@alamchrstn you can use #110 (comment)

[Bram-Zijp]

How do you guys setup the splitchunks configuration?

[joacub]

I’m working dame only change de load method for this
const myComponent = Loadable({ loader: () => import('./myComponent.react').then(object => object.default), loading: Loading, });

[dekryptic]

How do you handle vendors-XXX.bundle.js files?

[7rulnik]

@dekryptic
I faced this problem yesterday. I have idea how to fix it, but seems that it will be breaking change.

[joacub]

I dont’t have the problem the bundles load automatic with webpack

[dekryptic]

@joacub Can you show how they are loaded?

[dekryptic]

@7rulnik Do you have a working version up? If not, how do you suggest it be handled?

[abramstyle]

@7rulnik You forgot to change this

 var source = path.node.source.value;
 if (source !== 'react-loadable') return;

at lib/babel.js line 13. This caused the babel plugin of your scoped package didn't work. The source is @7rulnik/react-loadable. But this code checks if it equals to 'react-loadable'.
@jamiebuilds Do you have any plans to merge this PR? This will solve so many problems if we are using webpack v4.

[ankibalyan]

I'm getting this warning in webpack 4.5, and react 16.3

    Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

    Please check the code for the LoadableComponent component.

[ankibalyan]

Shall I create a PR supporting new lifecycle for react 16.3? it shouldt coming to @next version of react-loadable?

[7rulnik]

@abramstyle just published @7rulnik/[email protected]

[7rulnik]

Manifest now contains all vendors chunks. And it's smaller.
Also I added chunkName options. It's useful for webpack-flush-chunks.

You can test it in @7rulnik/[email protected]

[VincentCharpentier]

This seems to be breaking SSR, manifest doesn't look good at all. Will try to investigate more and report here

{
  "null": [
    {
      "file": "2.css",
      "publicPath": "/2.css",
      "chunkName": null,
      "id": null
    },
    {
      "file": "2.chunk.js",
      "publicPath": "/2.chunk.js",
      "chunkName": null,
      "id": null
    }
  ]
}

[Bram-Zijp]

@VincentCharpentier
I'm currently using @7rulnik/[email protected] and it's working fine.

react-loadable.json

{
  "./TodoContainer": [
    {
      "file": "0.js",
      "publicPath": "/build/0.js",
      "chunkName": null,
      "id": "./src/client/pages/todo/TodoContainer.jsx",
      "name": "./src/client/pages/todo/TodoContainer.jsx"
    }
  ],
...

Not sure if it's related to Webpack 4 but I had to fiddle allot with the .babelrc config;
Webpack client and server:
@7rulnik/react-loadable/babel'
Webpack server only:
'dynamic-import-node'

[VincentCharpentier]

Thank you for the feedback, I'll try to find out what I'm missing

[VincentCharpentier]

I was using dynamic-import-webpack before, should I replace it with dynamic-import-node ?
Edit: I tried this, but it won't split my code into chunks. Maybe its not compatible with babel 7

[dgeibi]

webpack 4 can handle dynamic import. just use @babel/plugin-syntax-dynamic-import and @7rulnik/react-loadable/babel

[VincentCharpentier]

Still have issues (no name property and null id property in manifest), but it seems like it's because @7rulnik/react-loadable/babel is not run by babel. Everything is fine if I manually add 'module' and 'webpack' properties to each loadables components.

[Bram-Zijp]

@VincentCharpentier Sounds like you didn't add @7rulnik everywhere and are still using react-loadable. Do a search for react-loadable in your project. Make sure every definition is prefixxed like so: @7rulnik/react-loadable. I'm guessing you forgot to add it in your .babelrc or babel config inside webpack.

[VincentCharpentier]

I don't have react-loadable installed, only @7rulnik/react-loadable while this PR is not merged. I searched anyway but with no luck.
My babel+webpack config is like this:

module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            plugins: [
              '@7rulnik/react-loadable/babel',
              'syntax-dynamic-import',
            ],
            presets: [
              [
                'env',
                {
                  'loose': false,
                  'shippedProposals': true,
                },
              ],
              'react',
            ],
          },
        },
      },
      // ...

and my .babelrc (for server):

// server only
{
  "plugins": [
    "@7rulnik/react-loadable/babel",
    "dynamic-import-node"
  ],
  "presets": [
    [
      "env",
      {
        "loose": false,
        "shippedProposals": true
      }
    ],
    "react"
  ]
}

Only difference between them is dynamic-import-node vs. syntax-dynamic-import

[Bram-Zijp]

@VincentCharpentier
These are mine:

// client
...
// not required but I like to use a manifest
optimization: {
    // splitChunks: {
    //     minSize: 1,
    //     name: false,
    // },
    runtimeChunk: {
        name: 'manifest',
    },
},
            
            options: {
                babelrc: false,
                presets: [
                    [
                        'env',
                        {
                            modules: false,
                            targets: {
                                browsers: ['last 2 versions'],
                            },
                        },
                    ],
                    'stage-2',
                    'react',
                ],
                plugins: [
                    'transform-class-properties',
                    'transform-decorators-legacy',
                    'transform-flow-strip-types',
                    'transform-runtime',
                    'react-hot-loader/babel',
                    '@7rulnik/react-loadable/babel',
                ],
            },
...


// server
    options: {
        babelrc: false,
        presets: [
            [
                'env',
                {
                    modules: false,
                    targets: {
                        node: 'current',
                    },
                },
            ],
            'stage-2',
            'react',
        ],
        plugins: [
            'transform-class-properties',
            'transform-decorators-legacy',
            'transform-flow-strip-types',
            'transform-runtime',
            'react-hot-loader/babel',
            '@7rulnik/react-loadable/babel',
            'dynamic-import-node',
        ],
    },

[VincentCharpentier]

thanks for your feedback. Could you also share you package.json ? especially dependencies and devdependencies, I think I have something incompatible

[Bram-Zijp]

  "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^22.4.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-direct-import": "^0.5.0",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "react-hot-loader": "^4.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14",
    "@7rulnik/react-loadable": "^5.3.4",


import React from 'react'
import Loadable from '@7rulnik/react-loadable'

export default Loadable({
    loader: () => import('./TodoContainer'),
    loading: () => <div />,
})

[VincentCharpentier]

Thanks for your feedback.
I found out what was messing things up. I'm using a component like this:

import L from '@7rulnik/react-loadable';
import Loading from '../components/Loading';

function Loadable (opts) {
  return L(Object.assign({}, {
    loading: Loading,
  }, opts));
}

Then I can only provide loader property when I want to use Loadable.
This is inspired by https://twitter.com/matzatorski/status/872059865350406144 (first link README.md > happy customers)

In this scenario, react-loadable is now broken 😕. It won't generate ids in the manifest, thus breaking the SSR (no module reported)

[steplov]

@7rulnik Hello, thank you for you fork. I found the issue with webpack plugin. In some cases block.module is null https://github.com/7rulnik/react-loadable/blob/scoped-version/src/webpack.js#L26 and plugin obviously throws the error. Could you please add small check that module object exists?

[vasivas]

Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

Please check the code for the LoadableComponent component.

? 😕

[ankibalyan]

@vasivas This is because react v16.3 has depricated componentWillMount lifecycle method, and react-loadable is using it, so a warning message.