Problems caused by changing the theme of UI library in "Front-end BUG Record"

Recently, a project (call him the P project) has done a UI visual unification.

Previously, a small project used the default theme theme-d . This time, a set of theme-p theme was also released for this requirement.

Then there was an accident . After updating the theme, our dialog displayed abnormally .

Use the console to view styles

By looking at the styles, we found that they are all UI styles, and there is no style that we manually override.

But there is an anomaly here with four valid styles . Normally, there will be only one. But here I ignored this problem, I thought there were just redundant introductions, or there were no externals , peerDependencies resulting in multiple.

It seems that the style is in effect, but the effect is not right. I suspect that there is a problem with theme-p , but it is normal to display on the document site.

Then we can only find a way to check who introduced this wrong style .

controlled variable method

Because the styles are displayed in the page, there is no way to cut in from the file name, so here I first use the control variable method.

1. main.ts code is all commented out
2. main.ts Initial a new page, only the dialog is rendered in the page.
3. Check the effect, the dialog effect is the same as theme-p document site.
4. main.ts Let go of the original code.
5. Check the effect, the dialog effect is weird. At this time, it is judged that the problem lies in main.ts .

6. main.ts Comment out half and observe the effect.

   1. If the effect is abnormal, repeat step 6 and comment out half of it.
   2. When the effect is normal, restore half.
   3. Only keep only the next line of problematic code until the end
   4. Go to the file and repeat step 6.

7. Finally, the error code line can be located . Do you think the story is over? The weird thing here is that I've located several locations

   1. For the first time, I was located in the three-party dependency (not fully located, it is estimated that it was fooled by the cache)
   2. The second time I located it in import {dialog} from 'ui';
   3. Another colleague is located in our business component library (ui-p). This is also very important , but he intervened late in the positioning, otherwise our investigation speed could be faster .

It's not really helpful here to solve the problem. And our project dependencies are heavily nested, resulting in serious time-consuming.

Guess

After I positioned it twice, I knew that it was impossible to analyze the problem, and then I gave a few bold guesses.

1. There is no externals , so a new style is loaded, resulting in an abnormal style weight. The feature here is that there will be css code in the product
2. There is externals , so a new style is loaded, resulting in an abnormal style weight. The characteristics here are that there will be clear require()
3. somewhere import 'ul.css'
4. not imported on demand

When I gave a guess, I already had a hunch, because ui-p used the default theme, and did externals , and we made an asynchronous component, so the theme conflict.

In addition, another colleague analyzed it in ui-p , so the next step is to verify whether it is the problem of ui-p .

breakpoint debugging

Yes you heard that right, styles can also "breakpoint debugging".

1. We first added a line of code to ---000e6ad0eda7aae0e019f6a157c4eabd------20148b27fd48d1b679815da18c39b8f0 dialog.css in node_modules body{background: red} .
2. Then find the file where body{background: red} is located by Chrome-Devetools in search 690f58266b3102ac536d503d7081f69c---
3. Then debug the code with breakpoints
4. After that, you can see the stack information and find that there is ui-p in the stack.

control variable

Killed all ui-p components, and found that the dialog is also normal

Solve the problem of ui-p different from the main application theme

1. Upgrade ui-p to theme-p theme
2. restore p as theme-d theme
3. Removed ui-p
4. ui-p make namespace

There are problems with each scheme, we chose namespaces .

Did you think it was over here? No, I put the namespaced package into the project. return! Yes! Have! ask! question!

It's over, more than one ui-p , and then repeat the above operations.

But the result of this investigation is outrageous , showing that common.js is loaded. This leads me to suspect another location splitChunks Exception

Modify splitChunks policy

Because all is used, async and initial are merged. This use initial will actually be abnormally large, because it contains the code of async .

So we just need to change it to initial and recompile. ✿✿ヽ(°▽°)ノ✿ I succeeded , I really am the most beautiful boy.

At this time, the success conditions have become two. Then we need to see if it is just a problem of splitChunks . Fortunately, both of them must be completed before the problem can be solved (my time is not wasted 🐶)

Review

1. namespace is required
2. splitChunks should not be necessary, but the dialog is not in my async, so I am normal.
3. The method of investigation still needs to be further investigated. The above scheme is relatively inefficient

Is there any way to see where css is imported?

I have asked a few colleagues here, but none of them have done it, and I hope that the old iron who knows can leave a message.

1. Is it possible with webpack?
2. Is it possible for babel?
3. Is cli's --report ok?
4. Is it possible to debug with breakpoints in the console?
5. Is there some description of the code before compression?

6. externals , which is one location I can think of.

   1. The default will include the code in the product
   2. externals would become the require() statement.

externals troubleshooting

yarn build --target lib --name myLib --report

By adjusting the build target, the resources of the lib version were typed, and it was indeed found.

But after seeing it, I was confused because it was ui-p again. Here I am completely confused, because our project is monorepo , so I wonder if it is a dependency problem, but I still can't find the problem in the end.

Projects & Screenshots

I have posted the screenshot of my report in the group, if you are interested, you can take a look. For the project, the demo will not be provided for the time being.