lost-pixel / lost-pixel

Bug description

Hi
I've tried to use Lost Pixel with custom React setup (webpack, babel, typescript, storybook) and it works perfectly well.
But when I tried to use it with Vite React Template, npm run lost-pixel gave me this error:
✅ Found config file: C:\work\user\lost-pixel\lostpixel.config.ts
❌ Loading config using ESBuild failed, using fallback option
❌ Failed to load config file: C:\work\user\lost-pixel\lostpixel.config.js

It is not clear from docs what configuration do I need to use Lost Pixel locally without CI features.

How to reproduce

Expected behavior

Lost Pixel information

No response

lost-pixel logs from CI

Loading project config ...
Current working directory: C:\work\user\lost-pixel
Looking for config file: C:\work\user\lost-pixel\lostpixel.config.(ts|js|cjs|mjs)
✅ Found config file: C:\work\user\lost-pixel\lostpixel.config.ts
❌ Loading config using ESBuild failed, using fallback option
❌ Failed to load config file: C:\work\ulbi\lost-pixel\lostpixel.config.ts

Hey! It's something I need to look into because we don't have many users on Vite currently and I can't immediately see what might be wrong. if you would use js version of the file would it fail with the same error?

Same error when using a .js extension unfortunately.

then we probably have some issues with Vite in general and will need to investigate. Any help & contribution is very much appreciated!

we are using bundle-require and most probably, it has issues either in Vite context or on Windows, not sure what exactly causes this:

lost-pixel/src/configHelper.ts

Lines 6 to 20 in 577ef49

    
           export const loadProjectConfigFile = async ( 
        
             configFilepath: string, 
        
           ): Promise<unknown> => { 
        
             const { mod } = await bundleRequire<{ 
        
               default?: unknown; 
        
               config?: unknown; 
        
             }>({ 
        
               filepath: configFilepath, 
        
               esbuildOptions: { 
        
                 logLevel: 'silent', 
        
               }, 
        
             }); 
        
             return mod?.default ?? mod?.config ?? mod; 
        
           };

most probably, it has issues either in Vite context or on Windows

A bit of info that might help: I've tried the above on macOS, with the same result.

...and the same with nextjs on mac

Versions:

nextjs: 13.4.12
lost-pixel: 3.4.1

Next.js is quite surprising :D do you have a repro which is an open repo @kspacja? also, I would be more than happy to guide somebody on this issue for a fix. Not sure what's going on here, so some investigation will still be required.

@d-ivashchuk It's a private repo and lostpixel config and lost-pixel-run.yml are the same beside this line:

pages: [{ name: "home", path: "/" }],

Maybe it would be helpful, I have change in configHelper.ts logLevel to error. And what I got

[ERROR] Invalid option in build() call: "watch"

I googled it and found this: https://stackoverflow.com/questions/75221520/invalid-option-in-build-call-watch and this egoist/bundle-require#35

trying to throw a quick reproduction for now. Thanks for the inputs & pointers 🙏🏼

Yeah, can confirm it is behaving in a really weird way:

https://github.com/lost-pixel/lp-next-reproduction/actions/runs/5853821591/job/15868582862

@kspacja if you want to give it a shot - go for it! this invalid option lead is promising indeed.

running it locally against the build version of lost-pixel should be as easy as from the folder of the project you want to test against to execute lost-pixel bin.ts:

➜  next-lost-pixel-latest git:(main) npx ts-node ../../lost-pixel/src/bin.ts 
Version: 3.4.1
Loading project config ...
Current working directory: /Users/d-ivashchuk/projects/lost-pixel-workspace/next-lost-pixel-latest
Looking for config file: /Users/d-ivashchuk/projects/lost-pixel-workspace/next-lost-pixel-latest/lostpixel.config.(ts|js|cjs|mjs)
✅ Found config file: /Users/d-ivashchuk/projects/lost-pixel-workspace/next-lost-pixel-latest/lostpixel.config.ts
❌ Loading config using ESBuild failed, using fallback option
❌ Failed to load config file: /Users/d-ivashchuk/projects/lost-pixel-workspace/next-lost-pixel-latest/lostpixel.config.ts

I don't know a lot about releasing npm packages, but I can see sth strange - in repo (in package.json) bundle-require has newest version - 4.0.1, but after installing - it has 3.1.2 (fix for this issue was release in 4.0.0 version egoist/bundle-require#36)

I just removed node-modules, updated esbuild & it works for me, will try to release a patch so you could test it out!

https://github.com/lost-pixel/lost-pixel/pull/286/files

I was getting totally different error than watch after wrapping the load in try catch & then putting the bundle-require level to error, and then purging node modules helped.

  "overrides": {
    "lost-pixel": {
      "bundle-require": "4.0.1",
      "esbuild": "0.18.13"
    }, 
    "bundle-require": {
      "esbuild": "0.18.13"
    }
  }

It's not ideal, but it loads config locally works, but of course had another step to do:

browserType.launch: Executable doesn't exist at /Users/krzysztofciach/Library/Caches/ms-playwright/chromium-1055/chrome-mac/Chromium.app/Contents/MacOS/Chromium

Unfortunately it does NOT work in github action

You mean the config is not loading on gh action or chromium is not there? I guess these are two separate problems at this stage but both related to dependencies :D

I know it's two diffrent problem :D To be clear - after overrides.

it loads config locally, but it requires next steps to launch properly (which I did and it works)
it doesn't load config in github action.

we will soon push the new version which should work as expected, will ping you here. in the meantime if you want to run lp on small project or it's OSS I would love to offer you some generous free usage of lost-pixel.com for the inconvenience with OSS version :D

Lost Pixel 3.4.3 (latest release) should have the fix for the issue @kspacja! thanks for the patience!

I would love to hear back if it worked for you or not 🙏🏼

Thanks for your support! Everything works great. I've setup CI as well. I don't need usage of lost-pixel.com for now. Looking forward for new features :D

@zgibex333 @luukdv I will close the issue for now, if it will not work properly for you - would be happy to jump in and figure it out!

	export const loadProjectConfigFile = async (
	configFilepath: string,
	): Promise<unknown> => {
	const { mod } = await bundleRequire<{
	default?: unknown;
	config?: unknown;
	}>({
	filepath: configFilepath,
	esbuildOptions: {
	logLevel: 'silent',
	},
	});

	return mod?.default ?? mod?.config ?? mod;
	};

Lost Pixel failes to load config with Vite React template

Bug description

How to reproduce

Expected behavior

Lost Pixel information

lost-pixel logs from CI