Invalid URL since 5.7.4

I’m developing a new site with LocalWP as my dev environment. Since updating bud to 5.7.4, I’m getting TypeError: Invalid URL when visiting the server url (http://localhost:62820/)

Console output:

 ✘ ~/Local/wervel/app/www/app/themes/wervel   staging ±  yarn dev    
yarn run v1.22.17
$ bud dev
[99%] [done] MultiCompiler plugins

┌ assets ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                                                                                                                                                                                                                                   │
│                                                                                                                                                                                                                                                   │
│  ✔    vendor/app               vendor/app.js                                        2.12 MB                                                                                                                                                       │
│  ✔    editor                   editor.js                                            279.17 kB                                                                                                                                                     │
│  ✔    app                      app.js                                               238.79 kB                                                                                                                                                     │
│  ✔    vendor/bud.app.editor    vendor/bud.app.editor.js                             50.47 kB                                                                                                                                                      │
│  ✔    ᠃                        resources/images/aardappelen.jpeg                    554.75 kB                                                                                                                                                     │
│  ✔    ᠃                        resources/images/Vlaanderen_verbeelding werkt.svg    7.45 kB                                                                                                                                                       │
│  ✔    ᠃                        resources/images/wervel-logo.svg                     5.19 kB                                                                                                                                                       │
│  ✔    ᠃                        manifest.json                                        351 bytes                                                                                                                                                     │
│  ✔    ᠃                        entrypoints.json                                     125 bytes                                                                                                                                                     │
│  ✔    ᠃                        wordpress.json                                       33 bytes                                                                                                                                                      │
│                                                                                                                                                                                                                                                   │
│                                                                                                                                                                                                                                                   │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
 duration    4s 732ms   

 mode    development    hash       568d666cc176ecb8ad08   
 bud     5.7.4          webpack    5.70.0                 

 server url:    http://localhost:62820/   
 proxy url:     https://wervel.local/     


[99%] [cache] begin idle

   ┏ TypeError ━━━━━━┓
   ┃                 ┃
   ┃                 ┃
   ┃   Invalid URL   ┃
   ┃                 ┃
   ┃                 ┃
   ┗━━━━━━━━━━━━━━━━━┛


✨  Done in 8.99s.

bud.config.js:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    .when(app.isProduction, app => {
      app.purgecss({
        enabled: false,
        content: [
          app.path('resources/views/**/*.blade.php'),
          app.path('app/**/*.php'),
          app.path('index.php'),
        ],
        safelist: require('purgecss-with-wordpress').safelist.concat(require('./purge-safelist').safelist),
      })
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['images'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
     .proxy('https://wervel.local');
};

I have tried proxying the http:// instead of https://, but this triggers the same error. After rolling back to 5.7.3, it works fine.

Fix is in progress at fix: proxy media by kellymears · Pull Request #1319 · roots/bud · GitHub - we’ll merge and tag a new release once it’s ready

1 Like

Reminder that Browsersync can be used as a replacement (either temporary while we iron out the Bud dev server, or permanently if you prefer it)

  1. install browsersync: yarn add browser-sync browser-sync-webpack-plugin --dev
  2. modify bud.config.js:
# @ bud.config.js
const bs = require('browser-sync-webpack-plugin')

...
    .use(new bs({proxy: 'http://example.test'}))
full config example
const bs = require('browser-sync-webpack-plugin')

module.exports = async (app) => {
  app
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })
    .assets('images')
    .watch('resources/views/**/*', 'app/**/*')
    .use(new bs({proxy: 'http://example.test'}))
};

Edit: Bud 5.7.6 is out, so please give that a try!

I get this error in the console:

There was an issue requesting http://brilonline.test/ (it should be the current page). TypeError: Failed to construct 'URL': Invalid URL

I installed BrowserSync but gets the same error. When I use the 0.0.0.0:3000 link it works fine but my own proxy url needs to work correctly also.

That is a console error but it’s not an exception and it isn’t thrown. It’s in a try/catch, as a part of the proxy url replacement script.

You can confirm for yourself by adding something like this to your app scripts:

setInterval(() => console.log('ping'), 1000)

You’ll see the interval timer continually firing away even as everything related to HMR crashes and burns:

image

1 Like

Is there any way to remove these ?
I have these logs even in production

You absolutely should not have these logs in production. If you do it means you are running dev code in production.

1 Like