Lint never connects to VS code

[nxfi777]

What version of million are you using?

0.0.73

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Firefox, Chrome

Describe the Bug

I was originally using CRA, but the craco method does not resolve for the craco plugin object. I now am using the webpack method alongside webpack-bundle-analyzer. Here is my config:

// craco.config.js
const BundleAanlyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const MillionCompiler = require('@million/lint');

module.exports = function () {
  return {
    webpack: {
      configure: {
        entry: './src/index.js',
      },
      plugins: [new BundleAanlyzerPlugin({ analyzerMode: "server" }), MillionCompiler.webpack()],
    },
  };
};

The million lint plugin is installed, and eslint is working correctly. The issue is that no matter how long I wait, or how much I play around with the site, million lint never connects to VS code in the dev server environment. The site is responsive, and I am using block for some static elements.

What's the expected result?

Million lint detects issues in my CSR SPA

Link to Minimal Reproducible Example

--

Participation

• [X] I am willing to submit a pull request for this issue.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[AhmedBaset]

I have the same issue, I intentionally wrote very bad code but it didn't report any of them. Then, I cloned the slow application referenced in the announcement and played around the app and it didn't detect any issue.

For context, I don't see the "Connecting to Visual Studio Code" like the OP.

[sannajammeh]

Same issue here, it does not connect to VScode at all. Just shows the toolbar saying "connecting to vscode"

[roymrinmoy]

Facing the same issue here. Everything is same as the OP except I'm using Vite on mac.

[tobySolutions]

Hello there @nxfi777, @AhmedBaset, @sannajammeh, @roymrinmoy we have actually fixed this issue in the upcoming release and you will no longer experience this; apologies for the not so great first encounter.

[karthikmallireddy]

It's still not connecting.

[AhmedBaset]

It's still not connecting.

Have you updated to 1.0.0-rc.1?

[karthikmallireddy]

Yes but it's keep saying start dev server in VS Code.

[Stanzilla]

POST http://undefined:42423/ingest?z=1 net::ERR_NAME_NOT_RESOLVED

[RishabhTayal]

having same issue

[ImLunaHey]

please stop replying with "same issue" if you dont have anything extra to add.

ive updated to 1.0.0-rc.1 and im using the webpack provider. still having issues.

@tobySolutions can you confirm which version this is meant to be fixed in?

[ImLunaHey]

guessing this is related? ive tried the onboarding a few times now and every time the callback page just shows a blank page. i dont get redirected to a vscode:// url or anything.

[jessedubbink]

I have opened a question regarding the same issue this morning in the Discord server. Including the reproduction steps.

Hi, I'm excited to use Million Lint but I can't seem to login.

I've installed Million and MillionLint and installed the vscode extension. After which it guided me to authenticate using google or github. But after signing in with either of the options, it did not actually sign me in.

I'm still stuck on https://beta-million-lint.vercel.app/auth/callback in the browser.

I've tried using Arc and firefox but neither seem to solve the issue.

Steps:

1. I get the prompt to sign in, I click Allow.
2. I get the vscode confirmation to open the link to an external website, I click Open.
3. I sign in using GitHub
4. I get the authorization screen for Clerk, I click Authorize.
5. It tells me I'm redirected, after which I'm redirected to a blank page with the auth/callback url from above.

The plugin in vscode stays unauthenticated.

[ImLunaHey]

update. i managed to get an account made and the extension is now authenticated. i had to go through the login process a LOT of times though, finally on the last time it seems to have worked.

[aidenybai]

hey folks – we're working on it. merging the folks from #994 here

[NisargIO]

@Stanzilla

POST http://undefined:42423/ingest?z=1 net::ERR_NAME_NOT_RESOLVED

This should be fixed! Please update your npm package and try again

npx @million/lint@latest

[karthikmallireddy]

Updated to RC7 version and issue remains same it's a blank next js project Please find the attached screenshot.

[BrandonTing]

Updated to rc7 and I got different error message in console. It's a blank layout component using react router v6

[aidenybai]

@karthikmallireddy

We're not 100% sure why this is happening. We made the following changes:

• We listen on both localhost and 0.0.0.0, previously just localhost
• We migrated from a file coordinating strategy to a server that holds the coordination map
• We have indicators to tell you which connection step you're on:

You can upgrade by installing the latest VSCode extension (v0.1.4) and upgrading Million Lint. This should help you upgrade:

npx million@latest

[ImLunaHey]

i've got a webpack.config.ts and get the following when running the above command.

 No build tool detected. No configuration file found in the current path: /Users/luna/code/axiomhq/app/frontend 

[nxfi777]

i've got a webpack.config.ts and get the following when running the above command.

 No build tool detected. No configuration file found in the current path: /Users/luna/code/axiomhq/app/frontend 

Separate issue, I suggest opening a new issue for this. Are you using craco? What framework are you using?

[ImLunaHey]

Are you using craco? no

What framework are you using? webpack + react

[karthikmallireddy]

@karthikmallireddy

We're not 100% sure why this is happening. We made the following changes:

• We listen on both localhost and 0.0.0.0, previously just localhost
• We migrated from a file coordinating strategy to a server that holds the coordination map
• We have indicators to tell you which connection step you're on:

You can upgrade by installing the latest VSCode extension (v0.1.4) and upgrading Million Lint. This should help you upgrade:

npx million@latest

@aidenybai Thanks,After the new update it's now connected to visual studio code but react app is showing as not connected but core webvitals still showing as not connected despite dev mode is running in background.

