chunk not available for synchronous require yet

[re6exp]

When I try to set webpackChunkName in import(), I get this in linux console:

trace (Click to show)

``` chunk not available for synchronous require yet: /components/Home: Cannot find module '/components/Home' Error: Cannot find module '/components/Home' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at requireById (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-universal-component/dist/utils.js:59:19) at tryRequire (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-universal-component/dist/utils.js:45:12) at requireSync (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-universal-component/dist/requireUniversalModule.js:42:37) at UniversalComponent.componentWillMount (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-universal-component/dist/index.js:193:23) at processChild (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:2167:16) at resolve (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:2061:5) at ReactDOMServerRenderer.render (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/react-dom/cjs/react-dom-server.node.development.js:2380:22) ```

and shows an error error: serverRenderer is not a function.

If I do not try to change chunk name, it works, but the error is showed in console anyway.

specs:

• "webpack": "^4.12.0",
• "webpack-hot-server-middleware": "^0.5.0",
• "babel-plugin-universal-import": "faceyspacey/babel-plugin-universal-import#webpack-4",
• "webpack-flush-chunks": "^2.0.1-beta.1"

And most interesting is: when I start dev server whithout commented webpackChunkName instruction, but change them on the fly, without restart server (HMR works), no errors shows in browser, only console always contains that error. In any case.

May be, my server setup has smth wrong...

[re6exp]

https://github.com/faceyspacey/react-universal-component/issues/104

[faceyspacey]

@ScriptedAlchemy thoughts?

[ScriptedAlchemy]

Hmmm interesting. I’ll have to check this one and verify if there’s anything. Looks related to Babel universal if anything

[ScriptedAlchemy]

Give me till Monday, I’m in the middle of moving coasts. My company issued machine goes back tomorrow and I gotta pack. I’ll have a rig up next week Monday and run through the backlog here. Sorry for the delays guys ❤️

[re6exp]

I get it, no problem. I'll been waiting, but until that, I'm going to check what I can in my own code. I've changed many things in the project, may be I missed smth.

[re6exp]

The problem with trace described above is gone after I completely remove externals from the server config. But the problem with magic comments stays, if I try to turn them on, server builds Home.js instead of server.js 8-/

[ScriptedAlchemy]

Half way there man, 2 more days 😂

So I had this issue as well. What I did was create like a utility component. Essentially, a workaround is instead of using universal HOC on many pages, create another JSX file that accepts a prop. Then, use ignore-loader so that it’s not bundled in.

I’ll be able to look closer at this once I’m set Up. Again sorry for such delays

[re6exp]

Does using the wrapper described above lead to build separate chunks?

[ignatiusreza]

Hi guys, sorry for jumping in.. any progress on this front?

we're having similar issue.. looking into it, it does seems like it's an issue with the babel plugin.. the source file that we have looks like:

import universal from 'react-universal-component';

export default universal(import(/* webpackChunkName: 'routes/home' */ './main'));

which got compiled into

// some boilerplate + react-hot-loader-stuff

var _default = react_universal_component__WEBPACK_IMPORTED_MODULE_2___default()(babel_plugin_universal_import_universalImport__WEBPACK_IMPORTED_MODULE_1___default()({
  id: './main',
  file: '/webpack/src/routes/home/index.js',
  load: function load() {
    return Promise.all([Promise.all(/*! import() | routes/home */[__webpack_require__.e("entities~routes/activities~routes/cart~routes/home~routes/kitchen-sink~routes/things-to-do"), __webpack_require__.e("routes/activities~routes/home~routes/kitchen-sink~routes/things-to-do"), __webpack_require__.e("routes/cart~routes/home~routes/kitchen-sink~routes/things-to-do"), __webpack_require__.e("routes/home~routes/things-to-do"), __webpack_require__.e("routes/home~routes/kitchen-sink"), __webpack_require__.e("routes/home")]).then(__webpack_require__.bind(null, /*! ./main */ "./routes/home/main.jsx"))]).then(function (proms) {
      return proms[0];
    });
  },
  path: function path() {
    return path__WEBPACK_IMPORTED_MODULE_0___default.a.join(__dirname, './main');
  },
  resolve: function resolve() {
    return /*require.resolve*/(/*! ./main */ "./routes/home/main.jsx");
  },
  chunkName: function chunkName() {
    return 'routes/home';
  }
}));

