3 months ago, there was an idea to restructure the current backstage. Vue 3 has been officially released for a long time, so it’s time to refactor to Vue 3. However, after trying many UI libraries at that time, I could not find a good library. None of the libraries support TSX well. So I gave up after changing the UI library many times.

Now, three months later, I come across a new library, Naive UI. At first, I feel that there is nothing special about this library, which is basically the same as ANTD in UI, but with a different color. Then I look at the code, and it’s all in TypeScript. So I had the idea of giving it a try. After some demo, I decided to pick up the project from three months ago and reconstitute naive- UI.

CommonJS problems in PROD

It was pretty smooth going at first, and I quickly refactored the table component that I had written in Element-UI that I couldn’t see. But then there was a problem in the PROD environment after build. Dev and PROd are inconsistent. Prod development has been blank, but there are no errors or warnings on the console. It made me panic. Is it going to fail again? Later, it was found that there might be something wrong with the router guard. After the guard was commented out, there was an error. But I still don’t know what the problem is because there is no Sourcemap.

I built a minimal recurrence project after solving the problem, would you like to see what caused it? reproduction

This is a CommonJS module imported like this.

import * as camelcaseKeys from 'camelcase-keys'
Copy the code

This is no problem in the development environment. The production environment is reporting an error. The problem with router Guard is that the request is authenticated in router Guard, and then the Response does a camelCase processing using the library. Surprisingly, no errors were reported, but the Router Guard kept doing an endless loop.

The code of router Guard is as follows. The request library uses UMi-Request, and the authentication interface uses Github API instead:


router.beforeEach(async (to) => {
  if (to.meta.isPublic) {
    return
  } else {
    // Send a request here, usually used for authentication. Since it is a replay, the interface request is arbitrarily used
    const res = await RESTManager.api.users.octocat.repos.get()
    console.log(res)

    if(! res) {return '/login'}}})// ...
//RESTManager.instance.interceptors.response.use(async (response, option) => {
// const newRes = await response.clone().json()

// return camelcaseKeys(newRes)
/ /})
Copy the code

Normally, the RES will output the response body and then reach the destination route, but the output response body is empty and then jumps /login and repeats. CamelcaseKeys is not a function. That’s weird.

Error: Rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS rollup-plugin-commonJS

I was like, what is this? What library is this? Then I thought, no way vite V2 can’t handle CommonJS, so I upgraded the Vite version (since it was 3 months old), but it still didn’t work. Finally, I created a new demo with create-viet-app and tried the same code (the minimal version). It was OK. There must be something wrong with my configuration. Vite. Config must be fine. There are only a few lines. When comparing tsconfig.config.json, one line was missing: “esModuleInterop”: true, which, who would have thought, would be most overlooked. Everything is better with the addition. Then I went to see the official template 3 months ago, sure enough, there was no such line. Ah, so it was the authorities who screwed me.

The happy journey of naive- UI

Naive – UI is still very comfortable to write, there is no red line on TSX and no problem with type prompt. The most important thing is to meet any bug and the author docking, in-depth discussion. And a couple of pr’s along the way. Compared to the previous element-UI, it’s really one in the sky and one in the ground. Of course, the library is still in its infancy, and it still needs a lot of community contributions. TSX is really comfortable to write, except that vue has some limitations and can’t pass any props, but it’s more comfortable to write than React FC.

Build memory overflow problem. Procedure

Finally, five days of refactoring was done, and it was time to go into production. However, after a commit, the Github CI failed due to build out of memory.

This time a large number of different icon libraries were imported into a component. There are 5 icon libraries, and the tool name import method will import the entire module, in the build environment tree shake. So after five libraries were imported, out of memory appeared. (An icon library is probably dozens of m-100m, which is still huge).

The solution is to overwrite the default export altogether. The following

Github CI no longer runs out of memory, and automated deployment is complete.

If you encounter a node that consumes too much memory in your build or production environment, you should first check to see if some libraries are fully imported.

Project address: github.com/mx-space/ad…

Let’s get some pictures at the end.