question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use React components contained in a local plugin

See original GitHub issue

Description

While local plugins totally work for accessing Gatsby hooks, I can’t seem to make them work for just loading a React component.

Steps to reproduce

  1. Generated project from gatsby new gatsby-component-plugin-bug
  2. Created plugins/gatsby-local-plugin and added the required files (index.js, gatsby-config.js) and ran npm install
  3. Moved the implementation of header.js from the src directory to inside the new plugin
  4. Adjusted paths
  5. Added the local plugin

I created this as a Git repo with the first commit being the starting point from gatsby new and the second commit being all of the changes I made: https://github.com/wirehead/gatsby-component-plugin-bug

Expected result

I expected the header.js component from the gatsby-local-plugin plugin to load.

Actual result

> gatsby develop

success open and validate gatsby-configs - 0.052s
success load plugins - 2.393s
successIonPreInit - 0.005s
successainitialize cache - 0.008s
success copy gatsby files - 0.191s
success onPreBootstrap - 0.024s
success createSchemaCustomization - 0.011s
success source and transform nodes - 0.098s
success building schema - 0.345s
successecreatePages - 0.002s
success createPagesStatefully - 0.096s
success onPreExtractQueries - 0.002s
success update schema - 0.029s
success extract queries from components - 0.305s
success write out requires - 0.047s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.123s
success onPostBootstrap - 0.130s
⠀
info bootstrap finished - 8.768 s
⠀
success run queries - 0.155s - 7/7 45.02/s
success Generating image thumbnails - 4.277s - 6/6 1.40/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'gatsby-local-plugin/header' in 'C:\Users\wirehead\Documents\src\gatsby-component-plugin-bug\src\component
s'

File: src\components\layout.js

faileddBuilding development bundle - 20.027s

Environment

System: OS: Windows 10 10.0.18363 CPU: (4) x64 Intel® Core™ i5-7500 CPU @ 3.40GHz Binaries: Node: 10.19.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 npmPackages: gatsby: ^2.20.12 => 2.20.12 gatsby-image: ^2.3.1 => 2.3.1 gatsby-plugin-manifest: ^2.3.3 => 2.3.3 gatsby-plugin-offline: ^3.1.2 => 3.1.2 gatsby-plugin-react-helmet: ^3.2.1 => 3.2.1 gatsby-plugin-sharp: ^2.5.3 => 2.5.3 gatsby-source-filesystem: ^2.2.2 => 2.2.2 gatsby-transformer-sharp: ^2.4.3 => 2.4.3

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
LekoArtscommented, Apr 14, 2020

We’d be happy to receive a PR adding this. @wirehead would you be up for it? https://www.gatsbyjs.org/contributing/docs-contributions/

2reactions
wireheadcommented, Apr 5, 2020

Awesome, can you put that in the docs section?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Integrating with Other Libraries - React
This guide will examine some of the more common use cases, focusing on integration with jQuery and Backbone, but the same ideas can...
Read more >
React unable to import component -- module not found
I am using this webpack file (GitHub link). However, when I run this, my module fails to load. I get this error in...
Read more >
How To Create Custom Components in React - DigitalOcean
You'll create a new class, add methods, and use the render function to show data. React components are self-contained elements that you can ......
Read more >
Module not found: Can't resolve 'X' error in React | bobbyhadz
The error "Module not found: Can't resolve" occurs for multiple reasons in React: Importing a local file from an incorrect relative path. Forgetting...
Read more >
How to Import SVGs in a React and Vite app - freeCodeCamp
JSX supports the svg tag, so we can copy-paste the SVG directly into our React components. This method is straightforward as it helps...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found