Can PhpStorm/WebStorm be made aware of custom loaders in Next.js's webpack config?

Question

I use a custom webpack config as detailed in the Next.js docs Custom Webpack Config page. PhpStorm has built-in support for handling webpack, however, since there is no actual webpack config file to point to, how does one integrate their IDE with a custom Next.js webpack config?

One issue I'm running into is PhpStorm complaining (rightfully) that the SVG I'm trying to import is not a module. However, this works because I'm using the @svgr/webpack loader. I'm assuming if I can get PhpStorm to "see" my webpack config, it won't complain about such things.

Having a command to generate a webpack config from next.config.js, for example, might be a viable workaround. Another is having a reference to a file that is dynamically resolved to the same config that the Next.js config file would use; this is the approach taken by Vue.

As I'm using TypeScript, I have a tsconfig.json file at the root of my project, which serves to provide appropriate path aliasing and code/path completion.

The issue I'm running into is this:

The file someSvg.svg exists at the specified location, and the code runs as expected. However, PhpStorm is complaining. Is it possible to make PhpStorm aware of the fact that this import is being handled by webpack, specifically the @svgr/webpack loader?

lena · Answer 1 · 2022-01-20T10:48:14.333

The IDE needs a resolved webpack config as a file for evaluation (like it's done in Vue Cli) to be able to resolve path aliases. If Next.js doesn't expose such configuration files, you can either add a simple dummy js file with aliases defined, like

module.exports = {
  resolve: {
    alias: {
      'myAlias': path.resolve(__dirname, './actual/path'),
...
    }
  }
}

to your project root and set it up as webpack configuration file, or define your aliases in jsconfig.json (also has to be placed in the root):

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "myAlias/*": [
        "actual/path/*"
      ],
      "myOtherAlias/*": [
        "other/actual/path/*"
      ],
     ...
    }
  }
}

Update: Just noticed your updated question. The error comes from the Typescript compiler, it doesn't know how to deal with .svg files. You need adding a shim, a .d.ts file that will let the compiler know what it is. Like: types/shim.d.ts:

declare module '*.svg' {
...
}

see Can't import SVG into Next.js, for example

Since I'm using TypeScript and have a `tsconfig.json` file set up in the root of my project, aliases are working fine for me. I'm aware I can cherry-pick relevant bits of Next.js's webpack config into my own `webpack.config.js` file, but that doesn't appear to solve my problem with the custom loader, nor is that manual process ideal. I think I've run into the XY problem and will re-phrase my original question. I appreciate your help! — chipit24, Jan 19 '22 at 19:24
for Typescript projects, the IDE never uses webpack for aliases resolving, path mappings from `tsconfig.json` are used instead. So you don't need creating any dummy configs. Webpack support is about path aliases only, you can't expect any other stuff here, i.e. no special support for your custom loaders, etc. — lena, Jan 20 '22 at 10:31

Can PhpStorm/WebStorm be made aware of custom loaders in Next.js's webpack config?

1 Answers1