Remix App Server Template: `Error: couldn't find exported server build` & `WebSocket server error: Port is already in use`

[cliffordfajardo]

Describe the bug

After creating a fresh app using the Remix App Server template and running the following command inside the roof of my newly created remix app:

npx remix-kit@latest install

I get the following error:

Error: couldn't find exported server build from ../my-remix-app/build/index.js

Then after quitting the process and trying to restart I get this web socket error message:

ERROR  WebSocket server error: Port is already in use

Video Reproduction

1. Installed fresh remix app server template, ran npx remix-kit@latest install then remix-kit preview per the Status section on the readme which talkes about using remix-kit preview for remix apps that are using the Remix App Server

https://user-images.githubusercontent.com/6743796/210098110-8213f2a8-50aa-4add-b46a-6938a908d9e1.mp4

Console output w/errors

``` ERROR Cannot find module '/Users/cliffordfajardo/repos/remix_kit_repro1/remix-kit-playgrounds/my-remix-app/build/index.js' imported from /Users/cliffordfajardo/repos/remix_kit_repro1/remix-kit-playgrounds/my-remix-app/node_modules/@remix-kit/vite/dist/vite.cjs at new NodeError (node:internal/errors:393:5) at finalizeResolution (node:internal/modules/esm/resolve:323:11) at moduleResolve (node:internal/modules/esm/resolve:916:10) at defaultResolve (node:internal/modules/esm/resolve:1124:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:841:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ESMLoader.import (node:internal/modules/esm/loader:525:22) at importModuleDynamically (node:internal/modules/cjs/loader:1098:29) at importModuleDynamicallyWrapper (node:internal/vm/module:438:21) ```

2. Following the first instructions at the top of the README

> cd ./your-remix-app
> npx remix-kit@latest install
> npm run vite:dev

https://user-images.githubusercontent.com/6743796/210098562-733f649e-9686-45e0-8fad-6fffa12591f4.mp4

Steps to reproduce

1.Install a fresh remix app & choose Remix App Server

$ npx create-remix@latest
? Where would you like to create your app? ./my-remix-app
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's
easy to change deployment targets. Remix App Server

4. cd into the newly created remix app & setup and run remix-kit using the following commands

$ cd my-remix-app
$ npx remix-kit@latest install
$ npm run vite:dev
Remix 1.9.0                                     
React 18.2.0
> Local:       http://localhost:3005/ 
> Network:  http://192.168.1.65:3005/

# ----------- visit the URL http://localhost:3005/ 
Error: couldn't find exported server build from ../my-remix-app/build/index.js

5. Kill the process (ctrl + c), run npm run build
6. Attempt to restart server npm run vite:dev and you get the following error:

   WebSocket server error: Port is already in use

Recommendations

1. Ideally, when you kill the process that starts from npm run vite:dev, the websocket server should be terminated to avoid hitting this web socket error on subsequent attempts to restart the server

2. If we do encounter the WebSocket server error: Port is already in use it would be nice to get printed in the console the port that this web socket server is running on so we could kill it as well

3. In the readme, when looking at these instructions, there is no way to tell if this command is for apps using Remix App Template or apps that have their own `server.{js,mjs} files (express template)

   

   To avoid confusion, we could simply link to this below the Setup section:

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 194.47 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.volta/tools/image/node/18.12.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/18.12.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.1
  npmPackages:
    @remix-kit/react: ^0.2.1 => 0.2.1 
    @remix-kit/vite: ^0.2.1 => 0.2.1 
    @remix-run/dev: ^1.9.0 => 1.9.0 
    @remix-run/eslint-config: ^1.9.0 => 1.9.0 
    @remix-run/node: ^1.9.0 => 1.9.0 
    @remix-run/react: ^1.9.0 => 1.9.0 
    @remix-run/serve: ^1.9.0 => 1.9.0

Used Package Manager

npm

Validations

• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a RemixKit issue and not a Remix specific issue. For example, if it's a Remix related bug, it should likely be reported to remix instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[jrestall]

Thanks for the report Clifford! I can reproduce and will fix as a priority. That'll teach me for testing using jiti stubs.

[jrestall]

v0.2.2 released with a fix for the urgent "Error: couldn't find exported server build from ../my-remix-app/build/index.js".

The websocket error is a little trickier as it's caused by the dev server restarting due to the cleanup of /public/build folder. That should only happen once if previously used the remix build/dev command, so I'll fix it but will drop the bug severity.