Add babel-plugin-dynamic-import-node suggestion to README.#35
Add babel-plugin-dynamic-import-node suggestion to README.#35ramesaliyev wants to merge 2 commits intojamiebuilds:masterfrom ramesaliyev:ramesaliyev-babel-plugin-dynamic-import-node
Conversation
README.md
Outdated
|
|
||
| **Note:** | ||
|
|
||
| If you're using babel + webpack with [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin and it causes your server-side-rendering dont render on the first request. Consider using [babel-plugin-dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node) plugin for your server build. It'll convert **import()** to **require()** and ensure synchronous rendering. |
There was a problem hiding this comment.
It'll convert import() to require() and ensure synchronous rendering.
This isn't true, this is the basic transformation:
Input:
import('test-module');Output:
Promise.resolve().then(() => require('test-module'));Using this transform by itself will not ensure synchronous rendering. You'll still need to specify serverSideRequirePath or use the react-loadable/babel plugin.
There was a problem hiding this comment.
No I'm not saying using "babel-plugin-dynamic-import-node" alone will do the work. I am using babel-plugin-dynamic-import-node with the react-loadable/babel plugin of course.
But without babel-plugin-dynamic-import-node my first server-side-renders always return null for loadable-component as i explain above.
There was a problem hiding this comment.
@ramesaliyev Do you compile server side code w/ webpack? If yes, then try this in the webpack config for server:
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
There was a problem hiding this comment.
@alexfedoseev I spent 2 hours, finished with the same solution as you and then found that comment in issues 😄
send PR with comment in Readme #38
There was a problem hiding this comment.
@alexfedoseev thanks for suggestion, since i havent find chance to test it yet, i'll let you know.
@restrry im glad that you've found solution in these lost streets 😄
|
The original plugin should work. It's always worked for me everywhere. Id like to get to the bottom of this. Can U paste some code or perhaps a link to a minimal repo. |
|
I have an exactly same problem and i think its caused by I have a babel plugin can do 2 things - either use import inspector (and leave import) to give a syntax error, or use
results in this, which throws a syntax error if i try to run it on node:
This doesn't work on first load, because Promise.resolve() will update the component state after the render() function is processed. I think the problem is with babel changing order of plugins or maybe can be something else. |
|
@hhhonzik @fdubost @ramesaliyev You get a syntax error because I'm assuming you are not using If you are trying to prevent code splitting, use So you don't need a transform plugin for #54 fixes a bug that causes |
|
@anilanar, do you have an example project with SSR? I'm facing a similar issue and always getting the Here's the js section of my server webpack config. I've tried different plugin orders but nothing seems to make a difference. |
|
@kjs3 Are you excluding |
|
@thejameskyle @anilanar I have an exactly same problem like @hhhonzik . My full .babelrc file
With this config I have loading: true state always
metadata is empty, but should be smth like:
If I remove dynamic-import-node then I see SyntaxError: Unexpected token import
Please help |
|
@thejameskyle @anilanar Also, serverSideRequirePath (relative path) doesn't work in Meteor, this block
path.join(__dirname, ...) inside import-inspector creates an invalid path to the file It should be a full path, like |
|
I am having similar issue with SSR. 1. Without
|
|
This is my compile code of my composent. I have no SSR with it why? By the way your demo (react-loadable-example) do not provide SSR too. `var RefreshUniverse = __WEBPACK_IMPORTED_MODULE_2_react_loadable___default()({
|
|
From what I can gather, although It would be really nice to have an official SSR example, since it raises confusion for so many people. Thank you. |
|
@kettanaito I find my problem its was 2 things. babel-plugin-dynamic-import-node was not up-to-date. |
|
@Flavien-Pensato could you please post the right order of the plugins, just to be sure? Thanks! |
|
Server: Client: |
|
@kettanaito I think that your AsyncComponent is bad ^^ remove it. Replace it by Loadable should resolve your bad import |
|
@kettanaito with webpack 3 set |
|
@Flavien-Pensato I don't think there is anything wrong with I will try the order you have posted, as well as |
|
The With the newest release of |
|
I am deleting every comment unrelated to this issue. Further comments like this will result in banning from all of my repositories. I gave you my answer, respect it or fuck off. |
|
@mxstbr, may I paraphrase: so using |
|
Sorry for being unclear: Use You don't need any other Babel plugins other than Is that clear? |
|
@mxstbr for some reason that I don't fully understand yet I do need babel-plugin-syntax-dynamic-import for jest - still trying to understand some of this stuff |
|
This module works wonders, I use babel-plugin-dynamic-import-node on the server only, with react-loadable/loader. The SSR and lazy loading works fine. Note: Another mistake that I made is this: <ConnectedRouter>
<Loadable.Capture>
<Routes />
</Loadable.Capture>
<ConnectedRouter>rather: <Loadable.Capture>
<ConnectedRouter>
<Routes />
<ConnectedRouter>
</Loadable.Capture>This had the effect of loading all the chunks on first load on client. |
@mxstbr I'm getting the syntax error for dynamic import statements on the server, even with the syntax plugin added. I wasn't getting these when I was using |
|
Then that plugin isn't running 😊 The whole point of the syntax plugin is so that Babel doesn't throw a syntax error anymore. |
|
@mxstbr In addition to my .babelrc, I can invoke like this, still getting the syntax error:
What would the next step be to debug this? |
|
I have two page for code split const Home = Loadable({
loader : () => import('./pages/Home'),
loading : Loading,
});
const Creative = Loadable({
loader : () => import('./pages/creative'),
loading : Loading,
});here is my I use React Route V4. when the Page is Reload,SSR and Code Split worked fine,But when i jump to another page by React Router,The Page will has an big error like: |
|
@weishiji doesn't seem to be related to the The error itself means that you are trying to render what is not a React component, but an Object. The printed error has |
|
Hello, great library! I have a SSR working, but the react-loadable/plugin only works for the server (in babel runtime) and not the webpack bundle. I've tried various combinations of with and without dynamic import plugins, with an without syntax dynamic imports with the loadable plugin, with and without import inspectors... nothing seems to quite add up. Including this #35 (comment) The only way I can get it to work completely is by manually adding the webpack babel config: https://github.com/tomatau/breko-hub/blob/master/src/config/webpack.base.config.js#L94-L116 Loadable routes: https://github.com/tomatau/breko-hub/blob/master/src/app/components/App/App.js#L16-L42 SSR: https://github.com/tomatau/breko-hub/blob/master/src/server/middleware/render-app.js#L27-L32 The update to the README in this PR doesn't seem to offer a suggestion that works for me either. |
|
In case anyone was still having issues with this, I was still having issues running React code on the server even after using syntax-dynamic-import. The way the babel plugin for react-loadable works is that it looks for a dynamic import and then decorates the react-loadable options if react-loadable is included in that module. Because of this, you can use the dynamic-import-node plugin "after" you apply react-loadable/babel and then everything should work fine on the server. My babelrc file now looks like this. {
"env": {
"server": {
"presets": ["react"],
"plugins": [
"react-loadable/babel",
"dynamic-import-node",
"transform-class-properties",
"transform-object-rest-spread",
"transform-es2015-modules-commonjs",
"babel-plugin-root-import",
[
"babel-plugin-styled-components",
{
"ssr": true
}
]
]
},
"test-coverage": {
"presets": ["react"],
"plugins": [
"react-loadable/babel",
"dynamic-import-node",
"transform-class-properties",
"transform-object-rest-spread",
"istanbul",
"transform-es2015-modules-commonjs",
"babel-plugin-root-import",
[
"babel-plugin-styled-components",
{
"ssr": true
}
]
]
},
"dev-webpack": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["> 1%", "IE >= 10"]
},
"modules": false,
"useBuiltIns": "entry"
}
],
"react"
],
"plugins": [
"syntax-dynamic-import",
"react-hot-loader/babel",
"react-loadable/babel",
"transform-class-properties",
"transform-object-rest-spread",
"babel-plugin-root-import",
[
"babel-plugin-styled-components",
{
"ssr": true
}
]
]
},
"prod-webpack": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["> 1%", "IE 11"]
},
"modules": false,
"useBuiltIns": "entry",
"debug": false
}
],
"react"
],
"plugins": [
"syntax-dynamic-import",
"react-loadable/babel",
"transform-class-properties",
"transform-object-rest-spread",
"babel-plugin-root-import",
[
"babel-plugin-styled-components",
{
"ssr": true
}
]
]
}
}
} |
|
Comment resolved by @jamiebuilds index.js - Object.assign() why not ' || ' ? |
|
Thank you everybody for contributing to this discussion. @jamiebuilds, could you please write a full list of babel plugins needed for
Could you please just give a full example at that? Thanks. |
|
Actually, it would be nice if we had a real-world example without |
|
I was bitten by eslint with a |
|
|
|
@NandoSangenetto |
|
@jaybe78 Could you publish your fork on npm? You can prefix your name to it as a scope and specify public when publishing. Maybe even as a dist whilst you're in some beta/rc for these changes! |
|
@tomatau ok I will |
|
@tomatau |
20 participants
Hello, firstly thanks for making this library and sorry for my english. I had an issue and found a solution but I'm not sure about it. Here is my story;
After using react-loadable with babel-plugin i'm encounter an issue which causes my first renders on server wont serves loadable component. After some digging i realise webpack splits my code into two chunks (one for main and one for loadable) and tries to load loadable component with promise (with load() function in library). And because server dont waits for this loading completed; my first requests always returns null for loadable-component and others work well.
I dont know if this issue is common or just because of my webpack configuration, or because im using babel "syntax-dynamic-import" plugin (etc), but after digging for hours i found solution as using babel-plugin-dynamic-import-node plugin for only my server side webpack (babel actually).
Since issues are disabled i had to open this PR, its okay if you dont accept it. But now it works like a charm! Thanks again :)