« first day (2873 days earlier)      last day (2297 days later) » 

16:00
what is "it"!
context
and my thought is the my libs node_modules is irrelevant if i'm bundling the lib
@AlexBollbach we're talking about compile time though, when it's being bundled and not after.
so the error happens in the main app
compile works in the lib
That doesn't matter, resolution happens in the main app
16:01
but i'm running a webpack-dev-middleware in my main app, so when the lib builds (successfully) it triggers the main app to do something
That's fine, he's just asking that you try add context to the library webpack config
i did, same error
Thanks, just for lols can you try exporting your library as umd? I have a hunch
libraryTarget: "umd" ?
16:03
I g2g, hope you figure it out. I just think you really need to hammer out 1 where WP is run from, 2 where it expects node_modules to be. webpack.js.org/configuration/entry-context/#entry
user1596138
144
Q: If everyone in the world disappeared except 35 random people, how long would it take for one of them to realize they're not alone?

EulbEveryone suddenly disappears from earth except 35 people randomly scattered wherever they were before everyone disappeared. How long would it take on average for 2 or more people to meet? What other factors would indicate to a person that they're not the only person who didn't disappear?

user1596138
I found this question generally interesting
user1596138
I also enjoy the last editor's username given the question
user1596138
> John Locke
ugh
npm WARN [email protected] requires a peer of webpack@2 || 3 but none is installed. You must install peer dependencies yourself.
npm WARN twizual@ No description
npm WARN twizual@ No repository field.

npm ERR! path /Users/abollba/Dropbox/all/web/apps/libs/ab-chart/node_modules/styled-components/node_modules/buffer
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/abollba/Dropbox/all/web/apps/libs/ab-chart/node_modules/styled-components/node_modules/buffer' -> '/Users/abollba/Dropbox/all/web/apps/libs
have to solve this stuff first i guess
in main app
16:04
Like, it does what you want/expect with a library, so it's something small and you're very close I guess
with umd?
They use umd, but if I change it to commonjs there it alos works
so i switched the lib build to "umd" (had a bunch of npm issues but solved that) than rebuild
You can also resolve styled-components to a local module and pass it in as a parameter when bootstrapping the library in the parent app as a workaround - but that shouldn't be required.
now no resolution error
16:06
@AlexBollbach and it works?
but still get
styled-components.browser.esm.js:2300 It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason.
fuckin webpack :D
@AlexBollbach ok, open the bundle for ab-chart in the dist folder, is styled components bundled there?
whats the best way to tell?
Open the minified file and look for styled components there :D
There are packages you can download that analyze bundles but honestly it's simpler to just look - the bundle is not minified anyway
well i mean its not trivial to detect if "its in there"
webpack compiled code is confusing. i mean it looks like there's a lot of styled-component text occurrences
but perhaps the whole library isn't in there??
i mean i see

/***/ "styled-components":
/*!***********************************************************************************************************!*\
  !*** external {"commonjs":"styled-components","umd":"styled-components","commonjs2":"styled-components"} ***!
  \***********************************************************************************************************/
/*! no static exports found */
16:09
That looks good, are you including styled-components in any other way that's not "styled-components" like ./node_modules/styled-components/ anywhere?
no
btw, did we ever determine if styled-components belongs in my lib's node_modules?
because i needed styled-components in my lib's package.json dependencies for it to compile
Why?
As an external that part is no longer required - in fact delete it from the node_modules part and recompile just to be on the safe side
There should be only one copy of styled-components and that should be in your parent app.
odd. i was reading that when you declare a peer-dependency you want to add the same dependency to "dev dependency"
Yeah, for development time that's useful so you install it when working on the app (and running the tests) but not when the app requires it, however it is common to have a vendoring process where you publish the library and then npm install it when it is required - you're not doing that at the moment and are using a local module so things work a little differently.
This is just a lot to learn/remember but it's not very complicated - just a lot and annoying to learn. Builds are painful.
though I'd take webpack over gyp any day :D
yeah i do iOS professionally so there is tangibly less to need to know about fo for builds
i would have thought having SC in dev-dependencies would have made things fine
ok i removed SC from node_modules but i still get the double SC warning!
16:23
@AlexBollbach I also do iOS professionally and if I had a penny for every day I'd take webpack over lipo hell any day :D
luckily i've never had to use lipo
irl or in code
Like the whole "fat framework thin framework" thing, the fact swift is not binary compatible, cocoapods, etc. Doing SDKs for iOS is a lot harder.
but so i still have this issue
oh yeah cocoapods is annoying
i use carthage
I vendor an SDK which is not open source
@AlexBollbach then there is absolutely no SC in your library. For sport please remove the ab-chart dependency, is the warning gone?
cool like PDFKit that gave us a static lib so big we needed to get git LFS
anyway whole other story
if i remove the chart dep i'll have to change a lot of code
16:24
@AlexBollbach plus, let's not forget on iOS SDKs cannot have any dependencies and you literally need to string-prefix all your class names because Objective C class names are global and you can't use swift because it's not binary compatible :D
@AlexBollbach map it to a noop
Mark the chart dependency itself as an external - I suspect you have two copies of styled-components elsewhere. Alternatively make a dummy project that just requires your library and styled components and see if that reproduces the issue.
damn i'll have to get back to iOS work at some point today lol
but i don't want to loose your assistance. will you be around at all later?
Me too, that's why I'm here :D
@AlexBollbach I'll be around at some time in the future for sure, can't guarantee specifics - will probably be here tomorrow. Both @MadaraUchiha and @Mosho have experience doing this (I think) though.
There's also a webpack room on IRC, personally I usually just talk to the core team but I admit that's harder when you don't know people in person.
now i'm back to
Uncaught Error: Cannot find module 'styled-components'
-4-0-4- worked on refresh
Did you ever add context?
yeah but i don't think source maps should affect anything
@AlexBollbach What happens now if you completely remove 'externals' and let webpack namespacing do its thing?
why would i remove externals? why would it compile if i do? i don't have SC installed in my lib right?
@AlexBollbach I'm sorry, I got to go, I'd recommend checking out the working example I linked to and swapping parts one by one until it runs. Since the demo works, the demo uses the config we tried and yours doesn't work - I assume it's something extra in your code.
@AlexBollbach in your base folder, do 'npm install styled-components --save'
16:37
before you go one last thing i noticed is webpack generates a file with just
module.exports = require("styled-components");
and that actually fails despite me having styled-components installed my my main app
"What happens now if you completely remove 'externals'" Webpack will take care of it, externals is mainly for legacy or weird libs, styled-components is pretty modern.
yeah the lib doesn't compile if i remove externals
"webpack generates a file with just module.exports = require("styled-components");"
@AlexBollbach put a debugger there
And see what require does
From the docs: "The externals configuration option provides a way of excluding dependencies from the output bundles."
16:40
Yeah, he understands why it's happening he's just not sure why the require call fails
if i export my library "libraryTarget" as "commonjs-module" i get a different error
Although that's not the problem, the problem is that there are two instances of styled-components
requiring style-components works but its a weird object
Your script can't use it bc you keep excluding it. Let webpack dedup the dependency tree.
sometimes thats the problem. other times its not resolving
16:41
That's probably fine, your external is configured correctly and something else is also requiring styled-components
Are you sure there is no script tag bringing it or another bundle?
but now i'm getting neither the resolution error or the double SC instances
Remember those tools from earlier? medium.com/@joeclever/…
@AlexBollbach oh, then what's the problem?
now its more like the object require gives me is not in the format i expect. which i've noticed before when it comes to commonjs/eSM modules interopting
user1596138
> if each state has only one time zone, we can maintain a static table on backend and return this to UI based on state value.
Yeah, modules are a mess - you're lucky it used to be a much bigger mess 3 years ago.
user1596138
16:42
Quote of the day.
user1596138
Maybe of the quarter
@AlexBollbach Because it is a node.js style import
now it requires succesfully but

