webpack-cli [Error: EROFS: read-only file system, mkdir '/resource']

Question

I want to copy the static file in webpack 5.x, so I install the webpack copy plugin "copy-webpack-plugin": "^10.2.1", and added config like this:

new CopyPlugin({
      patterns: [
        { from: "src/manifest.json", to: "manifest.json" },
        { from: "src/resource/image", to: "/resource/image" },
      ],
    }),

what I am trying to do is copy the image folder from source folder to dist folder and keep the folder structure. But when I run the webpack command and shows error like this:

➜  reddwaf-translate-plugin git:(main) ✗ npm run dev

> [email protected] dev
> rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js

[webpack-cli] [Error: EROFS: read-only file system, mkdir '/resource'] {
  errno: -30,
  code: 'EROFS',
  syscall: 'mkdir',
  path: '/resource'
}

I am sure the filesystem is not read only because I have created files and folder. why did this happen? what should I do to fix it? The current operation system is macOS Monteney with M1 pro chip.

Answer 1

I finally figure out what was happen, I config the folder start with a slash means that will create a folder resource in the root of macOS filesystem. That why the error happen, just remove the root slash will fix this problem.

new CopyPlugin({
      patterns: [
        { from: "src/manifest.json", to: "manifest.json" },
        { from: "src/resource/image", to: "resource/image" },
      ],
    }),

it will create the folder structure in the dist folder.