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

CleanWebpackPlugin not removing stale assets in dist folder #2319

Open
sacr3dc0w opened this issue Jan 27, 2023 · 5 comments
Open

CleanWebpackPlugin not removing stale assets in dist folder #2319

sacr3dc0w opened this issue Jan 27, 2023 · 5 comments

Comments

@sacr3dc0w
Copy link
Contributor

The code for our stores runs a lot of custom JavaScript and theme modifications. Since the 6.8.0 release (more specifically #2311), we were getting the TR-302 / 2500+ files, which meant pushing updates halted. We initially found a solution: delete assets/dist and node_modules, then reinstall and push the theme. I began to wonder why that was the solution, and if the assets/dist folder wasn't pruning stale files from between development and productions. Upon further investigation, I discovered the potential problem and have a possible solution.

Expected behavior

CleanWebpackPlugin removes files in the output.path directory and outputs new ones.

Actual behavior

New files are generated, but the old ones remain.

Steps to reproduce the behavior

Make sure Cornerstone is up-to-date (6.8.0)

Run stencil start, close that instance, then run stencil bundle.

User Notes / Suggested Solution

I believe this is due to the cleanOnceBeforeBuildPatterns setting:

cleanOnceBeforeBuildPatterns: ['assets/dist'],

Unless I'm misunderstanding, that setting doesn't appear to be necessary. From johnagan/clean-webpack-plugin#106

All files inside webpack's output.path directory will be removed, but the directory itself will not be.

Below is an output from assets/dist with the settings as they are currently after I run stencil start. Looks normal. Scroll below to see the list of when stencil bundle is run after killing the local instance.

BEFORE

  • report.html
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.head_async.js
  • theme-bundle.main.js
  • theme-bundle.polyfills.js

AFTER

  • report.html
  • theme-bundle.chunk.110.js
  • theme-bundle.chunk.110.js.map
  • theme-bundle.chunk.234.js
  • theme-bundle.chunk.234.js.map
  • theme-bundle.chunk.300.js
  • theme-bundle.chunk.300.js.map
  • theme-bundle.chunk.443.js
  • theme-bundle.chunk.443.js.map
  • theme-bundle.chunk.444.js
  • theme-bundle.chunk.444.js.map
  • theme-bundle.chunk.548.js
  • theme-bundle.chunk.548.js.map
  • theme-bundle.chunk.634.js
  • theme-bundle.chunk.634.js.map
  • theme-bundle.chunk.647.js
  • theme-bundle.chunk.647.js.LICENSE.txt
  • theme-bundle.chunk.647.js.map
  • theme-bundle.chunk.651.js
  • theme-bundle.chunk.651.js.map
  • theme-bundle.chunk.743.js
  • theme-bundle.chunk.743.js.LICENSE.txt
  • theme-bundle.chunk.743.js.map
  • theme-bundle.chunk.802.js
  • theme-bundle.chunk.802.js.map
  • theme-bundle.chunk.847.js
  • theme-bundle.chunk.847.js.map
  • theme-bundle.chunk.966.js
  • theme-bundle.chunk.966.js.LICENSE.txt
  • theme-bundle.chunk.966.js.map
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.font.js.map
  • theme-bundle.head_async.js
  • theme-bundle.head_async.js.map
  • theme-bundle.main.js
  • theme-bundle.main.js.LICENSE.txt
  • theme-bundle.main.js.map
  • theme-bundle.polyfills.js
  • theme-bundle.polyfills.js.LICENSE.txt
  • theme-bundle.polyfills.js.map

Now if we remove line 61 entirely, stale files are removed.

cleanOnceBeforeBuildPatterns: ['assets/dist'],

BEFORE

  • report.html
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.head_async.js
  • theme-bundle.main.js
  • theme-bundle.polyfills.js

AFTER

  • report.html
  • theme-bundle.chunk.110.js
  • theme-bundle.chunk.110.js.map
  • theme-bundle.chunk.234.js
  • theme-bundle.chunk.234.js.map
  • theme-bundle.chunk.300.js
  • theme-bundle.chunk.300.js.map
  • theme-bundle.chunk.443.js
  • theme-bundle.chunk.443.js.map
  • theme-bundle.chunk.444.js
  • theme-bundle.chunk.444.js.map
  • theme-bundle.chunk.548.js
  • theme-bundle.chunk.548.js.map
  • theme-bundle.chunk.634.js
  • theme-bundle.chunk.634.js.map
  • theme-bundle.chunk.647.js
  • theme-bundle.chunk.647.js.LICENSE.txt
  • theme-bundle.chunk.647.js.map
  • theme-bundle.chunk.651.js
  • theme-bundle.chunk.651.js.map
  • theme-bundle.chunk.743.js
  • theme-bundle.chunk.743.js.LICENSE.txt
  • theme-bundle.chunk.743.js.map
  • theme-bundle.chunk.802.js
  • theme-bundle.chunk.802.js.map
  • theme-bundle.chunk.847.js
  • theme-bundle.chunk.847.js.map
  • theme-bundle.chunk.966.js
  • theme-bundle.chunk.966.js.LICENSE.txt
  • theme-bundle.chunk.966.js.map
  • theme-bundle.font.js
  • theme-bundle.font.js.map
  • theme-bundle.head_async.js
  • theme-bundle.head_async.js.map
  • theme-bundle.main.js
  • theme-bundle.main.js.LICENSE.txt
  • theme-bundle.main.js.map
  • theme-bundle.polyfills.js
  • theme-bundle.polyfills.js.LICENSE.txt
  • theme-bundle.polyfills.js.map
@sacr3dc0w sacr3dc0w changed the title CleanWebpackPlugin not removing assets from dist folder, leading to TR-302 errors when pushing theme CleanWebpackPlugin not refreshing assets in dist folder, leading to TR-302 errors when pushing theme Jan 30, 2023
@sacr3dc0w sacr3dc0w changed the title CleanWebpackPlugin not refreshing assets in dist folder, leading to TR-302 errors when pushing theme CleanWebpackPlugin not removing stale assets in dist folder Jan 30, 2023
@BC-krasnoshapka
Copy link
Contributor

hi @sacr3dc0w , thanks. are you going to create PR for this?
cc @jairo-bc

@dadameck
Copy link

dadameck commented Feb 6, 2023

After making changes to our .js files, we noticed the changes were not being reflected in localhost or being pushed to our live site. We removed line 61 from webpack.common.js, and this did not fix the issue even n after a stencil bundle. Is there anything else we need to do to resolve this?

@PSCPeter
Copy link

PSCPeter commented Feb 7, 2023

Steps on what to do after deleting line 61 would be much appreciated! Simply deleting the line isn't allowing for changes to js files to appear in local.

@PSCPeter
Copy link

PSCPeter commented Feb 7, 2023

Upon further inspection and testing we discovered the following. We removed cleanOnceBeforeBuildPatterns: ['assets/dist'], and then removed our node_modules and dist folders. Upon runing npm install with this line now removed, when you stencil start, dist is not automatically created, after running stencil bundle dist is created. In order for js file changes to reflect you need to run stencil bundle again to see your changes and then start back up localhost. The root of the problem seems to be that Webpack Bundle Analyzer does not trigger on stencil start or on saving of a js file, so dist never gets updated causing the js to reflect as well. Is there going to be a further fix than just removing that line to get the functionality back similar to 6.7.0? Starting and stopping localhost to bundle is not ideal.

@BC-krasnoshapka
Copy link
Contributor

We can consider removing clean-webpack-plugin and use output.clean = true
johnagan/clean-webpack-plugin#197

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants