Error occurred while trying to proxy: localhost:3000 in Windows

I did a fresh install of Sage 10.
When running “yarn dev” the server URL throws “Error occurred while trying to proxy: localhost:3000/”. But when running “yarn build” it is working fine without throwing any error.

I have configured the Url and proxyUrl in my bud.config.js file like this:

app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://ge.io')
    .watch(['resources/views', 'app'])

Also, when I try to run curl http://ge.io it refuges the connection with an error “curl: (7) Failed to connect to ge.io port 80 after 0 ms: Connection refused”

Using the following versions of dependencies

Sage: 10.7.0
Acorn: 3.3
Node: 18.17.1
Yarn: 1.22.21

Any help will be much appreciated. :raised_hands:

P.S I’m using Laragon for local environment

1 Like

Hey @Suraj_Sanwal

  1. setProxyUrl should point to your local env domain for example: ge.test, ge.local etc.
  2. In documentation at the top you got info for Windows users about WSL
1 Like

Hi @Jacek

Thankyou for your help.

Yes I read that doc and able to configure WSL with all the dependencies.
Also, I just changed the setProxyUrl from http://ge.io to simply with domain ge.io like this:

  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('ge.io')
    .watch(['resources/views', 'app']);

But, Now I’m getting BudError

node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
BudError: Invalid URL
at Bud.catch (file:///mnt/c/laragon/www/ge/wp-content/themes/sage-10/node_modules/@roots/bud-framework/lib/bud.js:32:42) {
isBudError: true,
input: ‘ge.io’,
code: ‘ERR_INVALID_URL’,
instance: ‘sage’
}

Can you please guide me here. Much Appreciated :pray:

The protocol was correct ( if you don’t use certificates for local development )

Please check what is your local domain, because maybe it is not ge.io

so if you local domain will be ge.test, you should set

.setProxyUrl('http://ge.test')

Ya. I’m adding correct local domain its is ge.io because when I visit http://ge.io it works. It’s showing the error on localhost:3000.

Moreover, I just tried wget and here connection is refuged for both the url’s. But I’m able to access http://ge.io and can see the changes are reflecting there after making a build.

In case of http://locahost:3000 - Error occurred while proxying request localhost:3000/

Hello,

I have the same problem with the 404 error when using Laragon and Sage 10.
It doesn’t reload automatically.
Do you have a solution?

✖ [HPM] Error occurred while proxying request localhost:3000/ to http://mywordpress.test/

  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://mywordpress.test')
    .watch(['resources/views', 'app']);

Error occurred while trying to proxy: localhost:3000/

I am facing this same issue. While trying to figure out what’s wrong, I stumbled on this comment from @kellymears here Yarn dev return error - #8 by kellymears

I’m not sure what the issue is here, based on present info. I can say that users are successfully using bud with WSL2, and this is likely not a problem with bud but most likely a dev server configuration issue.

I’d think the next step is to make sure that your server is issuing a normal response (code 200). Others have reported similar issues and it has been the result of the server issuing a redirection or failure status. bud is not set up to follow proxy redirections, by default.

Under the network panel in devtools, what are the response headers being issued by the server? That’s the next thing I would check.

My bud.config.js looks like this.

  app
    .setUrl('http://localhost:3000')
    .setProxyUrl(new URL('https://bhanusingh.test'))
    .watch(['resources/views', 'app']);

And https://bhanusingh.test is accessible on my system setup with Local by Flywheel and I see no redirection status being 200 which would cause this issue as suspected in the above comment.

It clearly is the issue with how WordPress is setup locally.

Does anyone have idea on how can this be fixed?

If not what is the official recommended way proposed to setup WP, I am willing to switch the setup method if it runs my local dev setup.

Any help is appreciated.

I don’t use Local by Flywheel but I installed it to verify Sage was working correctly. I didn’t bump into anything unexpected.

Here is my config:

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/sage/docs sage documentation}
 * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/reference/bud.setUrl}
   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
   * @see {@link https://bud.js.org/reference/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setPublicUrl('http://flywheel.local:3000')
    .setProxyUrl('http://flywheel.local')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

The only changes I made were the the bud.setPublicPath and development setup.

Flywheel settings:

Installation steps:

I ran the following in the shell provided by Flywheel:

cd wp-content/themes/sage
composer install
composer require roots/acorn
wp theme activate sage

yarn install
yarn bud upgrade
yarn bud dev
1 Like

@kellymears Thanks for your revert into this.

I just wanted to confirm one thing. Did you setup this on windows(using WSL2)? or you tried this on ubuntu OS?

As, I also tried local by flywheel with WSL2 but experiencing the same proxy issue that I already had with laragon.

Thanks

Just wondering, are you running Local from WSL itself or from Windows?

https://community.localwp.com/t/local-via-wsl2-gui-is-much-faster-than-windows-10-native/25414

I’m running local from windows.

Hi @kellymears

I tried this complete setup in Ubuntu OS by following the steps you had mentioned in your previous comment.

My bug.config.js file

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/gestories/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://ge-stories.local')
    .setPublicUrl('http://ge-stories.local:3000')
    .watch(['resources/views', 'app']);

  app
    .hooks.on('build.module.rules.oneOf', (rules = []) => {
      rules.push({
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
    });
  
    return rules;
  });

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

Flywheel Settings:

After installing theme via composer. I tried the following commands:

yarn install
yarn bud upgrade
yarn build
yarn dev

Everything seem working. But as soon as I made any changes to JS or CSS file, I’m getting the following error to the browsers console and can’t see any changes are reflecting in dev url(localhost:3000).

GET
http://ge-stories.local:3000/wp-content/themes/gestories/public/js/app.js [HTTP/1.1 404 Not Found 25ms]

And the following warning to the page.

file_get_contents(/home/suraj/Local Sites/ge-stories/app/public/wp-content/themes/gestories/public/js/runtime.js): Failed to open stream

When I run yarn build again the error goes and changes gets reflected. It seems like everytime I make any change I need to run build command to see the changes. But I’m expecting it should reflect instantly without making any build.

Can you please help into this? Is it related to configuration?

Thanks

After a workaround. I just found that there is something wrong with importing React and adding react components.

I have just created a basic component which returns a text. Then added that component to the app.js of my theme like this:

import domReady from '@roots/sage/client/dom-ready';
import React from 'react';
import { createRoot } from 'react-dom';
import Hello from './components/Hello';
/**
 * Application entrypoint
 */
domReady(async () => {
  // ...
  createRoot(document.getElementById('footer-component')).render(<Hello />)
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

And this is how I’ve created Hello.js component:

const Hello = () => {
    return(
        <div>
            <h1>Hello!</h1>
        </div>
    )
}

export default Hello;

When I run yarn dev browser throws an error: Uncaught ReferenceError: $RefreshReg$ is not defined and once I run yarn build the component renders without any error. But again if I make any changes to the component, the syncing fails and the same error occurs.

It seems like React is causing an issue which only works when I use yarn build.

If you are using React 18 you will need to ensure WordPress’ react and react-dom are not used. WordPress core still uses React v16 and bud.js will automatically replace your imports with references to window.React and window.ReactDOM. Acorn will also enqueue these WordPress provided libraries. This is a problem as those WordPress provided libs are running v16 while your application code is using v18.

My recommendation is to stick with v16 until WordPress updates unless you really need something from v18. But if that’s not an option you can easily exclude react and react-dom from being externalized in your config.