How to import with absolute paths in Gatsby
#gatsby#javascript#react#webdev
Clarice Bouwer

Clarice Bouwer @cbillowes

About: Curious programmer sharing byte-sized knowledge on dev.to. Passionate about Git, GCP, TypeScript, Next.js, and DevTools. Enjoys collaborating with others and leading by example.

Location:
Mauritius
Joined:
May 30, 2018

How to import with absolute paths in Gatsby

Publish Date: Jun 30 '23
0 0

gatsby-node.js:

const path = require('path')
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        components: path.resolve(__dirname, 'src/components'),
        templates: path.resolve(__dirname, 'src/templates'),
      },
    },
  })
};
Enter fullscreen mode Exit fullscreen mode

./project/src/path/to/some/file/of/yours.js:

import Layout from 'components';
Enter fullscreen mode Exit fullscreen mode

as opposed to:

import Layout from '../../../../components/Layout.js';
Enter fullscreen mode Exit fullscreen mode

See GitHub solution as original source and reference.

Comments 0 total

    Add comment