(gatsby-theme-docz): Custom webpack alias not recognized

[jesperorb]

Bug Report

Describe the bug

I am in the process of trying to migrate to v2 and can't get custom webpack alias to work properly with Gatsby. I do not know if it is because of some strange thing in our custom setup or if it is the theme that is not picking up the config properly.

In v.1.2.0 we have the following config-property in doczrc.js and it is working:

onCreateWebpackChain: config => {
    config.resolve.alias
         .set("common", path.resolve(__dirname, "source/common"))
         .set("ui", path.resolve(__dirname, "source/ui"))
         .set("framework", path.resolve(__dirname, "source/framework"))
         .set("application", path.resolve(__dirname, "source/application"))
    return config
}

And inside a typical component we have imports that looks like this:

import * as React from "react";

import css from "common/modules/cssBuilder";

import { Button, ButtonType } from "ui/components/button/button";
import { Dropdown } from "ui/components/dropdown/dropdown";
import { VerticalLayout } from "ui/components/verticalLayout/verticalLayout";

With 2.3.2 I am trying to set up this with gatsby-node.js instead and I can't get it to work:

const path = require("path");
exports.onCreateWebpackConfig = ({
    stage,
    rules,
    loaders,
    plugins,
    actions,
}) => {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /\.less$/,
            [
              loaders.miniCssExtract(),
              loaders.css({ importLoaders: 1 }),
              loaders.postcss(),
              "less-loader"
            ],
          },
        ],
      },
      plugins: [
        plugins.define({
          __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
        }),
      ],
      resolve: {
        modules: [path.resolve(__dirname, '../source')],
        alias: {
            "common": path.resolve(__dirname, "../source/common"),
            "ui": path.resolve(__dirname, "../source/ui"),
            "framework": path.resolve(__dirname, "../source/framework"),
            "application": path.resolve(__dirname, "../source/application")
        },
        extensions: [".tsx", ".ts", ".less"]
      }
    })
  }

Trace

The gatsby-node.js-config produces the following output for every alias import, this is one of them:

ERROR #98123  WEBPACK
 
Generating SSR bundle failed

Can't resolve 'ui/components/verticalLayout/verticalLayout' in '/mnt/c/project/source/ui/components/menu'
 
File: ../source/ui/components/menu/menu.tsx

Expected behavior

Should not fail on imports where webpack alias is used or give a more descriptive error on what I should be looking for.

Environment

• docz version: 2.3.2-alpha.0
• OS: Windows 10
• Node/npm version: Node v10.14.1 / Yarn 1.15.2 / NPM 6.9.0
• TypeScript version: 3.7.4

[0phoff]

Not sure if it is the same error, but I had a small typo in my gatsby-node.js file (forgot a comma), which has as effect that docz just ignores your custom file without any warning or error.
I can't seem to find a syntax error on your config, but it might be something similar (maybe it cannot find a loader or so) ?

Going through the code, it seems they just resolve to NO_OP if they cannot succesfully get your config:

  const onCreateWebpackConfig = get(
    gatsbyNodeCustom,
    'onCreateWebpackConfig',
    NO_OP,
  )
  return onCreateWebpackConfig(args)

While the end result is fine with me, I feel this code should at least issue a warning that it couldn't read your file. That said it is probably easier said than done to issue a warning...

[mkhbragg]

@jesperorb Hej! I have fond memories of visiting Uppsala and buying Bamse comics to learn Swedish 😄

With 2.3.2 I am trying to set up this with gatsby-node.js instead and I can't get it to work

I was experiencing the same issue. My file structure looks like this:

|-- gatsby-node.js
|-- packages
|   |-- components
|   |   |-- src
|-- src
|   |-- gatsby-theme-docz
|-- .docz
|   |-- gatsby-node.js
|   |-- gatsby-node.custom.js

and my gatsby-node.js looks like this:

exports.onCreateWebpackConfig = args => {
  args.actions.setWebpackConfig({
    resolve: {
      alias: {
        components: path.resolve(__dirname, '../packages/components/src'),
      },
    },
  })
}

Because the custom gatsby-node.js gets copied into .docz as gatsby-node.custom.js, the aliases end up being relative to that path, instead of relative to the root of the project, where gatsby-node.js is originally defined. That's why I had to reference ../packages/components/src instead of packages/components/src.

Doing things that way smells a little fishy, but there you have it. Hope it helps!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.