Gatsby: Incorrect modules resolving

[selrond]

Description

I have src/constants.js but when I try to import anything from it (using absolute imports), Gatsby throws a warning: export 'COLOR_NAMES' was not found in 'constants'.

I've researched a little, and it seems to be that nodejs has internal native constants module that somehow takes precedence, despite having absolute imports set up in gatsby-node.js:

const path = require('path')

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  })
}

Steps to reproduce

Just create a new gatsby project, src/constants.js and try to import anything from it:
https://codesandbox.io/s/mm67l7n6l8?codemirror=1&fontsize=14&module=%2Fsrc%2Fcomponents%2Fheader.js&moduleview=1

Expected result

src/constants.js should be used, instead of internal node module

Actual result

import { anything } from 'constants' refers to nodejs constants module

Environment

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    npm: 6.7.0 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 72.0.3626.109
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.119 => 2.0.119 
    gatsby-plugin-offline: ^2.0.23 => 2.0.23 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 
    gatsby-plugin-styled-components: ^3.0.5 => 3.0.5 

Probably related:

• https://github.com/webpack/webpack/issues/4159
• https://stackoverflow.com/questions/38014140/defining-public-constants-file-in-node-js/38016493

[yogeshkotadiya]

To import anything from local you have to use ./ prefix in the node.
Here In your case, you have to import your constants.js file as ./constants

So this is not a Gatsby issue, Please close this.

[harshattray]

I agree, just use your absolute path to fetch the constants file, that should fix your issue.

[selrond]

@yogeshkotadiya @harshattray I have aboslute imports set up for a reason, I don't want to dig up through folder structure, just to access constants.js.
I don't believe you consider this import { WHATEVER } from '../../../../constants.js' a scalable approach

[yogeshkotadiya]

@selrond Even if you have absolute import set up like this,

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
    },
  });
};

You can import your constants like this to avoid conflict,

import constants from './constants';

One more thing, just my opinion don't name your local modules same as node modules which can create a conflicting situation like this and also it will confuse others trying to read your code, I'd consider bad practice.

[wardpeet]

you might want to create an alias instead:

resolve: {
  alias: {
    core: path.resolve(__dirname, 'src/'),
  }
}

import { WHATEVER } from 'core/constants'

https://github.com/webpack/webpack/issues/4159 is actually explaining pretty well why this is happening and how you can fix it but it might break other things.

You might want to create an upstream issue on webpack to actually give some kind of warning text so people know what's up.

Thanks for using Gatsby 💪

[selrond]

@yogeshkotadiya I dont't understand how I can import it like you suggested from within nested component.
However, constants module - being nodejs internal module - is not even documented, so this creates rather confusing situation... I found out about it after some digging, but I can imagine people being quite baffled seeing their code not working, when it clearly should.
I still think there's need to be something done about this.