Cannot compile the frontend files

Hi There,
I was trying to modify the Grafana frontend files, and after finishing that I tried to use “yarn --prod run build” to build the frontend static files. But while executing the command I met the following errors, and I have no ideas how to fix that…

Could you give your thoughts about this, thanks a lot!

You’re getting prettier errors (as it says on the tin). The function syntax doesn’t comply with what the Prettier formatter expects to see.

For context, there was a switch in behavior from Prettier 1.9 to Prettier 2: Prettier 1.9 would by default avoid parentheses for arrow functions with a single parameters (where they are not technically needed); Prettier 2 would by default enforce them. See Options · Prettier. The Grafana codebase was updated to comply with this change in this commit.

All in all, I think you’re getting these errors because you’re trying to use Prettier 1.x to format a version of the Grafana codebase that’s been formatted according to Prettier 2.x standards. Unless your package lock files are out of sync with the Grafana repo, you should be able to fix this by (a) cleaning your Node development environment, and (b) running

yarn install --pure-lockfile

before building.

That said, your build log says you’re building “Version 7.2.2”, and the Prettier 2 change was implemented in v7.4.0, so it’s possible that different parts of your local codebase have not been updated in sync with upstream, which may be a tougher nut to crack.

Thank you so much @svetb for your explanation!

Yes, I am currently checking out the Grafana’s v7.2.2 version to do the build. And also I found the version of “prettier” in “package.json” is "prettier": "1.19.1". I have already tried to modify some files to expect that prettier can follow my changes not to verify this error, but it could not work either…

Therefore, for my case, can I:

  1. manually change the version to “2.x.x” for Prettier in “package.json”?
  2. or should I upgrade the Grafana to the higher version (which I am not so willing to upgrade that…)
  3. what does the “cleaning your Node development environment”…? (I am sorry I am just pretty new to Frontend).

Thanks again!

By cleaning your environment I meant deleting the node_modules directory installed in your grafana dir (see node.js - NPM clean modules - Stack Overflow).

I don’t think this is the issue though. It looks like your codebase has been messed up somehow.

If you look at the backend_srv.ts file that’s triggering the first error, the version of the file that’s part of the Grafana v7.2.2 codebase (link) doesn’t actually contain the line of code that’s triggering the error you’re showing. Instead that file does comply with Prettier 1.x formatting and shouldn’t be throwing an error.

Instead, the version of backend_srv.ts that you’re compiling looks more like what’s in the post-v7.4.0 codebase (link). So it looks like you’ve inadvertently pulled at least some code from a newer version than what you think you have.

I’m not sure what modifications you’re applying to the codebase, but your best bet might be to start from a fresh v7.2.2 tree and re-apply.

Appreciate @svetb!

I just checked out the backend_srv.ts and yes it was indeed not matching the content of v7.2.2 where from Github…I am not quite sure what did I do for my project (I fetched the codebase by go get github.com/grafana/grafana and then git checkout v7.2.2).

I am going to directly download the sourcecode by downloading a .zip from Github and try again…please let me tell my modification to the app - I just want to let Grafana send the other header’s parameter for Ajax request; I am planning to deploy the Grafana in our Cloud Platform, but for the frontend Grafana currently cannot send the other parameters which I need, so that is what I am doing for the file backend_srv.ts.

Please just let me know if you have better ideas for my case, thanks! :slight_smile: