New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to webpack@4 API #110

Closed
wants to merge 5 commits into
base: master
from

Conversation

@7rulnik

7rulnik commented Feb 26, 2018

No description provided.

@nandosangenetto

This comment has been minimized.

Show comment
Hide comment
@nandosangenetto

nandosangenetto Feb 27, 2018

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```

nandosangenetto commented Feb 27, 2018

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```

@alohawav alohawav referenced this pull request Feb 28, 2018

Merged

Webpack v4 #525

@joacub

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Mar 1, 2018

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

joacub commented Mar 1, 2018

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

@joacub

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Mar 3, 2018

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

joacub commented Mar 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Mar 5, 2018

@nandosangenetto seems that you forget to transpile files.

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

7rulnik commented Mar 5, 2018

@nandosangenetto seems that you forget to transpile files.

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

@bertho-zero

This comment has been minimized.

Show comment
Hide comment
@bertho-zero

bertho-zero Mar 5, 2018

Contributor

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

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

bertho-zero commented Mar 5, 2018

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

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

This comment has been minimized.

Show comment
Hide comment
@Obooman

Obooman Mar 7, 2018

Waiting for the further merge operation

Obooman commented Mar 7, 2018

Waiting for the further merge operation

@joacub

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Mar 7, 2018

@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

joacub commented Mar 7, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@Oza94

Oza94 Mar 14, 2018

@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 👍

Oza94 commented Mar 14, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Mar 15, 2018

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

7rulnik commented Mar 15, 2018

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

@Oza94

This comment has been minimized.

Show comment
Hide comment
@Oza94

Oza94 Mar 15, 2018

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

Oza94 commented Mar 15, 2018

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

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik commented Mar 15, 2018

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

@onetrickwolf

This comment has been minimized.

Show comment
Hide comment
@onetrickwolf

onetrickwolf Mar 19, 2018

@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.

onetrickwolf commented Mar 19, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Mar 19, 2018

@onetrickwolf did you saw #110 (comment)?

Are you using es6 modules or commonJS?

7rulnik commented Mar 19, 2018

@onetrickwolf did you saw #110 (comment)?

Are you using es6 modules or commonJS?

@onetrickwolf

This comment has been minimized.

Show comment
Hide comment
@onetrickwolf

onetrickwolf Mar 19, 2018

@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?

onetrickwolf commented Mar 19, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Mar 19, 2018

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

joacub commented Mar 19, 2018

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

@alamchrstn

This comment has been minimized.

Show comment
Hide comment
@alamchrstn

alamchrstn Mar 23, 2018

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

alamchrstn commented Mar 23, 2018

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

@EvgeniyKumachev

This comment has been minimized.

Show comment
Hide comment
@EvgeniyKumachev

EvgeniyKumachev Mar 24, 2018

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

EvgeniyKumachev commented Mar 24, 2018

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

@alamchrstn

This comment has been minimized.

Show comment
Hide comment
@alamchrstn

alamchrstn Mar 24, 2018

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

alamchrstn commented Mar 24, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik commented Mar 24, 2018

@Bram-Zijp

This comment has been minimized.

Show comment
Hide comment
@Bram-Zijp

Bram-Zijp Apr 8, 2018

How do you guys setup the splitchunks configuration?

Bram-Zijp commented Apr 8, 2018

How do you guys setup the splitchunks configuration?

@joacub

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Apr 8, 2018

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

joacub commented Apr 8, 2018

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

This comment has been minimized.

Show comment
Hide comment
@dekryptic

dekryptic Apr 12, 2018

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

dekryptic commented Apr 12, 2018

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

@7rulnik

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Apr 12, 2018

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

7rulnik commented Apr 12, 2018

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

@joacub

This comment has been minimized.

Show comment
Hide comment
@joacub

joacub Apr 12, 2018

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

joacub commented Apr 12, 2018

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

@dekryptic

This comment has been minimized.

Show comment
Hide comment
@dekryptic

dekryptic Apr 12, 2018

@joacub Can you show how they are loaded?

dekryptic commented Apr 12, 2018

@joacub Can you show how they are loaded?

@dekryptic

This comment has been minimized.

Show comment
Hide comment
@dekryptic

dekryptic Apr 12, 2018

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

dekryptic commented Apr 12, 2018

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

@abramstyle

This comment has been minimized.

Show comment
Hide comment
@abramstyle

abramstyle Apr 14, 2018

@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.

abramstyle commented Apr 14, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@ankibalyan

ankibalyan Apr 14, 2018

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 commented Apr 14, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ankibalyan

ankibalyan Apr 14, 2018

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

ankibalyan commented Apr 14, 2018

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

@7rulnik

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Apr 16, 2018

@abramstyle just published @7rulnik/react-loadable@5.3.3

7rulnik commented Apr 16, 2018

@abramstyle just published @7rulnik/react-loadable@5.3.3

@7rulnik

This comment has been minimized.

Show comment
Hide comment
@7rulnik

7rulnik Apr 16, 2018

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/react-loadable@5.3.4

7rulnik commented Apr 16, 2018

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/react-loadable@5.3.4

@markusv

This comment was marked as spam.

Show comment
Hide comment
@markusv

markusv Apr 24, 2018

will this be merged to master? I really like to upgrade webpack to v4

markusv commented Apr 24, 2018

will this be merged to master? I really like to upgrade webpack to v4

@VincentCharpentier

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 24, 2018

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
    }
  ]
}

VincentCharpentier commented Apr 24, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Bram-Zijp

Bram-Zijp Apr 24, 2018

@VincentCharpentier
I'm currently using @7rulnik/react-loadable@5.3.4 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'

Bram-Zijp commented Apr 24, 2018

@VincentCharpentier
I'm currently using @7rulnik/react-loadable@5.3.4 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

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 24, 2018

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

VincentCharpentier commented Apr 24, 2018

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

@VincentCharpentier

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 24, 2018

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

VincentCharpentier commented Apr 24, 2018

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

This comment has been minimized.

Show comment
Hide comment
@dgeibi

dgeibi Apr 24, 2018

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

dgeibi commented Apr 24, 2018

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

@VincentCharpentier

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 25, 2018

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.

VincentCharpentier commented Apr 25, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Bram-Zijp

Bram-Zijp Apr 25, 2018

@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.

Bram-Zijp commented Apr 25, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 25, 2018

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

VincentCharpentier commented Apr 25, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Bram-Zijp

Bram-Zijp Apr 25, 2018

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

Bram-Zijp commented Apr 25, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 25, 2018

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

VincentCharpentier commented Apr 25, 2018

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

@Bram-Zijp

This comment has been minimized.

Show comment
Hide comment
@Bram-Zijp

Bram-Zijp Apr 25, 2018

  "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 />,
})

Bram-Zijp commented Apr 25, 2018

  "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

This comment has been minimized.

Show comment
Hide comment
@VincentCharpentier

VincentCharpentier Apr 26, 2018

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)

VincentCharpentier commented Apr 26, 2018

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

This comment has been minimized.

Show comment
Hide comment
@steplov

steplov Apr 26, 2018

@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?

steplov commented Apr 26, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@vasivas

vasivas Apr 30, 2018

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.

? 😕

vasivas commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ankibalyan

ankibalyan Apr 30, 2018

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

ankibalyan commented Apr 30, 2018

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

Repository owner locked as spam and limited conversation to collaborators May 2, 2018

@tajo tajo closed this Aug 9, 2018

@tajo tajo reopened this Aug 9, 2018

@7rulnik 7rulnik closed this Sep 10, 2018

@7rulnik 7rulnik deleted the 7rulnik:master branch Sep 10, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.