gatsby: Typescript plugin breaks in development mode
Description
With the latest stable gatsby-plugin-typescript / gatsby i’m experiencing this error in development mode:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
If I build and serve, this error does not occur.
Steps to reproduce
I made an example project https://github.com/adaptivdesign/my-hello-world-starter
I created this example from gatsby-starter-hello-world and I simply followed the instructions for gatsby-plugin-typescript. See my changes here https://github.com/adaptivdesign/my-hello-world-starter/commit/850db7bf760af8262ba707116c4c89b932b63ad1
Environment
System:
OS: macOS 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.1.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.100
Safari: 12.1.1
npmPackages:
gatsby: ^2.13.3 => 2.13.3
gatsby-plugin-typescript: 2.0.11 => 2.0.11
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 6
- Comments: 21 (10 by maintainers)
Commits related to this issue
- Merge branch 'sitemap' into add-sitemap — committed to logician22/energy-talking-points by milliephanillie a year ago
New release of
react-hot-loader(4.12.5) was release ~1 hour ago. It fixes the issue (at least in https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript I used as reproduction).Please try reinstalling deps (you might need to delete any lock files beforehand) and let us know if this fixes the problem.
I will open PR soon to bump minimal
react-hot-loaderversion in gatsby so it’s easier to resolve this without lock files shenanigans.For anyone that is still having this issue, I solved it by updating gatsby to 2.24.7 in package.json
gatsby@2.13.7was realeased - so you can update justgatsbypackage now without messing with lock filesYes, works for me now 👍
Hmmm, it does appear to have something to do with ‘default’. From what I can tell: // Doesn’t work export default ()=>[div]Hello World[/div] // Doesn’t work const IndexPage = ()=>[div]Hello World[/div] export default IndexPage // Doesn’t work class IndexPage extends React.Component {render() {return [div]Hello World[/div]}} export default IndexPage // Works const IndexPage = () => [div]Hello World[/div] export {IndexPage as default} // Works export default class IndexPage extends React.Component {render() {return [div]Hello World[/div]}} // Works class IndexPage extends React.Component {render() {return [div]Hello World[/div]}} export {IndexPage as default}