fix(core): explicitly define CopyWebpackPlugin toType: 'dir'

[Thomascogez]

Note

Since it's my first PR here, I am not sure about the process.
And we be pleased to have some guidance.

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes Bug(core/build): Bracket in path make build command fail #8480, closes Build errors when --out-dir includes dot in path segment #8135) and the maintainers have approved on my working plan.

Motivation

I have a project where the convention is using bracket [] in folder name.
The actual version of docusaurus if failing at build stage when there is a folder with bracket in the name.

What I did

After some investigation, I found that the issue is coming from the copy-webpack-plugin.
It actually report the folder has a file.

Here the actual config

/packages/docusaurus/src/commands/build.ts line 199

    serverConfig = merge(serverConfig, {
      plugins: [
        new CopyWebpackPlugin({
          patterns: staticDirectories.map((dir) => ({from: dir, to: outDir})),
        }),
      ],
    });

Proposed change

Since outDir is of course always a dir we can set the toType option to dir to solve this issue, this actually solve the false report of the outdir has a file by copy-webpack-plugin

    serverConfig = merge(serverConfig, {
      plugins: [
        new CopyWebpackPlugin({
          patterns: staticDirectories.map((dir) => ({from: dir, to: outDir, toType: 'dir'})),
        }),
      ],
    });

Test Plan

I will need some guidance for this part as I am not sure how to test this change.

Test links

Bug reproduction: https://github.com/Thomascogez/docusaurus-bracket-in-path-bug-repro

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/

Related issues/PRs

#8480

[facebook-github-bot]

Hi @Thomascogez!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	344ceab
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/63a623b3b2642d000890b5c5
😎 Deploy Preview	https://deploy-preview-8481--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 85	🟢 97	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 76	🟢 100	🟢 100	🟢 100	🟢 90	Report

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[Josh-Cena]

Could you add a static directory in our own website with brackets in its path, and compare the build results on main vs. on this branch? (Maybe also test if this fixes #8135 by adding another static directory with dots?)

Also, could you illuminate me about why your fix works?

[Thomascogez]

After intense local testing, I was able to determine that the point of failure was during webpack build, more especially when copy-webpack-plugin is run. After doing some searching if found this issue webpack-contrib/copy-webpack-plugin#434 which is describing is similar bug.

copy-webpack-plugin has a logic to determine (if not explicitly set) the type of input (dir, file or glob).
My thought is that copy-webpack-plugin is wrongly reporting path containing [] or . as file.

After that some fs operation are run based on the determined type of input, in this case it's running fs operation targeting a file that why EISDIR error is popping

Hope it's clear 😅

[Josh-Cena]

Makes sense, thanks :) Could you add two test directories under website/_dogfooding?

[Thomascogez]

I tested locally to reproduce #8135 and it build successfully with this fix 👍.
Ok i'm on it !

[Thomascogez]

I misspoke in my first edit,
I had said:

Since the staticDirectories is an array of folder path, I propose to use the toType option set to dir to avoid false file detection.

but edited to:

Since outDir is of course always a dir we can set the toType option to dir to solve this issue, this actually solve the false report of the outdir has a file by copy-webpack-plugin

Should my tests be under _dogfooding since it's the outDir causing the issue ?

I'm still exploring the project and the folder structure of the tests

[Josh-Cena]

If the dots issue can't be reproduced with a subdirectory of outDir, we can just forgo the test, as long as you've tested it locally. What about square brackets?

[Thomascogez]

It's actually the outDir which is actually miss interpreted by copy-webpack-plugin (tooption) (sorry for misleading you with my first assumption).

So static subfolder with bracket or dots are actually building.

Here my tests:

Main branch

Bracket

Without --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/[bracket]'

yarn build

output:

[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/[bracket]/build'
[ERROR] Unable to build website for locale en.
[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/[bracket]/build'

With --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/[bracket]'

yarn build --out-dir "build/[bracket]"

output:

[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/[bracket]/build/[bracket]'
[ERROR] Unable to build website for locale en.
[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/[bracket]/build/[bracket]'

Dot

Without --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/6.0

yarn build

output:

[SUCCESS] Generated static files in "build".
[INFO] Use `npm run serve` command to test your build locally.

With --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/6.0

yarn build --out-dir "build/6.0" 

output:

[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/6.0/build/6.0'
[ERROR] Unable to build website for locale en.
[ERROR] Error: EISDIR: illegal operation on a directory, open '/Users/thomascogez--allix/Documents/dev/personnal/docusaurus-bracket-in-path-bug-repro/6.0/build/6.0'

Fix branch

Bracket

Without --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/[bracket]'

yarn build

output:

[SUCCESS] Generated static files in "build".
[INFO] Use `npm run serve` command to test your build locally.

With --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/[bracket]'

yarn build --out-dir "build/[bracket]"

output:

[SUCCESS] Generated static files in "build/[bracket]".
[INFO] Use `npm run serve` command to test your build locally.

Dot

Without --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/6.0

yarn build

output:

[SUCCESS] Generated static files in "build".
[INFO] Use `npm run serve` command to test your build locally.

With --out-dir arg

project path /docusaurus-bracket-in-path-bug-repro/6.0

yarn build --out-dir "build/6.0" 

output:

[SUCCESS] Generated static files in "build/6.0".
[INFO] Use `npm run serve` command to test your build locally.

[Josh-Cena]

Sounds fair :)

[Thomascogez]

Great ! Thanks for your time 👍

[slorber]

LGTM thanks ;)