Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
hepicek
@hepicek
Does it mean RUC won't be supported and you switch to Respond? Or is Respond based on RUC and RUC will be maintained for the future? I started to build new project with RUC and I like it very much, so I hope I won't have to leave it.
Zack Jackson
@ScriptedAlchemy
No RUC will be supported :) but we will have new products that no longer require RUC too :)
Don’t worry. I won’t abandon anyone or project. I’ll have more time and opportunities to focus on RUC in about a month
Zack Jackson
@ScriptedAlchemy
Just want to put a blanket statement out on that. I’ll always support our product range. Time constraints make it hard, but if there’s ever a critical issue. I’ll jump on it and I usually have a workaround to any blocking issues :h
hepicek
@hepicek
Zack, I would like to ask you if you have any example of code splitted component. Code spitting by pages is working fine. But if I want to spit e.g. content in modal which is not visible on first load, I'm not able to to do. Example would be awesome.
hepicek
@hepicek
Other issue I face is, that app.js in src folder is bundled with all node_modules, is there any option how to split it? I use switcher for spliting by pages(it is ok), but components which are imported directly to app.js are included to main.js bundle created by webpack.
hepicek
@hepicek
@ScriptedAlchemy could look at my questions please? ^^
Konrad Abe
@AllBitsEqual

Hi everyone. I've been working with [React Web] and [Redux First Router] for a while now and it works like a charm for me in most projects.

I've recently started working with [React Native] and [expo.io] for cross platform projects and I just wanted to make a rain check on the state of Redux First Router for React Native Projects.

It's kind of hard to get a good idea of the state of the projects with lots of code being stale for 2 years and the fragmented documentation and tutorials/examples.

I really love RFR for my React Web projects and it would be great to not relearn everything for React Native.

