Gatsby: ES6 module - export 'Component' was not found in 'components/Component'

Created on 30 Sep 2018 · 5Comments · Source: gatsbyjs/gatsby

Description

Disclaimer: I am writing first project with Gatsby to test it.

I have a component called Slider in components directory:

components/Slider
  index.js // exports
  Slider.js // actual Slider code
  Slide.js // Slide code

The index.js file contains all exports for this module

export { default } from './Slider';
export { default as Slide } from './Slide';

This in preety common patern that I usually use for my components. Then I try to import it in my index.js page

import Slider, { Slide } from 'components/Slider';

and I receives following warning:

in ./src/pages/index.js

"export 'Slide' was not found in 'components/Slider'

And of course undefined value under Slide import.

Steps to reproduce

Create component and try to import it similarly like in description above^

Expected result

Module is imported correctly - which means components/Slider/index.js exports are used.

Actual result

Gatsby for some reason reads components/Slider/Slider.js file when importing component via import Slider, { Slide } from 'components/Slider'; - it shoud read components/Slider/index.js. But when I change my import to import Slider, { Slide } from 'components/Slider/index'; - it is working.

Also when I rename files in my component (there is no file called the same like directory):

components/Slider
  index.js
  slider.js // NOTE: slider start with small letter
  Slide.js

it is working.

This is myt first time having this issue. With any other webpacks configurations that I am/was using it was always correct.

Environment

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.11.0 - ~/.virtualenv/hahaha-games/bin/node
Yarn: 1.9.4 - ~/.local/bin/yarn
npm: 6.4.1 - ~/.virtualenv/hahaha-games/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0
npmPackages:
gatsby: ^2.0.6 => 2.0.6
gatsby-image: ^2.0.5 => 2.0.5
gatsby-plugin-eslint: ^2.0.1 => 2.0.1
gatsby-plugin-offline: ^2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-react-svg: ^2.0.0 => 2.0.0
gatsby-plugin-sharp: ^2.0.5 => 2.0.5
gatsby-plugin-sitemap: ^2.0.1 => 2.0.1
gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
gatsby-plugin-webpack-size: ^0.0.2 => 0.0.2
gatsby-source-filesystem: ^2.0.1 => 2.0.1
gatsby-transformer-json: ^2.1.1 => 2.1.1
gatsby-transformer-remark: ^2.1.1 => 2.1.1
gatsby-transformer-sharp: ^2.1.1 => 2.1.1

stale? question or discussion

Source

darkowic

All 5 comments

Same issue. Had this problem only when I ran npm update, diff:

   "dependencies": {
     "classnames": "^2.2.6",
-    "gatsby": "^2.0.0-beta.55",
-    "gatsby-image": "^2.0.0-beta.7",
-    "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
-    "gatsby-plugin-sass": "^2.0.0-beta.6",
-    "gatsby-plugin-sharp": "^2.0.0-beta.7",
+    "gatsby": "^2.0.12",
+    "gatsby-image": "^2.0.12",
+    "gatsby-plugin-react-helmet": "^3.0.0",
+    "gatsby-plugin-sass": "^2.0.1",
+    "gatsby-plugin-sharp": "^2.0.5",
     "gatsby-plugin-sitemap": "^2.0.1",
-    "gatsby-source-filesystem": "^2.0.1-beta.9",
+    "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-remark": "^2.1.4",
-    "gatsby-transformer-sharp": "^2.1.1-beta.6",
-    "gatsby-transformer-yaml": "^2.1.1-beta.3",
+    "gatsby-transformer-sharp": "^2.1.3",
+    "gatsby-transformer-yaml": "^2.1.1",
     "node-fetch": "^2.2.0",
     "node-sass": "^4.9.1",
-    "react": "^16.4.1",
-    "react-cookie-consent": "^1.7.0",
-    "react-dom": "^16.4.1",
+    "react": "^16.5.2",
+    "react-cookie-consent": "^1.8.0",
+    "react-dom": "^16.5.2",
     "react-helmet": "^5.2.0",
     "susy": "^3.0.5",
     "unstated": "^2.1.1"
@@ -31,7 +31,7 @@
     "babel-eslint": "^9.0.0",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.10.0",
-    "prettier": "^1.13.7"
+    "prettier": "^1.14.3"
   },

Federkun on 30 Sep 2018

😕1

Found https://github.com/gatsbyjs/gatsby/commit/d9899d598ae74776d7d33150436741c8659e686f and https://www.gatsbyjs.org/docs/add-custom-webpack-config/#absolute-imports , seems a BC break that I missed on the documentation?

This fixed the issue for me

  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules', './']
    }
  })

@KyleAMathews do you know why the src folder was removed from the default configuration?

Federkun on 30 Sep 2018

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!