Deployment on Vercel

[dmi3y]

Hi, I'm trying to deploy storefront-remix-starter on Vercel and unable to do so.

Here is the error I'm getting

Error: Error loading Remix config at /vercel/path0/remix.config.js
--
09:05:25.419 | Error: Cannot find module '@remix-run/dev/dist/config/routes'
09:05:25.419 | Require stack:
09:05:25.420 | - /vercel/path0/node_modules/@remix-run/v1-route-convention/dist/index.js
09:05:25.420 | at Object.readConfig (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/config.js:69:13)
09:05:25.420 | at async Object.build (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/cli/commands.js:140:18)
09:05:25.420 | at async Object.run (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/cli/run.js:201:7)
09:05:25.440 | error Command failed with exit code 1.
09:05:25.440 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
09:05:25.461 | Error: Command "yarn run build" exited with 1

I have customized remix.config.js as follows:

import { createRoutesFromFolders } from '@remix-run/v1-route-convention';

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const bareConfig = {
  serverDependenciesToBundle: [
    'remix-i18next',
    '@remix-validated-form/with-zod',
  ],
  tailwind: true,
  routes(defineRoutes) {
    // uses the v1 convention, works in v1.15+ and v2
    return createRoutesFromFolders(defineRoutes);
  },
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const commonConfig = {
  appDirectory: 'app',
  serverModuleFormat: 'esm',
  ...bareConfig,
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const cloudflarePagesConfig = {
  serverBuildPath: 'functions/[[path]].js',
  serverPlatform: 'neutral',
  server: './server-cloudflare-pages.js',
  ignoredRouteFiles: ['**/.*'],
  serverMinify: true,
  ...commonConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const vercelConfig = {
  ignoredRouteFiles: ['**/.*'],
  ...bareConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const netlifyConfig = {
  serverBuildTarget: 'netlify',
  server: './server-netlify.js',
  ignoredRouteFiles: ['**/.*'],
  ...commonConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const devConfig = {
  appDirectory: 'app',
  serverModuleFormat: 'cjs',
  devServerPort: 8002,
  ignoredRouteFiles: ['.*'],
  ...commonConfig,
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const buildConfig = {
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  publicPath: '/build/',
  serverBuildDirectory: 'build',
  ignoredRouteFiles: ['.*'],
  ...commonConfig,
};

function selectConfig() {
  const ENV = process.env?.NODE_ENV || process.env?.VERCEL_ENV;
  if (!['preview', 'development', 'production'].includes(ENV))
    throw new Error(`Unknown ENV: ${ENV}`);
  if (process.env.CF_PAGES) return cloudflarePagesConfig;
  if (process.env.NETLIFY) return netlifyConfig;
  if (process.env.VERCEL) return vercelConfig;
  if (ENV === 'development') return devConfig;
  if (!process.env.CF_PAGES && !process.env.NETLIFY) return buildConfig;
  throw new Error(`Cannot select config`);
}

export default selectConfig();

The not found module is from this import:
import { createRoutesFromFolders } from '@remix-run/v1-route-convention';

It seems like more of Remix/Vercel issue than the starter, do not have enough experience with Remix to tell more.

Here is the repo code: https://github.com/dmi3y/storefront-remix-starter
And Vercel deploy: https://vercel.com/dmi3ii/storefront-remix-starter/5cZLctcchyQrhrpMFMq6X8RqmsUk#L58

[dmi3y]

Also was able to deploy older revision here, from this branch older-version-deploy

[michaelbromley]

Hi,

I've no experience trying to deploy this to Vercel, but based on your successful deployment, does anything need to change in this repo to make the experience better? Or is there some docs we can add to the readme?

[kyunal]

Thanks for bringing this up, I have never tried to deploy on Vercel. I will see if I can reproduce this

[dmi3y]

Hi,

I've no experience trying to deploy this to Vercel, but based on your successful deployment, does anything need to change in this repo to make the experience better? Or is there some docs we can add to the readme?

I figured out what was a problem, that was me 😄 I was overriding my config file with origin, going to PR proposal for it 👍

In the nutshell this is minor config tweak, I do not think there some Readme instructions or anything like this needed. But I'll doublecheck.

[dmi3y]

Oh, actually giving it a second look I figured that the problem for me occurs due to:

import { createRoutesFromFolders } from '@remix-run/v1-route-convention';

Which I had commented out for my needs, but it still present issues if I uncomment it.

Trying to reproduce it with the latest codebase and it is giving different errors now. Will spend a bit debugging.

[dmi3y]

I figured out how to deploy, but not sure if this is an optimal way. Here is draft PR #75

PS: And here is the weird thing with this latest deploy which I just noticed:

• You visit home screen and try navigate to some section e.g. electronics and browser starts to spin, like it doing prefetch or something, but clicking on the link will not navigate over.
• If I right-click and open in new tab, it opens electronics section and from there, it seems, navigation works just fine, except that some text is not translated with i18n

Not sure if that's a Vercel related though, as I am seeing the same behavior locally.

PSPS: figured out the issue, it was use of process.env in app/utils/platform-adapter.ts, see PR for details.

I think at this point it works fine on Vercel, I might need to note it in README though. Also one outstanding issue, it is not building on Netlify preview, but it seems to be recurring behavior on other PRs as well.

[dmi3y]

On the side note though, I built tracking page for own use. Would you be interested if I port it into this starter kit?