Tanner Stirrat
@tstirrat15
@hepicek when you say "not visible," do you mean "not rendered?" it's been working fine in my project to use a lazy loading component with the react-universal component and have things split nicely.
I've got an issue too: I'm working on a react 16.8 upgrade, and chunks are flushing correctly, with the correct script tags showing up at the bottom of the body, but the synchronous requires along the render path aren't working correctly. I get my loading UI, and it never resolves.
Tanner Stirrat
@tstirrat15
note: the not resolving on the frontend has to do more with my publicPath than with react-universal-component
but it's still failing to render along the render path
Tanner Stirrat
@tstirrat15
when I log the weakId, I see 548, and when I log __webpack_modules__.length, I see 531
Tanner Stirrat
@tstirrat15
Tanner Stirrat
@tstirrat15
ahhhh
it's coming from the babel-plugin-universal-component
Tanner Stirrat
@tstirrat15
here's what the babel plugin is spitting out:
const AsyncHomeRoute = react_universal_component__WEBPACK_IMPORTED_MODULE_6___default()(babel_plugin_universal_import_universalImport__WEBPACK_IMPORTED_MODULE_1___default()({
  id: "./homepage/components/Root",
  path: () => path__WEBPACK_IMPORTED_MODULE_0___default.a.join(__dirname, './homepage/components/Root'),
  resolve: () => /*require.resolve*/(549),
  chunkName: () => "homepage-components-Root"
}), universalConfig);
where is it getting the resolve number from, and why is it commenting out the require.resolve?
is that because it's on the backend, so it's short-circuiting that part?
Tanner Stirrat
@tstirrat15
oddness. none of my application code is getting bundled into server.js. there's a whole bunch of stuff that should be externalized that's in there, but the app code isn't, which is presumably why it's not finding it.
Tanner Stirrat
@tstirrat15
How is RUC + the babel plugin supposed to include all of the app code that sits behind an import statement?
from what I understand, if you don't have the babel plugin in place, the import statement will get interpreted by webpack to mean "go grab the file at this path"
but if you have the babel plugin in place and it's not somehow inlining all of the code behind the import statement, how is the server-side require bit supposed to work?
okay
getting rid of babelServer in the plugin suddenly has it working
Tanner Stirrat
@tstirrat15
:D:D:D:D
let me know if you want me to create an issue on that
Aleksandr Moon
@moeatsy
i dont know what wrong with me) but im absolutely not understand examples and structure of RFR :c maybe someone can show me a new simple example where RFR Is used?
Brian Wilson
@brian32768
Did you look at react-first-router-boilerplate yet? I am looking at it now, not sure if it's helping yet :-) Looking for other samples myself, too.
Brian Wilson
@brian32768
This guy wrote a short article and posted code in github that seems straightforward: smtchahal/got-characters
Aleksandr Moon
@moeatsy
@brian32768 thanks, looks simple enough to understand, will check it later) boilerplate not help at all due developers not tried to make this code easy read
Brian Wilson
@brian32768
you can do a diff on got-charcters-without-router/src and got-characters/src and see how little he had to change to add routing.
I found the boilerplate confusing too
Brian Wilson
@brian32768
It would help me if JavaScript syntax was less chaotic. Every time I dig into someone's examples, I find some weird syntactic thing that the author probably thinks is very clever and then I have to spend an hour trying to figure what it means and why he used it. In this example (got-characters), he used a thing with an object like this: S="s"; {[S] : "something"}; and I cannot find any reference to using brackets like that anywhere. It dereferences the variable and puts "s" into the object, not a list ["s"]. Everything I know says it should put a list in there ["s"] not the string "s". I still think JavaScript is just an awful language. Its strength (and a weakness too perhaps) is the number of packages available. Sorry for veering off into plain JavaScript, everyone here is probably rolling eyes.
Please if you are writing examples about a package, remember you are demoing the package and not your depth of JavaScript knowledge.
Brian Wilson
@brian32768
I just pushed my own demo/experiments to https://github.com/brian32768/rfr-test please look and be amused or derisive then offer suggestions. :-)
Brian Wilson
@brian32768
Reading README for rfr carefully I see the section that says "we need examples" so now I have two missions! 1 Learn to use it and 2 write the examples that I currently desperately need! :-)
kapilpipaliya
@kapilpipaliya
Dont use React. i was highly burned by it
Brian Wilson
@brian32768
@kapilpipaliya unless you can make a more descriptive comment, you are just trolling. I'd love to hear more.
kapilpipaliya
@kapilpipaliya
react never worked for me
i wasted my 2 years with it
it takes so much time to develop and its too much performance problem
Brian Wilson
@brian32768
My project is pretty small and self-contained so React seems to be working fine so far. Thanks for your feedback. I have learned a metric ton about how OpenLayers works and state of the art web development along the way so even if I were to scrap React tomorrow it would not have been time wasted for me.
Aleksandr Moon
@moeatsy
its same with angular, every time i trying to learn it, it just destroy my nerves. To write something there, you need to know what to write, you cant just improvise. Its anti intuitive. Like transliterate versus original English. And Im happy with React) but im not pro yet
Markku Virtanen
@cahva

hello everyone. I thought that I visit here because I'm a little stumped. We have a SSR site using rfr, universal components and use webpack-flush-chunks among other things. The problem is that our site is getting quite large and I noticed yesterday that the main.js is now over 1.8M in size. The thing that got me worrying is that for example we installed a new package from npm that we use inside a subpage (it is not used for example on the frontpage at all).

Is it normal behaviour that this new package is part of main.js althought it is only used in one of the subpage? IMO that package should only be loaded when going to that particular page. Have I completely misunderstood how the code splitting works here? :)

Tanner Stirrat
@tstirrat15
what version of webpack are you using?
and question of my own: I saw that there's an API for when "build step and your render step are separate" that uses a Provider rather than a direct reference to the webpack stats. When would they be the same other than in development? Why is the webpack stats approach preferred?
Markku Virtanen
@cahva

@tstirrat15 Currently webpack version is set at 4.29.6.

I found a way to split up the main.js by using the splitChunks options and setting maxSize but I haven't tested it in production yet.