Create-react-app: Importing prettier as a dependency breaks compilation

[tonyonodi]

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):

[email protected]
└── [email protected]

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.

[Timer]

Thanks for investigating, @heyimalex!

[tonyonodi]

Thanks @heyimalex! I happen to be using CRA in Electron so hopefully I'll be able to fix this by refactoring the project so that Prettier isn't bundled by webpack.

[nickmccurdy]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.

[Timer]

looks like it was fixed upstream