bug: stencil build causes copyfile error and creates extra directory in monorepo

[rramsey]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7.0 and higher

Current Behavior

When using npm stencil build inside a monorepo package, the build process creates extraneous directories and causes [ ERROR ] EBUSY: resource busy or locked, copyfile errors.

Expected Behavior

npm run build should not produce extraneous directories. It should not try to copy files outside of the repository.

System Info

      System: node 20.8.1
    Platform: windows (10.0.22000)
   CPU Model: 12th Gen Intel(R) Core(TM) i7-1265U (12 cpus)
    Compiler: c:\web\apps\bug-report\node_modules\@stencil\core\compiler\stencil.js
       Build: 1710170895
     Stencil: 4.12.6
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.29.1

Steps to Reproduce

Starting within development directory c:\web\apps at the command line:

1. mkdir bug-report

2. cd bug-report

3. npx lerna init - to create the monorepo

4. mkdir packages - because lerna doesn't create the directory for the individual repos

5. create a shared css file to be used by all repos in the monorepo

   1. mkdir testme\assets\css
   2. notepad testme\assets\css\shared.css - create a basic class and change the font color

6. cd packages

7. npm init stencil - select call the project 'one' and select the 'component' option

8. cd one

9. notepad src\components\my-component\my-component.tsx - edit the component to use the stylesheet you created above

10. change the style line to styleUrls: ['my-component.css', '../../../../../testme/assets/css/shared.css'],

11. add the class to the div

12. npm install - install all of the dependencies

13. npm run start - start your component to confirm that the css class is loaded and changes the color of the div as expected

14. close the browser

15. ctrl+c to kill the server so you are back at the command line

16. cd c:\web\apps\bug-report\packages - make sure you are in the package directory

17. dir - confirm that there is no folder called 'testme' in the packages folder

18. cd one

19. npm run build

20. dir ..\ - assuming the build did not give you an error, confirm that it created an extraneous testme folder under packages. This folder is not needed for distribution of the component and can be deleted.

21. The build may also create or attempt to create c:\web\apps\testme.

22. The build may also produce the copyfile error above.

Code Reproduction URL

https://github.com/rramsey/stencil-bug

Additional Information

The repo does have the bad packages\testme folder in it, which should be deleted before attempting to build just so you can see it come back.

[christian-bromann]

Thanks for raising the issue. I can confirm that a file was created in packages/testme/assets/css/shared.css which should not happen. I will ingest this into our backlog for the team to prioritize.

[rramsey]

I'm just glad this wasn't something stupid I did. BTW, in addition to packages/testme/assets/css/shared.css did it try to create c:\web\apps\testme and the subfolders in that location as well? I'm assuming you didn't see the:

[ ERROR ]  EBUSY: resource busy or locked, copyfile
           'c:\web\apps\bug-report\testme\assets\css\shared.css' ->
           'c:\web\apps\testme\assets\css\shared.css'

So maybe that is something I've done. Or maybe fixing the code that create/copies the files into the packages folder will fix this too.

[sijujacobs]

SOLUTION - Here are the steps I followed to resolve this build issue while running -> npm run build:

• Error : EBUSY: resource busy or locked, copyfile errors.

Prepare the Project: : Before installing additional dependencies, first build and run the default Stencil project.

• Run npm run build to build the project.
• Start the project with npm start to ensure it runs correctly.(it starts the default stencil project in browser)

Clean Up: Make sure to clean the project before installing any other dependencies

• Delete the node_modules, dist, and www directories to remove any cached or outdated files.

Add dependecies: Install new dependencies and other update other files

• Update index.ts with required import(If necessary)
• Update stencil.config.ts with "copy" block under "www" folder

Build and Run:

• Run npm install again (if necessary), followed by npm run build.
• This should result in a successful build and allow the project to start.