How to set root directory for webpack

Question

I am configuring webpack for react storybook and I am having issues with the import statements paths. When I normally run my app, I have a path like this:

import { constructURLName } from "src/shared/utilities/stringManipulation";

I am using the reactQL boilerplate and it is configured so that it will return the proper module based on the src folder. How can I replicate that in storybook? Storybook currently tries to look for that stringManipulation file here:

/Users/me/development/reactQL/node_modules/src/shared/utilities/stringManipulation

So it needs to go up one directory based on my layout:

node_modules
src
  pages
  ...
  shared
    utilities
      stringManipulation

This is what my rule looks like for js/jsx files:

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            query: {
              babelrc: false,
              presets: [
                ["env", { modules: false, exclude: ["transform-regenerator"] }],
                "react"
              ],
              plugins: [
                "transform-object-rest-spread",
                "syntax-dynamic-import",
                "transform-regenerator",
                "transform-class-properties",
                "transform-decorators-legacy"
              ]
            }
          }
        ]
      }, 

How can I properly set the src directory? Thanks!

Answer 1

You can use resolve.modules.

const path = require('path');
const config = {
    ...
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, './'),
        ]
    }