yarn build error with EISDIR (Build failed because of webpack errors)

[tilto0822]

Hello, I create next js project with typescript template. and install styled-components with edit babelrc.
then, install my favorite modules.

I using yarn berry with stable version. I runned yarn build but not working with following error.

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
info  - Linting and checking validity of types  
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from D:\GitProjects\web-main\.babelrc
info  - Creating an optimized production build
Failed to compile.

Error: EISDIR: illegal operation on a directory, readlink 'D:\GitProjects\web-main\pages\_app.tsx'


> Build failed because of webpack errors

How can I fix this error? Please help me.

package.json

{
  "name": "web-main",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.0.3",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-is": "^18.2.0",
    "recoil": "^0.7.4",
    "styled-components": "^5.3.5",
    "styled-reset": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.18.9",
    "@next/eslint-plugin-next": "^12.2.2",
    "@types/babel__core": "^7.1.19",
    "@types/eslint": "^8.4.5",
    "@types/node": "18.0.6",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "@types/styled-components": "^5.1.25",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "babel-plugin-styled-components": "^2.0.7",
    "eslint": "^8.20.0",
    "eslint-config-next": "12.2.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.7.1",
    "typescript": "4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "packageManager": "yarn@3.2.1"
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

.babelrc

{
  "presets": ["next/babel", "@babel/preset-typescript"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

project structure

.vscode (custom setting)
.yarn (yarn berry folder)
pages
└ _app.tsx
└ _document.tsx
└ index.tsx
public
└ favicon.ico
└ vercel.svg
src
└ styles
   └ globalStyle.ts
.babelrc
.editorconfig
.eslintrc.json
.gitignore
.pnp.cjs
.pnp.loader.cjs
.prettierrc
.yarnrc.yml
.next-env.d.ts
.next.config.js
package.json
tsconfig.json
yarn.lock

[InTEGr8or]

This might be because you're in your d:, as terrible of an answer as that sounds.

I had the same problem with npx next build on my project and several projects in the Next.js examples/, so it's not any of the config files in the project folder.

Then I found this horrible but working, solution: https://stackoverflow.com/a/72594016/927008

[InTEGr8or]

This could be related to the FileSystem type expected by Next.js, which seems to use symlinks.

From the above linked SO article:

This problem may be related to whether the symbolic link can be created or not. I also encountered the same problem but solved it by changing the filesystem from exFAT to NTFS. As you know exFAT can't create symlink.

[alec330]

Thanks for replying. I am pretty new to software development, and I have looked at many solutions and none of them works. is it possible that you can guide me more or we can hop on discord for a quick look if possible? Many too much to ask would be greatly appreciated if so

[InTEGr8or]

Sure, but you're in Korea, and our time slots might be asynchronous. It is often very good for a new tech person to learn how to describe their problem specifically, just from what they are seeing, so it might be best for you to spell it out, maybe here or in a new thread in a more appropriate forum or channel.

[alec330]

I am actually in the states east coast, may I DM you and describe the details of my projects to you more specifically?

[alec330]

I think I messaged you on linkedin, please let me know if I got the right one! Thank you!