Error: No process running on port

[flazouh]

Привет, I have an issue using the reloading with the Reloader from advanced-extension-reloader-watch-2 with esbuild.

My esbuild config:

import esbuild from 'esbuild'
import stylePlugin from 'esbuild-style-plugin'
import tailwindcss from 'tailwindcss'
import Reloader from 'advanced-extension-reloader-watch-2/umd/reloader'

import {
  copyLocalesFolderTo,
  generateLocales,
} from './scripts/generate-locales'

const reloader = new Reloader({
  port: 6223,
})

reloader.watch()

const watchPlugin = {
  name: 'watch-plugin',
  setup(build: esbuild.PluginBuild) {
    build.onStart(() => {
      console.log(`Build started at ${new Date().toLocaleTimeString()}`)
    })
    build.onEnd(async (result) => {
      const time = new Date().toLocaleTimeString()
      console.log(
        `Build finished at ${time}, ${result.errors.length} errors, ${result.warnings.length} warnings`,
      )
      console.log('Reloading extension...')
      reloader.reload({
        ext_id: 'ehfifdpieloecbgndipmciaoahdodlme',
        play_sound: true,
      })
      console.log('Watching for changes...')
    })
  },
}

console.log('Dev build started...')
const options: esbuild.BuildOptions = {
  entryPoints: {
    content: './src/index.ts',
    resources: './resources/index.ts',
    background: './background/index.ts',
    popup: './popup/index.tsx',
  },
  bundle: true,
  minify: false,
  sourcemap: 'inline',
  loader: {
    '.tsx': 'tsx',
    '.ts': 'ts',
    '.css': 'css',
  },
  outdir: 'dev',
  define: {
    'process.env.NODE_ENV': '"development"',
  },
  jsxFactory: 'React.createElement',
  external: ['./xhr-sync-worker.js'],
  jsxFragment: 'React.Fragment',
  plugins: [
    watchPlugin,
    stylePlugin({
      postcss: {
        plugins: [tailwindcss],
      },
    }),

  ],
}

console.log('Building...')
const ctx = await esbuild.context(options)
await ctx.watch()

my config in chrome:

Do you have any idea why this is happening?

Cпасибо тебе.

EDIT: It works, i don't know what I changed, does editing the port in the settings saves on change ? 🤔

[loftyshaky]

Yeah, the port should save on change. Not sure what caused the problem. I haven't used esbuild myself.

[flazouh]

it's not really about esbuild, anything should work since you're calling method on the listener class, but now it works, thanks for the extension, it's actually the best i've found among many ones I tried.

[flazouh]

It doesn't work again. I don't know why. port 6000 on both the extension settings and in the

const reloader = new Reloader({
  port: 6000,
})

i get :

Error: No process running on port

in offscreen.js

[loftyshaky]

Port 6000 is restricted in Chrome. Use a different port, make sure it's not on this list.

In your the offscreen screenshot Advanced Extension Reloader tries to connect to a server with port 6060 not 6000. See GET http://localhost:6060/socket.io/... in your screenshot. Are you sure port 6000 is in the settings, or do you use 6060 alongside with 6000?

When and where do you get the "Error: No process running on port" error?

[flazouh]

Here is my settings

const reloader = new Reloader({
  port: 6223,
})

[flazouh]

Error: No process running on port
    at node_modules/advanced-extension-reloader-watch-2/umd/reloader.js:9:618699

[loftyshaky]

I tested it and was not able to reproduce this bug. Need more info. I'm reopening this issue, maybe someone else knows the cause of this.

[flazouh]

Btw, I tried again and had to do

import Reloader from 'advanced-extension-reloader-watch-2/es/reloader'

// @ts-ignore
const reloader = new Reloader.default({
  port: 6223,
})

with this tsconfig:

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true,
    "strict": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "paths": {
      "common": [
        "./common"
      ]
    },
    "sourceMap": true,
    "target": "esnext",
    "types": [
      "chrome",
      "node",
      "react",
      "react-dom"
    ]
  },
  "include": [
    "esbuild.prod",
    "esbuild.dev",
    "chrome-webstore-manager",
    "environment.d.ts",
    "src/**/*",
    "common/**/*",
    "background/**/*",
    "resources/**/*",
    "popup/**/*",
    "_locales/**/*",
    "scripts/*",
  ]
}

I don't know why this problem arose.

But regarding the port problem, it seems resolved.

[loftyshaky]

I managed to reproduce this issue on Linux. The advanced-extension-reloader-watch-2 didn't actually work there at all for me (tested on Ubuntu).

I released an update to advanced-extension-reloader-watch-2 some time ago that may have fixed the issue on macOS too. If you're still interested in using the extension you can test it now.

Also, fixed another issue with Chrome stealing focus on an extension reload.