diff --git a/README.md b/README.md index a525d74..b37ab04 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1434 TILs and counting..._ +_1435 TILs and counting..._ --- @@ -634,6 +634,7 @@ _1434 TILs and counting..._ ### Next.js +- [Avoid Conflicting Files](nextjs/avoid-conflicting-files.md) - [Create Files And Directories For Dynamic Routes](nextjs/create-files-and-directories-for-dynamic-routes.md) - [Define URL Redirects In The Next Config](nextjs/define-url-redirects-in-the-next-config.md) - [Fetch Does Not Work In API Serverless Function](nextjs/fetch-does-not-work-in-api-serverless-function.md) diff --git a/nextjs/avoid-conflicting-files.md b/nextjs/avoid-conflicting-files.md new file mode 100644 index 0000000..c9a1c48 --- /dev/null +++ b/nextjs/avoid-conflicting-files.md @@ -0,0 +1,36 @@ +# Avoid Conflicting Files + +When Next.js is bundling and building your project, it will get completely +tripped up by any instance of conflicting project files. What I mean by +conflicting project files are two JavaScript or TypeScript (or flavors of JSX +files) that would resolve to the same thing. + +Here is one example where the extensions differ: + +``` +src/pages/welcome.tsx +src/pages/welcome.jsx +``` + +Here is another example where the paths differ but the bundled result would +conflict: + +``` +src/pages/welcome.tsx +src/pages/welcome/index.tsx +``` + +If you have any instances of these conflicting files, you'll be presented with +a beguiling and cryptic error message when trying to run the dev server. + +``` +TypeError [ERR_INVALID_ARG_TYPE]: The "to" argument must be of type string. Received undefined + at new NodeError (node:internal/errors:405:5) + at validateString (node:internal/validators:162:11) + at Object.relative (node:path:1191:5) + at Watchpack. (/my_app/node_modules/.pnpm/next@14.2.5_@babel+core@7.24.9_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:381:55) { + code: 'ERR_INVALID_ARG_TYPE' +} +``` + +One of those files needs to go. Remove one of them and you'll be good to go.