Typescript + react-apollo beta + webpack fails / Typescript example does not run

[joearasin]

Intended outcome:

Using the beta react-apollo in a typescript app.

Actual outcome:

Received an "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined"

How to reproduce the issue:

1. Create a new app with "https://github.com/wmonk/create-react-app-typescript"
2. Add Apollo dependencies per the Quickstart yarn add apollo-boost graphql react-apollo@beta
3. Add Apollo provider per documentation
4. Receive error message

Version

• apollo-client@2.2.5
• apollo-boost@0.1.1
• react-apollo@2.1.0-beta3

[joearasin]

Incidentally, I cannot run the typescript example in this repo, either.

[jcq]

I am having the same issue. As soon as is added, this error occurs when using beta 3. Everything works fine when swapping back to beta 2 (though I'd certainly like to use the new components in beta 3).

[joearasin]

Poking into this further, this has something to do with the presence of the mjs files -- I'm not sure what is happening, but I'm guessing the typescript compiler is doing something, and webpack is doing something else. Removing the mjs files from the node_modules/react-apollo/lib folder makes things work

[joearasin]

Here we go:

• Add .mjs support facebook/create-react-app#3239
• BUG MITIGATION: .mjs should not resolve before .js files facebook/create-react-app#4085

[joearasin]

A post-install hook to clean up the mjs files allowed me to use the RC

Something along the lines of:

“postinstall”: “rm -f node_modules/react-apollo/*.mjs

or
“postinstall”: “rm -f node_modules/react-apollo/*.mjs ../../node_modules/react-apollo/*.mjs”
(if you're using yarn modules)

[mbrowne]

It's broken in create-react-app-typescript also: wmonk/create-react-app-typescript#259

[mbrowne]

It appears that this is no longer an issue in the latest release candidate. Just tried it with 2.1.0-rc.5 and there are no longer any .mjs files included in the package, so it works fine.

[gaearon]

If your project is built with Create React App and not ejected, react-scripts@1.1.2 should fix this.
Here is how to upgrade:

https://github.com/facebook/create-react-app/releases/tag/v1.1.2

Otherwise you can apply a similar fix yourself in your project config. Cheers!

[KendoJaaa]

it doesn't work doing what @gaearon said. but it works when doing like @joearasin said

[mbrowne]

@KendoJaaa are you using the official create-react-app, or create-react-app-typescript? Anyway, react-apollo 2.1 has been released now and has fixed this issue, so there's no need to use the beta anymore.

[rosskevin]

Closing - housekeeping