/* harmony default export */ __webpack_exports__["default"] = (_default);
;

// some react-hot-loader-stuff

and from the babel plugin readme, it sounds like ./routes/home/main.jsx in both load and resolve should have been ./main.jsx instead?

[ScriptedAlchemy]

Hi guys, you can check out the universal demo, ive updated it for RUC 3.

I am currently having some challenges around the dynamic import (RUC) Sitting in the directory itself.

What happens is it seems to swallow itself on the server side, what I've been doing is moving it up one level and importing it back down. I create a utility file and it sits outside the directory I plan to dynamically load.

Any help would be appreciated on this one

[ScriptedAlchemy]

@ignatiusreza chunknames with slashes get converted to dashes, might be the problem you are seeing inside of RUC?

The babel plugin uses dashes, not sure if you are using it, but it would explain the issue you have

[ignatiusreza]

I am currently having some challenges around the dynamic import (RUC) Sitting in the directory itself.

This sounds like the issue that we're facing.. our directory structure looks like

• routes:

  • home:

  • index.js

  • main.jsx

  • other routes...

and we have universal importing main.jsx from index.js.. i'll try to see if restructuring where universal is sitting solve it..

[ScriptedAlchemy]

It’s annoying bit an effective fix, move the utility up one level and point it at the directory.

I’m going to try and rally some devs to help me track down the issue

[ignatiusreza]

we managed to figure out what went wrong.. part of it is due to some (quite silly) misconfiguration.. leaving it here in case other face similar issue..

what we misconfigure:

• output.path for client and server MUST be different.. didn't notice this at first and we have client bundle overriding the server bundle.. :man_facepalming:
• server output MUST have libraryTarget: 'commonjs2'.. should be documented in webpack-hot-server-middleware?
• we stumble into this issue, and setting { node: { dirname: false } } fix it.. before this path__WEBPACK_IMPORTED_MODULE_0___default.a.join(__dirname, './main'); return incorrect value since __dirname somehow get overwritten to /.. not sure if this is due to another misconfugration elsewhere?

we also need to make some changes in the babel plugin.. the main issue is, the generated path disregard the given chunkName, even though webpack compiled output is to use it to name the generated output file.. I opened https://github.com/faceyspacey/babel-plugin-universal-import/pull/63 to show what I meant.. but, i'm honestly not sure if this is the right things to do.. :sweat_smile:

[ScriptedAlchemy]

Wait wait wait. Is this in regards to the issue I identified of having to put RUC utilities one folder higher!?!

[ScriptedAlchemy]

@ignatiusreza

[ignatiusreza]

I'm sorry for the confusion @ScriptedAlchemy .. it might not be related to having to put RUC utilities one folder higher.. still trying to wrap my head around it myself.. :sweat_smile: .. here's what I understand so far..

when we're facing the issue, we have externals set to require('webpack-node-externals') in the server configuration (we did it because redis depends on redis-parser, which have require('hiredis') even though it is never get executed, and webpack was complaining).. hence, all of the universal stuff are directly processed from under node-modules, instead of being bundled together in the webpack compilation bundle..

this in turn means that when requireSync runs, isWebpack() return false, and then tryRequire will try to load using module.require(path()).. but path doesn't return the correct path.. which leads to my PR to babel-plugin above..

by reconfiguring to externals: ['hiredis'], we have all of the universal stuff be included in the webpack bundle, hence, isWebpack() will return true, and requireSync will then tryRequire using __webpack_require__(resolve()), and after setting LimitChunkCountPlugin to maxChunks: 1.. it's all working good :+1:

interestingly, we're still keeping the folder structure mentioned above (having RUC on the same folder), and are facing no issue (so far)..

I hope that makes some sense? sorry if it all sounds like gibberish.. :bowing_man:

[ScriptedAlchemy]

Im gonna test this out locally!

[ScriptedAlchemy]

Hmm @ignatiusreza do you have an example repo of this?

[ignatiusreza]

I don't have one readily available, as the project that i'm working on is not open source.. but, I guess, I can try to get one out.. it might takes a few days though, if that's okay..

[ScriptedAlchemy]

It’s a tricky one to test against. I’ll need to actually put it in npm under some tag so I can verify. It’s really hard to determine with symlinks. They often give me problems in the build so I can’t sign off without really knowing. It seems as if the Change is mostly a refractory. The part I’m interested in is how you are keeping RUC in the same folder as the stuff you import without the server build re among the file something really starange

[rherwig]

Maybe @manish4781 can provide an example, since he is experiencing the same issue using my boilerplate.

[ScriptedAlchemy]

@rherwig can you send me a example repo (you user sounds familiar so I'm sorry if we had this chat before)

[rherwig]

@ScriptedAlchemy The issue of @manish4781 can be found here. He is using the latest master of template-react-16-ssr.

However, I did not currently reproduce the issue myself.

[ScriptedAlchemy]

@rherwig ahh thank you, its could likely by a yarn.lock or package-lock.json file messing with him?

I discovered a few React-Static issues related to that

[ScriptedAlchemy]

Hmmm @rherwig If you are not able to then I'm inclined to dedicate my efforts into other areas of this project in desperate need of upgrades. One being a been call to developers who want to help us out with getting an alpha release of Rudy #justSaying

[ignatiusreza]

@ScriptedAlchemy so I created a sample app in ignatiusreza/react-universal-component-128 and while working on it, I realized what you meant by chunknames with slashes get converted to dashes.. :man_facepalming:

our project are still using react-universal-component v2.9.0, hence chunk names doesn't get dasherized.. i'll try to update the sample repo to v3.0.0 and test how it behave.. for now the sample repo is up if you want to see how the setup is..

one thing that concern me is you mentioned that strings like: "components/thing/other" they were impossible to flush out.. but, it seems to be working just fine in the sample project I made?

[ignatiusreza]

updated the sample repo to v3.0.0, and everything is still working (even with RUC sitting in the same folder)..

also did some more investigation I realized that faceyspacey/babel-plugin-universal-import#63 is a complete misdirection (sorry for the noise :sob:).. the key take away here are:

• everything from the universal family must not be marked as externals

• server must generate only 1 chunk; so new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) is a hard requirement

[ScriptedAlchemy]

@ignatiusreza

one thing that concern me is you mentioned that strings like: "components/thing/other" they were impossible to flush out.. but, it seems to be working just fine in the sample project I made?

Either we were miss-communicating, or that message was old. I specifically did that while dash to slashes thing in order to get access to chunknames, you are indeed and should be able to do exactly that!

Now when it comes to externals, things get a lil tricky. If you check my profile, you'll see 2 things

• Webpackery
• moduleraid

Those things are designed around chunk sharing and injection within webpack.

Can you have some file run through the build where your external needs to run. Like literally just another script on the page or something.

You can share other resources in other chunks from other builds (shhhhhh) it's true!!

At least in my setups (remember module raid and webpackery) but i think you should be able to just load a chunk within a universal app, and it will be available to other builds.

Might be an issue if the hashes are different but give it a try

[ScriptedAlchemy]

@re6exp is this still a valid issue, given the update we have?

[re6exp]

Yes, it is. But I'm not sure what is the cause. May be, my configuration is wrong.

12 сент. 2018 г. 1:08 AM пользователь "Zack Jackson" < notifications@github.com> написал:

@re6exp https://github.com/re6exp is this still a valid issue, given the update we have?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/faceyspacey/react-universal-component/issues/128#issuecomment-420442759, or mute the thread https://github.com/notifications/unsubscribe-auth/ACzyA6YEcyPlcvtmN8t0Uf16saQesC7Vks5uaDR1gaJpZM4U4Iju .

[ScriptedAlchemy]

going to close this out for the time being. I am looking into a solution for flushing chunks with slashes.