Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ayan4m1/gatsby-plugin-root-import

Package Overview
Dependencies
Maintainers
0
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ayan4m1/gatsby-plugin-root-import

Gatsby plugin to set Webpack to resolve import root

  • 2.0.10
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
Maintainers
0
Weekly downloads
 
Created
Source

@ayan4m1/gatsby-plugin-root-import

Set Webpack to resolve modules and aliases, allowing you to import modules from an absolute project path rather than relative ../../ paths.

Install

  1. Install the @ayan4m1/gatsby-plugin-root-import plugin:

    npm install --save-dev @ayan4m1/gatsby-plugin-root-import

    or

    yarn add --dev @ayan4m1/gatsby-plugin-root-import

Usage

Add into gatsby-config.js.

// gatsby-config.js

module.exports = {
  plugins: ['@ayan4m1/gatsby-plugin-root-import']
};

Default Settings

If no options are specified, the plugin allows you access to the src folder and also it's contents automatically.

This means you should be able to import modules like such:

// importing gatsbyProject/src/someFolder/SomeComponent.js

import SomeComponent from 'src/someFolder/SomeComponent';
// or more succinctly
import SomeComponent from 'someFolder/SomeComponent';

Plugin Options

Plugin Options allows you to:

  1. Specify additional webpack resolve.modules search locations with the resolveModules key.
  2. All other option keys will become a Webpack alias.
// gatsby-config.js
const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: '@ayan4m1/gatsby-plugin-root-import',
      options: {
        resolveModules: [path.join(__dirname, 'libs')],
        utils: path.join(__dirname, 'src', 'components', 'utilities')
      }
    }
  ]
};

This means you should be able to import modules like such:

// gatsbyProject/libs is now a searched resolve.modules directory
// importing gatsbybProject/libs/someLib/SomeLibComponent.js
import SomeLibComponent from 'someLib/SomeLibComponent';

// from the 'utils' alias
// importing gatsbyProject/src/components/utilities/UtilityComponent.js
import UtilityComponent from 'utils/UtilityComponent';

Jest testing

The new aliased paths lets Webpack correctly compile your app. However this does not mean that Jest, or other test runners will understand where those aliases point to.

When setting up testing with Jest, see moduleNameMapper to correctly map your your aliases to a path that Jest can understand.

For example:

// gatsby-config.js
const path = require('path');

module.exports = {
  // ...other configs
  plugins: [
    {
      resolve: '@ayan4m1/gatsby-plugin-root-import',
      options: {
        components: path.join(__dirname, 'src', 'web', 'components')
      }
    }
  ]
};

could work with a Jest map like:

// jest.config.js
module.exports = {
  // ...other configs
  moduleNameMapper: {
    '^components/(.*)': '<rootDir>/src/web/components/$1'
  }
};

Please see Jest's moduleNameMapper documentation for specific implementation details regarding format and options.

Keywords

FAQs

Package last updated on 25 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc