cannot read property 'startsWith' of undefined about friendly-errors-webpack-plugin

[timefordroids]

I had the same issue. In my case the reason was a typo in dynamic import:
import(/* webpackChunkName: "locale-[request]" */ @/locales/${locale})
It seems the '@' symbol is not supported in the path.

[Ghustavh97]

If you are building on Render or Netlify make sure require.context("~/middleware", false, /.*\.js$/) does not point to an empty directory or else it will fail with a TypeError. At least that was my issue.

It passes on local builds when I run npm run production or dev but fails when I try to build online on both of these services.

Stack:
└─┬ [email protected]
└── [email protected]
└── [email protected]

Error message:

TypeError: Cannot read property 'startsWith' of undefined
    at isRelative (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/formatters/moduleNotFound.js:5:17)
    at /opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/formatters/moduleNotFound.js:64:15
    at Array.map (<anonymous>)
    at groupModules (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/formatters/moduleNotFound.js:62:43)
    at formatErrors (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/formatters/moduleNotFound.js:74:18)
    at format (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/formatters/moduleNotFound.js:87:10)
    at format (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/core/formatErrors.js:12:33)
    at Array.map (<anonymous>)
    at formatErrors (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/core/formatErrors.js:15:21)
    at FriendlyErrorsWebpackPlugin.displayErrors (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:110:5)
    at doneFn (/opt/render/project/src/node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:51:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/render/project/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/opt/render/project/src/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/opt/render/project/src/node_modules/webpack/lib/Compiler.js:271:21)
    at /opt/render/project/src/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/render/project/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/opt/render/project/src/node_modules/tapable/lib/Hook.js:154:20)
    at /opt/render/project/src/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/render/project/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/opt/render/project/src/node_modules/tapable/lib/Hook.js:154:20)
    at /opt/render/project/src/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/opt/render/project/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/opt/render/project/src/node_modules/tapable/lib/Hook.js:154:20)
    at /opt/render/project/src/node_modules/webpack/lib/Compilation.js:1414:32
    at eval (eval at create (/opt/render/project/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

[VitAndrGuid]

@Ghustavh97 goddamn i love you

[huafu]

@timefordroids for me it's not related to a @ but to the use of dynamic plugin name.

It seems to be a bug in this plugin (friendly-errors-webpack-plugin) when the moduleNotFound.js formatter is matched (e.type === 'module-not-found') and the error.module property is undefined which can happen when dynamic module names are used (ie with a var). It then tries to error.module.startsWith(...) within the isRelative helper, which fails since error.module is undefined.

[huafu]

...tho it used to work for me before as is, not sure what I've updated (at least I did not update the package which I am requiring files from) ... sounds like a webpack issue then. When I inspect the webpack error object, the require() that I am using should be working. It can't find... an existing directory. I need to investigate more...

[bdiz]

I was extracting some code into a different package and used file: to reference it:

{
  "dependencies": {
    "my-lib": "file:../my-lib"
  }
}

I made a mistake in the lib and had a require('./filename') in the index.js.

After building my original project I received the same error signature reported in this issue.

[ChadTaljaardt]

I am getting this as well.

[Mitscherlich]

Hi there. I got a quite similar similar problem. And I took these screenshots:

I tried to track the problem and found it. Seems to be using the wrong key in the error map:

In my case, I tried to load a components dynamic but not exist. After fixed the path and the problem is gone.

The problem seems to be at src/formatters/moduleNotFound.js#L62, where use a map to store missing modules but may got an undefined as map's key if a components is loaded dynamic.

[treardon17]

I had added an alias to my /src using the @ symbol. It worked initially, but then it broke later for whatever reason. I changed the alias key from @ to src and that fixed everything :)

[UnightSun]

#79