[BrandonTing]

It has worked on my project after upgrade to latest. Thanks for fixing.

[rburgst]

have a vite project with latest versions of million and million lint, I still see

• ingest server: not connected
• react app: not connected

in the browser I see healthcheck XHRs being made as well as the browser console reports

[Million Lint] Ingested 356 events 

Finally note that my react app is missing a few components after installing million lint (I did install million as well as I wasnt sure if it was needed or not). Also the installer reported an error and I did the vite configuration manually.

[QuiiBz]

If that can help, I had to remove --turbo from my next dev command to make it connect to the extension.

[imdavidkelly]

I have the same issue as @karthikmallireddy now

[lovincyrus]

After removing --turbo flag from next dev, it starts working. If the vscode extension is stuck on Ingest server and React app not connected, I'd reload the local development server.

> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...

 ⚡ Million Lint v1.0.0-rc.13
 - Local server: http://localhost:42423

My npm packages:

"@million/lint": "1.0.0-rc.13",
"million": "^3.1.6",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",

[roeku]

I don't have the --turbo flag, I get the million lint to ingest and can see Ingesting in my console but the VSCode plugin still does not work, I've tried with different projects but the plugin seems stuck, I installed previous version as well, disabled, uninstalled an reinstalled but get same results.

I have installed using npx million@latest

My packages

     "@million/lint": "^1.0.0-rc.18",
     "million": "^3.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "next": "^14.2.3",

I do have a somewhat complicated next.config.js

const MillionLint = require('@million/lint');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});

const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development'
});
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: 'www.notion.so'
    }]
  },
  webpack(config, {
    isServer
  }) {
    if (!isServer) {
      config.externals.push('sharp');
    }
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      exclude: config.exclude,
      use: [{
        loader: require.resolve('url-loader'),
        options: {
          limit: config.inlineImageLimit,
          fallback: require.resolve('file-loader'),
          publicPath: `${config.assetPrefix}/_next/static/images/`,
          outputPath: `${isServer ? '../' : ''}static/images/`,
          name: '[name]-[hash].[ext]',
          esModule: config.esModule || false
        }
      }]
    });

    // shader support
    config.module.rules.push({
      test: /\.(glsl|vs|fs|vert|frag)$/,
      exclude: /node_modules/,
      use: ['raw-loader', 'glslify-loader']
    });
    return config;
  },
  experimental: {
    nextScriptWorkers: true
  }
};
const KEYS_TO_OMIT = ['webpackDevMiddleware', 'configOrigin', 'target', 'analyticsId', 'webpack5', 'amp', 'assetPrefix'];
module.exports = (_phase, {
  defaultConfig
}) => {
  const plugins = [[withPWA], [withBundleAnalyzer, {}]];
  const wConfig = plugins.reduce((acc, [plugin, config]) => plugin({
    ...acc,
    ...config
  }), {
    ...defaultConfig,
    ...MillionLint.next({ rsc: true })(nextConfig)
  });
  const finalConfig = {};
  Object.keys(wConfig).forEach(key => {
    if (!KEYS_TO_OMIT.includes(key)) {
      finalConfig[key] = wConfig[key];
    }
  });
  return (finalConfig);
};

[matej-kaska]

Having same problem. On the app I have bar with this text: Failed to connect. Is your VSCode window open?

Versions: Extension: v0.1.8 milion: 3.1.7 milion/lint: 1.0.0-rc.18 VSCode: 1.89.1 Node: v20.10.0 Vite: 4.4.5 React: 18.2.0

I am stuck on Ingest server and React app - not connected

When I load the page I get some logs:

I tried to fiddle with some vite.config.ts settings, but it did not help:

import MillionLint from '@million/lint';
import million from 'million/compiler';
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import sassGlobImports from "vite-plugin-sass-glob-import";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
const _plugins = [react(), svgr(), tsconfigPaths(), sassGlobImports()];
_plugins.unshift(million.vite({
  auto: true
}), MillionLint.vite())
export default defineConfig({
  plugins: _plugins,
  server: {
    host: true,
    port: 3000,
    strictPort: true,
    watch: {
      usePolling: true
    },
    hmr: {
      clientPort: 3000,
      overlay: false
    }
  },
  define: {
    global: "window",
    "process.env.VITE_GITHUB_USERNAME": JSON.stringify(process.env.VITE_GITHUB_USERNAME)
  },
  build: {
    sourcemap: true,
    minify: "terser"
  },
  css: {
    postcss: "./postcss.config.js"
  },
  publicDir: "public"
});

Console:

[afonsojramos]

Can confirm that the same is happening on a gatsby web app.

Let me know if there is any additional info that you need to help you debug!

[AbbasPlusPlus]

@karthikmallireddy We're not 100% sure why this is happening. We made the following changes:

• We listen on both localhost and 0.0.0.0, previously just localhost
• We migrated from a file coordinating strategy to a server that holds the coordination map
• We have indicators to tell you which connection step you're on:

You can upgrade by installing the latest VSCode extension (v0.1.4) and upgrading Million Lint. This should help you upgrade:

npx million@latest

@aidenybai Thanks,After the new update it's now connected to visual studio code but react app is showing as not connected but core webvitals still showing as not connected despite dev mode is running in background.

I was having the same issue. I realized all I had to do was actually navigate to my application in the browser. Once I did this, the Million Lint VS Code extension started showing me performance info for the page I was viewing in my browser.