CODEWITHSUNDEEP
javascriptreactjsnpmwebpackgatsby
Moshe
Moshe

Reputation: 6991

Creating an Alias for an NPM Package in Gatsby Using the Root Import Plugin

I have installed the gatsby-plugin-root-import plugin to create aliases for my imports in my Gatsby site. I have been using it for a while and it works great.

Today, I decided to see if I could use it for an npm package that I have installed. I think I set it up correctly, but I am getting an error saying that the module cannot be found:

Module not found: Error: Can't resolve 'FontAwesome' in '/sandbox/src/pages'

But, when I look at my code, it looks like it should work:

{
      resolve: 'gatsby-plugin-root-import',
      options: {
        // Node Modules
        FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

        // Main Folders
        SRC: path.join(__dirname, 'src'),
        Assets: path.join(__dirname, 'src/assets'),
        Components: path.join(__dirname, 'src/components'),
        Config: path.join(__dirname, 'src/config'),
        Layouts: path.join(__dirname, 'src/layouts'),
        Pages: path.join(__dirname, 'src/pages'),
        Plugins: path.join(__dirname, 'src/plugins'),
        Styles: path.join(__dirname, 'src/styles'),
        Utilities: path.join(__dirname, 'src/utilities'),

      },
    },

All the other aliases work just fine -- it's only the FontAwesome alias that creates the module not found error message.

Any idea why this doesn't work and what I can do to fix it?

Thanks.

P.S. Here is the link to the plugin: https://github.com/mongkuen/gatsby-plugin-root-import

Upvotes: 2

Views: 455

Answers (1)

Thomas
Thomas

Reputation: 167

I think the problem lies in the line: 

FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

You are joining the root folder with just the name of the plugin within node_modules. But you need to look in the node_modules folder, since it is not resolved automatically, like in imports.

Could you please test the following line instead?

FontAwesome: path.join(__dirname, 'node_modules/@fortawesome/react-fontawesome'),

Upvotes: 2

Related Questions