Error with create-react-app: Failed to minify the code from firestore/src/validate.js:27

[mylbp2ps3]

Environment details

• OS: Windows 10 Pro
• Node.js version: 8.9.1
• npm version: 5.5.1
• @google-cloud/firestore version: ^0.10.1

I'm using create-react-app, and first added firebase hosting, and deployed it. No problem. Then I added firebase-admin, tried running yarn build, but it gives this error:

yarn build
yarn run v1.3.2
$ cross-env NODE_PATH=src:src/components:src/containers:src/utils react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/@google-cloud/firestore/src/validate.js:27

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried going into validate.js line 27, and changing it from:

function formatPlural(num, str) {
  return `${num} ${str}` + (num === 1 ? '' : 's');
}

to:

function formatPlural(num, str) {
  return "" + num + str;
}

which fixed the issue on that line, however it then couldn't minify line 48, and I wasn't able to find a fix for this line.

create-react-app says this about the error:

npm run build fails to minify

Some third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.

To resolve this:

1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.

• Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the module field in package.json. Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers.

2. Fork the package and publish a corrected version yourself.

3. If the dependency is small enough, copy it to your src/ folder and treat it as application code.

In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.

[schmidt-sebastian]

Thanks for reporting this. We are currently using some ES6 features that are compatible with Node 4. I will discuss with the rest of the team whether we can publish ES5-only versions.

[schmidt-sebastian]

@stephenplusplus - Do you mind weighing in on this?

[stephenplusplus]

Related issues:

• What should the story be for a client-side Javascript gcloud library? google-cloud-node#531
• Use with React-Native? "Unable to resolve module 'fs' google-cloud-node#2664

If the only thing stopping integration with our modules is that we use ES6 (I doubt this is the case, historically, users have run into many quirks), I think the user could probably find an ES6-to-5-ifier that could run during their compilation step.

More generally, we don't offer any direct support for our libraries outside of the conventional Node.js runtime environments. We would need a call from @alexander-fenster if we should reconsider.

[neokaiyuan]

Is anyone working on this? This is blocking anyone using create-react-app with Firestore.

@mylbp2ps3 did you ever find a fix?

[neokaiyuan]

Turns out the issue is contained with firebase-admin - switching from Firestore to Realtime Database (which does not require the firebase-admin package in Node.js) enables CRA to minify on build.

I am using Realtime Database for now but dissatisfied with this solution because Firestore is the future.

[schmidt-sebastian]

Is anyone working on this?

We are not currently working on this, but would appreciate more user feedback.

[neokaiyuan]

Thanks for the response @schmidt-sebastian! I hope this moves up the priority ladder soon!

[willhlaw]

@mylbp2ps3, @kaiyuanneo et al, I'm able to build without a problem using the same build command cross-env NODE_PATH=src:src/components:src/containers:src/utils react-scripts build.

OS: Mac High Sierra
Node.js version: 8.9.1
npm version: 5.5.1

npm list react-scripts firebase-admin
├── firebase-admin@5.8.2
└── react-scripts@1.1.0

What is your version of react-scripts? Have you been able to reproduce this error on a new CRA app? Also, I tend to have less issues when customizing CRA projects using yarn instead of npm, so you may want to try installing and running with yarn.

[mycob]

@mylbp2ps3 did you end up with a solution to this? We have the same exact problem. I know there are listed solutions provided above, but I'm not certain how to take any of those steps. #2 sounds plausible, but I don't even know where to begin with the @Google-Cloud module. I just would really like to get passed this validate.js file that's causing the build to fail.

@willhlaw I created a different CRA app and was able to build it without a problem. However, once I added the files that use the @Google-Cloud module under firestore, it fails.

This is my first time attemping to build a webapp that's dependent on so many modules and I'm pulling my hair out to get out of this one. I need the firestore dependency and going to the RealTime Database is not an option. I'd appreciate anyone's insight.

Thanks in advance.

├── firebase-admin@5.10.0
└── react-scripts@1.1.1

[paulobear]

I'm having exactly the same issue. I installed everything w/in the last month. I should say that everything that I'm writing is all ES6. The admin template I bought was ES5, but I converted the stuff that I use to ES6. I'm also using Babel, so maybe I should except firebase-admin?

Windows 10 Home
node: v8.9.4
"firebase-admin": "^5.12.0",
"react-scripts": "1.1.1",

[drumnation]

My site has been working fine for a few months and now all of a sudden I can't build it anymore.

Failed to minify the code from this file:
./node_modules/@google-cloud/firestore/src/validate.js:27

I'm also using ES6. Using the Fireadmin template .

Update: Searching around it has to do with the firebase-admin package via this thread.

I had added it to the fireadmin template to add some additional functionality that I ended up not using. I uninstalled the package and the build ran fine. This may not be an option for everyone, but at least you'll know where to start looking.

[schmidt-sebastian]

Closing this due to inactivity. Feel free to re-open should this still be an issue.