const Centered = Styled.div . (can't read div of undefined)
You can't modify modules
what??
i'm just trying to access the module dude
16:46
How do you import it?
import Styled from "styled-components";
Then it didn't find the module, you should have some error output in the console.
but last time it error'd on the require line
now that line succeeds but fails when accessing it
so the module resolution didn't fail. or at least it didn't error
@AlexBollbach what is the Styled module resolving to?
its an object with a property called "default" that is undefined
i feel like i recognize that from past times i've tried to work w/ commonjs/ESM
btw this new behavior is after i made a change to - libraryTarget: "commonjs-module"
16:50
@AlexBollbach and that's it?
@AlexBollbach why did you do that?
but i'm nor aware of an external config to set the external to ESM
because just "commonjs" was erroring on the require line itself
when i change the libraryTarget to commonjs*-module* the require file that webpack generates doesn't error
but what it revolves to seems to be some es6 module formatted object but it the default property is undefined
What about umd?
then it just fails here
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("styled-components"));
else if(typeof define === 'function' && define.amd)
@AlexBollbach Don't capitalize this, I know you are ignoring my nits, but some babel transformations will mess with your code or take it as a Component.
also styled exports a function, not an object
@AlexBollbach hmm, still not sure what require("styled-components") is resolving to
16:57
don't capitalize what?
thats the generated umd code thats breaking
commonjs code breaks
The library code is correct, the problem is that require("styled-component") is using the wrong require probably
still not sure how all this relates to the libraryTarget. if i set that to commonjs-module, i get to the next line. the require doesn't fail. but the result is a bad object
lower-case s
Because if you `require("styled-components") in your own code that in the app that works
@thebug that doesn't make a difference
16:58
@BenjaminGruenbaum It does if you are doing react stuff
do i need to use require now and not ESM syntax?
@AlexBollbach I'm asking that you try require, you can also export it as esm (and be sure you add esm to the externals
jeez i'd have to update like 20 import statements
@thebug he's not ignoring your nits because he doesn't appreciate the help - he does because he has a very specific problem and you're posting messages that while true are not related to that problem.
@AlexBollbach just remove everything from your entry file.
you mean entry key? in my lib? i only have the entry file. huh?
ah
i see
but then it just won't do anything
17:02
Morning!
I am just reading the error messages that they post. That, plus styled does messy functional stuff paired with HOCs. They have a whole page on things that can go wrong: styled-components.com/docs/…
Best to start with the simple problems and work your way up.
but we're not even at SC yet. its simply not resolving modules yet.
Am I misunderstanding what he means here? github.com/tc39/proposal-throw-expressions/issues/…
Why would pause on exceptions pause on both throws? The outer one will clearly never be reached
@BenjaminGruenbaum just started a webpack project from scratch and still get - "ERROR in ../libs/ab-chart/dist/bundle.js"
Need more output
17:12
@MadaraUchiha your comment with debugger in it is correct
@snek But..?
but what
His claim is that throw throw ex should pause twice
yeah makes no sense to me
I claim that that doesn't make any sense, because the inner throw ex is evaluated, then it dies
I thought maybe he's alluding to some implementation detail of the debugger that I'm not aware of
17:13
i'm asking him now
Thanks <3
irc ftw
@snek Network/channel?
Or is it a private one?
freenode
/query ljharb
Ah, so in PM
17:14
he's also in ##javascript
@MadaraUchiha ok now what if you do fn(do { while (true) { while (throw (do { break })) {} } })
@snek I expect the first time throw <anything-whatsoever> is encountered to be paused in the debugger
Then it explodes.
There's also the question of what does break mean inside of a do
Intuitively, I'd say it breaks out of the do, sort of like a return;
@snek After which, you quit, and never write JavaScript ever again.
👌🏻
Right, shower time
it's tuesday already?
@snek Indeed
The rush of victory and vindication is awesome.
enjoy your internet points
If I have a question about how to go about something in Angular (or anything in that matter), but it isn't exactly code related, is there anyway of going about posting a question?
at least let me finish my answer, damn
17:44
@ErraticFox Just ask, don't ask to ask.
@thebug but I was asking where the proper place to ask was
As the message is too long for here.
@ErraticFox this room is the best you'll get for Angular stuff
In short: I don't think I'm using Route Guard correctly.
go ahead and post it and if anyone's interested, they'll help
No, the chat literally says it's too long to send haha.
17:47
gist?
tru
Pastebin only because gist and ghostbin dont have word wrap which makes it a little difficult to read. pastebin.com/raw/PNjBj7WP
@ErraticFox You really can't 'secure' a route, it moreso acts like the pattern field of a <form> -- A sanity check before you do a lot of work.
@ErraticFox Like how they check to see that you have a membership card before you enter COSCO...you can sneak through the doors easy, but there will be a hard check at checkout (in you case, the server).
.,iiiiiiiiiiiiiiijkiiiilkolkjolkjiiiikllkiooooooolllkjjjjjjjjjjjjiuuujjjjjukiki
oops
cat, meet keyboard
18:03
0
Q: Trouble utilizing Webpack externals

Alex BollbachI'm creating a library that depends on Styled-Components. I'm also making an app that depends on my library and Styled-Components. Doing nothing special, I got a warning about two instances of Styled-Components being loaded. After some researching, it seemed that I needed to use webpack extern...

this nightmare goes on...
@thebug so is that the best solution as I explained? If so, it's perfectly fine. I just didn't want to continue to set everything up that way and then down the road, it not be correct.
@ErraticFox Just as long as things are verified by the server
Thanks!
@forresthopkinsa TIL, not the same as these

« first day (2873 days earlier)      last day (2297 days later) »