"404 page not found" with Typescript, NextJS, Now CLI

Hi,

The problem: When running “npx now dev --verbose”, instead of getting served the page in <root project dir>/pages/index.tsx, I get a plain text “404 page not found”. However, if I run “npx next dev”, my UI is served correctly from Next’s CLI.

I’m currently running a local nextJS project using typescript. My pages are typescript file (.tsx) extension.

running: “next”: “^9.1.1”, “now”: “^16.3.1”,

OS: MacOS Mojave Node Version: v11.14.0 NPM version: 6.9.0

project structure:

now.json

{
	"version": 2,
	"alias": "my-alias",
	"name": "admin-portal",
	"builds": [
		{ 
			"src": "next.config.js", 
			"use": "@now/next" 
		}
	],
	"build": {
		"env": {
			"NPM_TOKEN": "@npm_token",
			"API_URL": "@api_url",
			"IS_NOW": "true"
		}
	}
}

next.config.js

I had to add the removal of the css minimisation hack to prevent a few errors when implementing server-side rendering of the needed css class names (if memory serves me correct, been a few weeks since I looked at that piece of code)

require('dotenv').config()

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withCSS = require('@zeit/next-css')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withGraphql = require('next-plugin-graphql')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')
// eslint-disable-next-line @typescript-eslint/no-var-requires
const Dotenv = require('dotenv-webpack')
// eslint-disable-next-line 
function HACK_removeMinimizeOptionFromCssLoaders(config) {
	console.warn(
		'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
	)
	config.module.rules.forEach(rule => {
		if (Array.isArray(rule.use)) {
			rule.use.forEach(u => {
				if (u.loader === 'css-loader' && u.options) {
					delete u.options.minimize
				}
			})
		}
	})
}

