Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:14
    webpack-bot labeled #14247
  • 16:14
    webpack-bot unlabeled #14247
  • 16:14

    vankop on feature-14072

    fix for windows. apply suggesti… (compare)

  • 16:14
    vankop synchronize #14247
  • 15:55
    webpack-bot labeled #14247
  • 15:55
    webpack-bot unlabeled #14247
  • 15:41
    sokra synchronize #14291
  • 15:40

    sokra on eval-bailouzt

    avoid bailout of unused eval e… (compare)

  • 12:54
    vankop synchronize #14260
  • 12:54

    vankop on fix-7519

    more complex test case (compare)

  • 12:41
    webpack-bot labeled #14260
  • 12:41
    webpack-bot unlabeled #14260
  • 12:41
    vankop synchronize #14260
  • 12:41

    vankop on fix-7519

    fix discussions (compare)

  • 10:49
    webpack-bot labeled #14291
  • 10:26
    webpack-bot labeled #14291
  • 10:26
    sokra opened #14291
  • 10:26

    sokra on eval-bailouzt

    avoid bailout of unused eval e… (compare)

  • 08:42
    webpack-bot labeled #14260
  • 08:42
    webpack-bot unlabeled #14260
Luke Abby
@DavidArchibald
I’d look for a single-spa Webpack template but that makes sense
Stephen Weiss
@stephencweiss
https://single-spa.js.org/docs/faq/#create-react-app -- this is what i'm looking at and none of the answers look great.
meanwhile, i have an app that uses a CRA template that i'm trying to figure out how to get it to work.
Luke Abby
@DavidArchibald
Why has create-spa-app not been ideal for you? You could use that in an empty directory and then move the old files over instead of fiddling with eject for hours
Stephen Weiss
@stephencweiss
going that route-- how do i then bring my CRA app into create-spa-app?
(basically, I couldn't get it running that way)
(i am not sure i mentioned, but the CRA app has a template, and that's really the part i'm trying to replicate / merge-- the Create-spa-app w/ the template)
Luke Abby
@DavidArchibald
Why not use the entire cli?
Stephen Weiss
@stephencweiss
what part of the cli are you referring to? (what am I missing? :) )
you're talking about this, right? https://single-spa.js.org/docs/create-single-spa/#cli-arguments i can't point it to a cra template, right?
Luke Abby
@DavidArchibald
I’m a bit confused why you’d want to mix the templates, that documentation has create-single-spa --framework react and create react app is a single page application already
But yes if you need to mix templates you’ll have to resolve a lot of headaches
Stephen Weiss
@stephencweiss
create-single-spa is the webpack config we need in order to ensure that the bundle is compatible with the single-spa framework for consuming. the cra template we want to use ensure all of the configuration we need in order to use the library we want (a design system that uses tailwind, etc.)
both of which are mostly black boxes to me, so i don't actually know which way is easier to start.
Luke Abby
@DavidArchibald
I see, in that case I’d suggest create react app rewired; it’s actually suggested in the documentation and that way you’ll must have to copy that gist and not mess around with the config yourself
https://single-spa.js.org/docs/faq/#create-react-app it’s the second option here that you showed
I’ve never tried the second option, the craco-plugin-single-spa-application but it may work as well
Stephen Weiss
@stephencweiss
awesome. that's kind of where we're landing :)
Luke Abby
@DavidArchibald
Create react app updates and you’ll lose updates or have to constantly update your config to match
Stephen Weiss
@stephencweiss
will give it a shot and report back
Luke Abby
@DavidArchibald
Hope it works well haha
Stephen Weiss
@stephencweiss
right -that's what we're trying to avoid.
Luke Abby
@DavidArchibald
Create react app rewired won’t stop updates though
That’s its whole point
Stephen Weiss
@stephencweiss
have you used craco?
Luke Abby
@DavidArchibald
Nope, mentioned that I hadn’t above. It should work too? I’m just not sure.
Stephen Weiss
@stephencweiss
missed that :) sorry!
but yeah, just trying to feel my way through the problem.
Luke Abby
@DavidArchibald
Yeah no problem, it’s trade offs here usually. I think 2 and 3 will be best for you though, 1 and 4 can be thought of as “low level” and makes updating hard. 2 may also but I’ve not used it so I can’t really say
Stephen Weiss
@stephencweiss
😅solved!... i think!
thanks for bringing me back to try other solutions rather than wrestling with eject.
Luke Abby
@DavidArchibald
Yup glad I could, rewired is much simpler to use
Stephen Weiss
@stephencweiss
ended up going with craco, fwiw -- just missed the fact that @craco/craco is also a dependency (i think...the plugin readme is not particularly clear on that point) :)
Luke Abby
@DavidArchibald
lol peer dependencies are annoying
Josh Rouwhorst
@joshrouwhorst
Hey, I'm hoping someone can help me out. I'm setting up a really basic project but I'm running into issues with html-loader where I'm getting a "ReferenceError: __filename is not defined" error in the terminal. Here's my gist: https://gist.github.com/joshrouwhorst/42c4f68f5fce4f8163a411da9d183dcb
The src folder just has an empty app.js file, a template.html file, and an asset folder with one image in it. The template.html file has an image tag referencing that image. When I run webpack the image shows up under dist/assets but I get the error that I put in output.txt. Also the index.html that gets generated shows the error as well.
Luke Abby
@DavidArchibald
try target, it looks like you're running it in a non node environment but it's using the node pseudo-global __filename
That's not guaranteed to change the source generation if the loader is ill behaved
Josh Rouwhorst
@joshrouwhorst
Hi @DavidArchibald, I put target: 'web' as a top level attribute and got the same result.
Luke Abby
@DavidArchibald
what's your node version and are all the dependencies, i.e. plugins/loaders/webpack all up to date?
Josh Rouwhorst
@joshrouwhorst
My node version is v14.15.1 and I just added my package.json to the gist
I just created the project so they should be up to date
Luke Abby
@DavidArchibald
right html-loader in general might be out of date. I see a deprecation warning here:
(node:43091) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
this suggests we have a module that's not well behaving for Webpack 5
Josh Rouwhorst
@joshrouwhorst
Ahhhh, ok. I figured I was just configuring it wrong.
Luke Abby
@DavidArchibald
I don't know if the deprecation warning is actually coming from html-loader until this is checked
BTW do you want to be importing the HTML as a string? I'm not sure you're aware that's its behaviour
Josh Rouwhorst
@joshrouwhorst
So, what I'm trying to do is to have images referenced in the template brought over to the dist/assets folder. And maybe this isn't the right way to do that.
joshrouwhorst@Josh-Rouwhorsts-MacBook-Pro-7 Test % node --trace-deprecation node_modules/webpack/bin/webpack
(node:43540) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/node_modules/html-webpack-plugin/index.js:286:49
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
asset assets/Image.png 2.61 MiB [emitted] [from: src/assets/Image.png]
asset main.c74f277f0931dd2347b7.js 1.18 KiB [emitted] [immutable] (name: main)
asset index.html 954 bytes [emitted]
./src/app.js 1 bytes [built] [code generated]

ERROR in   Error: /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121
  /******/  __webpack_require__.b = require("url").pathToFileURL(__filename);
                                                                 ^
  ReferenceError: __filename is not defined

  - template.html:121 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:121:65

  - template.html:140 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:140:13

  - template.html:150 
    /Users/joshrouwhorst/Documents/Projects/_Joshs/Test/src/template.html:150:12

  - index.js:327 HtmlWebpackPlugin.evaluateCompilationResult
    [Test]/[html-webpack-plugin]/index.js:327:28

  - index.js:243 
    [Test]/[html-webpack-plugin]/index.js:243:22

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

  - async Promise.all

  - async Promise.all