Importing prettier as a dependency breaks compilation

Please note

I am well aware that having Prettier as an imported dependency is an unusual use case and I am still confident that it is what I want. What I am working on requires formatting code that the end user has entered. I’m not saying this to be snarky, I just know it’s the first question I’d have 😃

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes, I have created a new CRA project, installed prettier as the only extra dependency and upgraded yarn before installing.

Which terms did you search for in User Guide?

“compile”, “failed to compile”, “module parse failed”, “loader”

Environment

1. node -v: v8.4.0
2. npm -v: v5.6.0
3. yarn --version (if you use Yarn): 1.3.2
4. npm ls react-scripts (if you haven’t ejected):

prettier-test@0.0.1 └── react-scripts@1.1.0

Operating system: macos Sierra 10.12.6

Steps to Reproduce

You can reproduce the issue by doing the following:

1. npx creat-react-app CRA-prettier-test.git && cd CRA-prettier-test
2. yarn
3. yarn add prettier
4. Add import prettier from "prettier"; to the top of ./src/index.js
5. yarn start

The problem is that this project will not compile.

Expected Behavior

That prettier doesn’t break compilation! If you comment out the prettier import at ./src/index.js:6 in my example project this is the behaviour you should see.

Actual Behavior

The project should immediately show the following error:

Reproducible Demo

I’ve created a very simple example project demonstrating the problem at https://github.com/tonyonodi/CRA-prettier-test you can use it to replicate the problem with

1. git clone https://github.com/tonyonodi/CRA-prettier-test.git && cd CRA-prettier-test
2. yarn
3. yarn start

[heyimalex]

Here’s the relevant issue.

@tonyonodi you should also subscribe to this issue since apparently latest prettier can’t run in-browser right now anyway.

[nickmccurdy]

This is an issue with using Prettier on the web, not CRA: https://github.com/prettier/prettier/issues/3296