module.exports = withGraphql(withCSS({
	webpack: config => {

		HACK_removeMinimizeOptionFromCssLoaders(config)
		config.plugins = config.plugins || []

		config.plugins = [
			...config.plugins,

			// Read the .env file
			new Dotenv({
				path: path.join(__dirname, '.env'),
				systemvars: true
			})
		]

		return config
	}
}))

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "pretty": true,
    "skipLibCheck": true,
    "declaration": false,
    "sourceMap": true,
	"strict": true,
	"alwaysStrict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "@/storybook/*": [
        "./.storybook/*"
      ],
      "@/components/*": [
        "./src/components/*"
      ],
      "@/lib/*": [
        "./src/lib/*"
      ],
      "@/pages/*": [
        "./pages/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2017"
    ],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

.babelrc.js

const isProd = String(process.env.NODE_ENV) === 'production'
const isTest = String(process.env.NODE_ENV) === 'test'
module.exports = {
  presets: [
      'next/babel',
  ],
  plugins: [
    ["module-resolver", {
		"root": ["./"],
		"alias": {
			"@/storybook": "./.storybook",
			"@/components": "./src/components",
			"@/lib": "./src/lib",
			"@/pages": "./pages"
		}
	}],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    [
      'babel-plugin-emotion',
      {
        hoist: isProd,
        sourceMap: !isProd,
        autoLabel: !isProd,
        labelFormat: '[filename]--[local]',
      },
    ],
    'react-loadable/babel',
    isTest ? 'babel-plugin-import-node' : null,
  ].filter(Boolean),
}

log output

(base) user:admin user$ npm start

> project-name@1.0.0 start /Users/user/Documents/Development/_clients/admin
> npx now dev --debug

> [debug] [2019-10-11T12:33:02.227Z] Found config in file /Users/user/Documents/Development/_clients/admin/now.json
> [debug] [2019-10-11T12:33:02.272Z] Using Now CLI 16.3.1
> [debug] [2019-10-11T12:33:02.275Z] user supplied known subcommand
> Now CLI 16.3.1 dev (beta) — https://zeit.co/feedback/dev
> [debug] [2019-10-11T12:33:02.994Z] The yarn executable is already cached, not re-downloading
> [debug] [2019-10-11T12:33:02.998Z] Reading `package.json` file
> [debug] [2019-10-11T12:33:02.999Z] Reading `now.json` file
> [debug] [2019-10-11T12:33:03.003Z] Using local env: /Users/user/Documents/Development/_clients/admin/.env
> [debug] [2019-10-11T12:33:03.008Z] Using local env: /Users/user/Documents/Development/_clients/admin/.env.build
> [debug] [2019-10-11T12:33:03.013Z] Locating files /Users/user/Documents/Development/_clients/admin
> [debug] [2019-10-11T12:33:03.015Z] Ignoring /Users/user/Documents/Development/_clients/admin/.DS_Store
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.dockerignore
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.env
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.env.build
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.env.example
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.git
> [debug] [2019-10-11T12:33:03.018Z] Ignoring /Users/user/Documents/Development/_clients/admin/.gitignore
> [debug] [2019-10-11T12:33:03.022Z] Ignoring /Users/user/Documents/Development/_clients/admin/.next
> [debug] [2019-10-11T12:33:03.024Z] Ignoring /Users/user/Documents/Development/_clients/admin/node_modules
> [debug] [2019-10-11T12:33:03.024Z] Ignoring /Users/user/Documents/Development/_clients/admin/package-lock.json
> [debug] [2019-10-11T12:33:03.025Z] Ignoring /Users/user/Documents/Development/_clients/admin/__mocks__/.DS_Store
> [debug] [2019-10-11T12:33:03.026Z] Ignoring /Users/user/Documents/Development/_clients/admin/coverage/.DS_Store
> [debug] [2019-10-11T12:33:03.026Z] Ignoring /Users/user/Documents/Development/_clients/admin/pages/.DS_Store
> [debug] [2019-10-11T12:33:03.027Z] Ignoring /Users/user/Documents/Development/_clients/admin/public/.DS_Store
> [debug] [2019-10-11T12:33:03.031Z] Ignoring /Users/user/Documents/Development/_clients/admin/src/components/.DS_Store
> [debug] [2019-10-11T12:33:03.053Z] Locating files /Users/user/Documents/Development/_clients/admin: 38.828ms
> [debug] [2019-10-11T12:33:03.105Z] No builders need to be installed
> [debug] [2019-10-11T12:33:03.349Z] Adding build match for "next.config.js"
> Creating initial build
> Building @now/next:next.config.js
> [debug] [2019-10-11T12:33:03.354Z] Using `@now/next@1.0.3`
> [debug] [2019-10-11T12:33:03.354Z] Creating build process for next.config.js
[@now/next] Downloading user files...
missing `engines` in `package.json`, using default range: 8.10.x
[@now/next] Installing dependencies...
Skipping dependency installation because dev mode is enabled
HACK: Removing `minimize` option from `css-loader` entries in Webpack config
HACK: Removing `minimize` option from `css-loader` entries in Webpack config
> [debug] [2019-10-11T12:33:12.747Z] No builders were updated
> Using external babel configuration
> Location: "/Users/user/Documents/Development/_clients/admin/.babelrc.js"
[ info ]  bundled successfully, waiting for typecheck results ...
[ ready ] compiled successfully
[ wait ]  compiling ...
[@now/next] Development server for next.config.js running at http://localhost:5000
> Built @now/next:next.config.js [56s]
> Success! Build completed
> Ready! Available at http://localhost:3000
[ info ]  bundled successfully, waiting for typecheck results ...
[ ready ] compiled successfully
> GET /
> [debug] [2019-10-11T12:34:12.417Z] Using cached `now.json` config
> [debug] [2019-10-11T12:34:12.508Z] Checking build result's 15 `routes` to match /
> [debug] [2019-10-11T12:34:12.509Z] Found matching route http://localhost:5000/ for /
> [debug] [2019-10-11T12:34:12.513Z] ProxyPass: http://localhost:5000/

[danielblignaut]

I’ve found that if I follow the ProxyPass url above ( http://localhost:5000/ ), I can my application then loads

[dcastil]

I have the same issue. ~~I created a reproducible example here: https://github.com/dcastil/vercel-dev-bug-test~~ (example repo deleted)

How to reproduce:

1. Clone the repo
2. Run yarn
3. Run yarn vercel and connect to your vercel account
4. Run yarn vercel dev
5. Navigate to localhost:3000

I would expect the default start page of create-react-app to be shown, but I see Vercel’s 404 page instead. As @adamJLev wrote, when I remove { "src": "/(.*)", "status": 404, "dest": "/404.html" } from vercel.json, it works again.

I’m using Node v10.13.0 on Mac OS 10.15.5.