Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: npm run build duplicates asset/resource #751

Open
1 of 3 tasks
6nv opened this issue Feb 16, 2024 · 1 comment
Open
1 of 3 tasks

Bug: npm run build duplicates asset/resource #751

6nv opened this issue Feb 16, 2024 · 1 comment
Labels
type/bug Something isn't working

Comments

@6nv
Copy link
Contributor

6nv commented Feb 16, 2024

Which package(s) does this bug affect?

  • Create Plugin
  • Sign Plugin
  • Plugin E2E

Package versions

4.0.1

What happened?

When building the plugin in dev or build mode, any *.svg (or likely other assets) will be duplicated in the dist/ directory - one set with "regular" or plain-text names, and another set with hashed names.

Screenshot 2024-02-16 at 2 58 09 PM

This behavior is because of webpack.config.ts's CopyWebpackPlugin function. I commented out a few of the // Optional lines. Look at the diff of my webpack.config.ts file to see how I fixed the problem:

nicfv/Psychart@v4.0.6...v4.1.0#diff-735a1fddcd9112f2185fca9468f67db2ddb9a24c07186299c005dacefd18e5f5L152

HOWEVER, whenever you run npx @grafana/create-plugin update it reverts the contents of webpack.config.ts so this is not a great solution in the long run.

FURTHERMORE, commenting out those 2 optional lines isn't enough, because then in npm run build it hashes the names for all svg files, including logo.svg. This is a problem because package.json references the logo in plain text. So, to solve this, I had to add another line in the copy function to cherry-pick the file called img/logo.svg.

What you expected to happen

The dist/ directory should only contain the plain-text file names on npm run dev and hashed file names on npm run build. Neither script should create file duplicates in dist/

This is my build output after making the changes to webpack.config.ts and running npm run build. I manually copy over logo.svg, because I needed that one to be called logo.svg (not the hashed value) because the logo is referenced in package.json

Screenshot 2024-02-16 at 2 45 32 PM

Here is the contents of that same directory after running npm run dev (it nests the files under img/img, and I'm not sure why, but it still works. As you can see, logo.svg exists twice again, because of my cherry-pick):

Screenshot 2024-02-16 at 3 02 02 PM

How to reproduce it (as minimally and precisely as possible)

  1. Create a plugin
  2. Add files to src/img/*.svg
  3. npm install
  4. npm run build
  5. Observe the dist/ directory

Environment

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 991.56 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 121.1.62.165
    Chrome: 105.0.5195.102
    Firefox: 122.0
    Safari: 17.2.1

Additional context

No response

@tolzhabayev tolzhabayev added the type/bug Something isn't working label Feb 28, 2024
@tolzhabayev
Copy link
Collaborator

@6nv thanks for reporting this issue and it can be indeed reproduced, we do not see this as something that we want to fix with a high priority right now as those cases are quite rare and even then it does not really breaks anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/bug Something isn't working
Projects
Status: 💡 Ideation
Development

No branches or pull requests

2 participants