Filesystem Cache is throwing TypeError: Cannot read property 'length' of undefined from ResolverCachePlugin #11668

gtwilliams03 · 2020-10-13T13:41:52Z

Bug report

What is the current behavior?

Attempting to get the cache working for webpack 5. I have it working on one of my local repos, but this one (a clone of a different website), is throwing an error:

Relevant config:

  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [ '/Users/xxx/public-web/config/webpack.config.js' ]
    }
  }

Throws this error:

(node:23491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
    at getType (/Users/xxx/public-web/node_modules/enhanced-resolve/lib/util/path.js:41:12)
    at Resolver.isPrivate (/Users/xxx/public-web/node_modules/enhanced-resolve/lib/Resolver.js:446:10)
    at Resolver.parse (/Users/xxx/public-web/node_modules/enhanced-resolve/lib/Resolver.js:430:25)
    at /Users/xxx/public-web/node_modules/enhanced-resolve/lib/ParsePlugin.js:33:29
    at _next0 (eval at create (/Users/xxx/public-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/Users/xxx/public-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at /Users/xxx/public-web/node_modules/webpack/lib/cache/ResolverCachePlugin.js:199:17
    at Hook.eval [as callAsync] (eval at create (/Users/xxx/public-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Resolver.doResolve (/Users/xxx/public-web/node_modules/enhanced-resolve/lib/Resolver.js:398:16)
    at doRealResolve (/Users/xxx/public-web/node_modules/webpack/lib/cache/ResolverCachePlugin.js:138:13)

Setting the webpack config config: false eliminates the error and the build runs normally.

If the current behavior is a bug, please provide the steps to reproduce.

I see directories being created under my working repo in the node_modules/.cache folder, but not on my problem repo. A .cache folder is created, but no webpack or webpack/client-development folders.

What is the expected behavior?

Cannot figure out why one repo is throwing this error and the other is not.

Other relevant information:
webpack version: 5.0.0
Node.js version: 14.13.1
Operating System: MacOS Catalina 10.15.7
Additional tools:

The text was updated successfully, but these errors were encountered:

alexander-akait · 2020-10-13T13:47:51Z

hm, maybe you can create reproducible test repo?

gtwilliams03 · 2020-10-13T14:00:39Z

Right now I am just crawling through the repo that works and the repo that doesn't to try and find any differences. I am baffled - although I am wondering if this is some sort of strange permissions issue since the working repo is quote old (2-3 years) and the problem repo was created in the last month or so.

gtwilliams03 · 2020-10-13T14:01:07Z

Same computer, same webpack config, different folders.

alexander-akait · 2020-10-13T14:11:17Z

@gtwilliams03 Perhaps we are not processing a specific case, perhaps the configuration would be enough to understand it

gtwilliams03 · 2020-10-13T14:17:41Z

Here is the output of my webpack config:

{
  mode: 'development',
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [ '/Users/xxx/public-web/config/webpack.config.js' ]
    }
  },
  optimization: { emitOnErrors: true, concatenateModules: false },
  name: 'client',
  target: 'web',
  devtool: 'source-map',
  resolve: {
    modules: [ '/Users/xxx/public-web/src', 'node_modules' ],
    extensions: [ '.js', '.jsx', '.json' ]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /\/node_modules\/(?!(@restart\/context|@restart\/hooks|autobind-decorator|sort-keys|email-regex|query-string|split-on-first|strict-uri-encode|react-bootstrap-slider)\/).*\//,
        include: [
          '/Users/xxx/public-web/node_modules/@restart/context',
          '/Users/xxx/public-web/node_modules/@restart/hooks',
          '/Users/xxx/public-web/node_modules/autobind-decorator',
          '/Users/xxx/public-web/node_modules/sort-keys',
          '/Users/xxx/public-web/node_modules/email-regex',
          '/Users/xxx/public-web/node_modules/query-string',
          '/Users/xxx/public-web/node_modules/split-on-first',
          '/Users/xxx/public-web/node_modules/strict-uri-encode',
          '/Users/xxx/public-web/node_modules/react-bootstrap-slider',
          '/Users/xxx/public-web/src'
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              plugins: [ '@babel/plugin-proposal-class-properties' ],
              presets: [ [ '@babel/preset-env' ], '@babel/preset-react' ]
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        include: /(\/Users\/xxx\/public\-web\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: { localIdentName: '[name]__[local]___[hash:base64:5]' },
              importLoaders: 1
            }
          },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                includePaths: [ '/Users/xxx/public-web/src/styles' ]
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: /(\/Users\/xxx\/public\-web\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: { localIdentName: '[name]__[local]___[hash:base64:5]' },
              importLoaders: 1
            }
          },
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /(\/Users\/xxx\/public\-web\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          { loader: 'css-loader', options: {} },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                includePaths: [ '/Users/xxx/public-web/src/styles' ]
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        exclude: /(\/Users\/xxx\/public\-web\/src)/,
        use: [
          { loader: 'style-loader', options: {} },
          { loader: 'css-loader', options: {} },
          { loader: 'postcss-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
        use: [ { loader: 'url-loader', options: { limit: 100000 } } ]
      },
      {
        test: /\.(gif|png|jpg)$/,
        use: [ { loader: 'url-loader', options: { limit: 8192 } } ]
      },
      {
        test: /\.m?js$/,
        type: 'javascript/auto',
        resolve: { fullySpecified: false }
      }
    ]
  },
  entry: {
    babelPolyfill: 'babel-polyfill',
    fetchPolyfill: 'whatwg-fetch',
    vendor: [ 'react', 'react-redux', 'react-router-dom', 'redux' ],
    app: [
      '/Users/xxx/public-web/src/main.js',
      'webpack-hot-middleware/client?path=http://192.168.4.62:3050/__webpack_hmr'
    ]
  },
  output: {
    filename: '[name].[fullhash].js',
    path: '/Users/xxx/public-web/dist',
    publicPath: 'http://192.168.4.62:3050/'
  },
  plugins: [
    DefinePlugin {
      definitions: {
        'process.env': { NODE_ENV: '"development"' },
        NODE_ENV: 'development',
        __DEV__: true,
        __PROD__: false,
        __TEST__: false,
      }
    },
    HtmlWebpackPlugin {
      options: {
        template: '/Users/xxx/public-web/src/index.html',
        templateContent: false,
        templateParameters: [Function: templateParametersGenerator],
        filename: 'index.html',
        publicPath: 'auto',
        hash: false,
        inject: 'body',
        scriptLoading: 'blocking',
        compile: true,
        favicon: false,
        minify: { collapseWhitespace: true },
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'auto',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false
      },
      childCompilerHash: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    HotModuleReplacementPlugin { options: {} }
  ]
}

alexander-akait · 2020-10-13T14:32:51Z

Do you have the error when you run dev server or just simple build? Can you try to remove webpack-hot-middleware/client?path=http://192.168.4.62:3050/__webpack_hmr?

gtwilliams03 · 2020-10-13T14:45:00Z

I get the error when I run a build or dev server.

gtwilliams03 · 2020-10-13T14:46:16Z

I also get the error with or without the webpack-hot-middleware entry. Even get the error running a simple yarn install command.

alexander-akait · 2020-10-13T14:47:07Z

I'm afraid we still have to look at reproducible test repo to fix it, hard to say why it is broken 😞

egs33 · 2020-10-13T15:08:30Z

I was getting the same error in my project.
But, using sass package instead of node-sass solved the error. (for sass-loader)

alexander-akait · 2020-10-13T15:19:54Z

@gtwilliams03 maybe you can provide more stack?

alexander-akait · 2020-10-13T15:20:05Z

@egs33 Can you create minimum reproducible test repo?

egs33 · 2020-10-13T15:28:06Z

@evilebottnawi I made a repository to reproduce. https://github.com/egs33/webpack5-cache-error

alexander-akait · 2020-10-13T15:31:46Z

@egs33 big thanks, found the problem

gtwilliams03 · 2020-10-13T16:37:00Z

@egs33 Thank you so much! I was trying to figure out how to break the project apart to come up with a reproducible repo... Much appreciated!

alexander-akait · 2020-10-13T16:38:33Z

@gtwilliams03 anyway try to disable cache and look on your error, you need to fix it

gtwilliams03 · 2020-10-13T16:43:04Z

@evilebottnawi I don't get any errors when I set cache: false?

alexander-akait · 2020-10-13T16:46:40Z

Yes

gtwilliams03 · 2020-10-13T16:47:29Z

In my OP, I don't get any errors with cache: false. Never have. That's what has baffled me.

alexander-akait · 2020-10-13T17:10:39Z

@gtwilliams03 this problem happens only when you have resolving errors

gtwilliams03 · 2020-10-13T17:15:11Z

Sorry for asking a dumb question, but how do I see the resolving errors when they don't show up in the terminal? I was actually just looking at the ResolverCachePlugin code and seeing if I could log some details in there...

alexander-akait · 2020-10-13T17:31:46Z

@gtwilliams03 it should be shown in stats or in terminal if you use webpack-cli

gtwilliams03 · 2020-10-13T18:00:41Z

It seems to be failing before the stats get returned.

alexander-akait · 2020-10-13T18:10:54Z

@gtwilliams03 maybe do you can create reproducible repo too? I want to investigate, maybe we have two different errors 😄

gtwilliams03 · 2020-10-13T21:32:09Z

I am still trying to figure out what module isn't resolving. The webpack-cli is dying before I can get meaningful output.

58% building 7/8 entries 3440/3600 dependencies 727/939 modules[webpack-cli] Promise rejection: TypeError: Cannot read property 'length' of undefined

sokra · 2020-10-14T03:43:58Z

I wonder why webpack-cli suppresses the stack trace...

gtwilliams03 · 2020-10-14T04:51:15Z

Somehow there is an undefined value getting passed into the ResolverCachePlugin so line 41 in enhanced-resolve/lib/util/path throws an error because p is not a string:

const getType = p => {
	switch (p.length) { // <- line 41
		case 0:
			return PathType.Empty;
...

I changed this line to:

const getType = (p = '') => { // <- changed line
	switch (p.length) { 
		case 0:
			return PathType.Empty;
...

and it works fine. No idea what path I have in my project that is creating the undefined value. Submitted a pull request to enhanced-resolve to address this edge case.

sokra · 2020-10-14T10:29:07Z

There shouldn't be a undefined value there. Seems like something is passing undefined to resolve. Maybe you are able to track this down by inserting a if(!request) somewhere higher in the stack trace. Probably a loader via getResolve() or resolve (see NormalModule.js createLoaderContext.

joakimriedel · 2020-10-22T15:43:50Z

If this is a resolving problem - could someone please elaborate or post a link on how to debug and find the eventual culprit? I have a fully working build, no errors or warnings (unless I enable filesystem cache with path to config that is..), no runtime errors, but still can't enable file system cache due to this issue.

alexander-akait · 2020-10-22T15:47:23Z

@joakimriedel interesting, can you provide reproducible test repo?

joakimriedel · 2020-10-22T17:22:29Z

@evilebottnawi I'll try my best, it's a pretty big project evolved during many years and versions of Webpack so I'll need to break it down a bit first. During the last hour, I got at least the following findings;

At this line: https://github.com/webpack/enhanced-resolve/blob/0f51a8cf62b47cde4f57977cf4a205d832f8da69/lib/ParsePlugin.js#L33

the request object is supposed to have a request key (request.request) but this is the request object sent:

{"_ResolverCachePluginCacheMiss":true,"context":{},"path":"C:/Users/<redacted>/wwwroot/src/css"}

This lead me to put a debug log at this line: https://github.com/webpack/enhanced-resolve/blob/0f51a8cf62b47cde4f57977cf4a205d832f8da69/lib/Resolver.js#L398

if (/\/src\/css$/.test(request.path)) {
				console.log(JSON.stringify(hook));
				console.log(JSON.stringify(request));
				console.log(JSON.stringify(message));
			}

Which lets me see earlier in the process that the mysterious path comes from resolving bootstrap/scss/bootstrap which I do within a scss file like this:

/* bootstrap scss bundle */
@import "~bootstrap/scss/bootstrap";

using the following loader configuration

{
          test: /\.scss$/,
          use: [
            {
              loader: "style-loader", // injects css into DOM
            },
            {
              loader: "css-loader",
              options: { sourceMap: !env.production, importLoaders: 1 },
            },
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    [
                      "postcss-preset-env",
                      {
                        // Options
                      },
                    ],
                  ],
                },
                sourceMap: !env.production,
              },
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: !env.production,
                sassOptions: {
                  outputStyle: "expanded", // keeps comments, such as autoprefixer commands, in output css file
                },
              },
            },
          ],
        },

I suspect some combination of Bootstrap and Webpack and sass-loader is involved. I will need further time to generate a repo, but perhaps others like @johnthecat or @gtwilliams03 can confirm if they also use Bootstrap in their configuration?

jdelStrother · 2020-10-22T17:25:01Z

I'm seeing similar issues, and also have a .scss file containing:

@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";

alexander-akait · 2020-10-22T17:26:54Z

Thanks I will look at this in near future, a lot of issues 😞

alexander-akait · 2020-10-22T19:13:55Z

Hmm, it looks like there is no error in webpack, problem with sass-loader, webpack just generate ugly error, WIP

gtwilliams03 · 2020-10-22T19:14:09Z

@jdelStrother @joakimriedel Yes - my project also contains bootstrap and react-bootstrap. I believe that I resolved these issues by replacing node-sass with sass in the project. And you may want to try and remove the ~ at the beginning of your css path that you are trying to import.

joakimriedel · 2020-10-22T19:16:25Z

I'm sorry for the bootstrap red herring. It turned out to be fontawesome.

I have a repro here: https://github.com/joakimriedel/webpack-cache-bug-repro

Building this repro will show error. Remove cache from config - no error - builds just fine.

alexander-akait · 2020-10-22T19:27:08Z

Yes, I found bug, two problems:

bug in sass-loader
ugly error from webpack when you run:

const resolve = loaderContext.getResolve(options); 

resolve(context,  undefined);
// or resolve(undefined,  undefined)

WIP on first

I even can tell you why there is an error with node-sass and no problems with sass 😄

alexander-akait · 2020-10-22T20:20:13Z

Please try https://github.com/webpack-contrib/sass-loader/releases/tag/v10.0.4

joakimriedel · 2020-10-22T20:51:29Z

@evilebottnawi can confirm sass-loader 10.0.4 solves the issue I've had with the cache, webpack 5 feels rock solid now! 🎉

In my real project, compile time went from 14440 ms to 1667 ms using the filesystem cache. (on a threadripper/nvme m.2)

I'm really curious about the small change to bring the compile time even further down?

drewlustro · 2020-10-22T23:55:45Z

Is this issue fixed for enhanced-resolve ? I'm still experiencing it.

alexander-akait · 2020-10-23T11:21:39Z

@drewlustro Yes (webpack/enhanced-resolve#261), but you will have error in this case, so we need to find loader with problems, can you provide config/minimum reproducible test repo

alexander-akait · 2020-10-23T13:28:43Z

Fixed in both places (update deps to latest, i.e. sass-loader and enhanced-resolve), please leave feedback

alexander-akait · 2020-10-23T19:15:05Z

@joakimriedel Can you try https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.1 and provde some feedback on performance? Try it on node@12 or node@14

test: example problem of #11668

phantodev · 2021-09-23T14:15:42Z

I JUST UPGRADE WEBPACK in my PROJECT and works fine!

PlanetPush · 2023-07-17T16:24:29Z

This issue happened for me when path is lower case "c:"

This can be seen by putting a conditional breakpoint in the paths.map function in the method "apply(resolver)" inside "ehanced-resolve/lib/ModulesInHierarchicalDirectriesPlugin.js"

alexander-akait added webpack-5 bug labels Oct 13, 2020

This comment has been minimized.

Sign in to view

alexander-akait added a commit that referenced this issue Oct 22, 2020

test: example problem of #11668

f82659f

alexander-akait mentioned this issue Oct 22, 2020

test: example problem of #11668 #11788

Merged

alexander-akait added a commit that referenced this issue Oct 22, 2020

test: example problem of #11668

05308fa

alexander-akait added a commit that referenced this issue Oct 22, 2020

test: example problem of #11668

cb20b64

This comment has been minimized.

Sign in to view

sokra closed this as completed in #11788 Oct 26, 2020

sokra added a commit that referenced this issue Oct 26, 2020

Merge pull request #11788 from webpack/issue-11668

56074f1

test: example problem of #11668

Filesystem Cache is throwing TypeError: Cannot read property 'length' of undefined from ResolverCachePlugin #11668

Filesystem Cache is throwing TypeError: Cannot read property 'length' of undefined from ResolverCachePlugin #11668

Comments

gtwilliams03 commented Oct 13, 2020

Bug report

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020 • edited

alexander-akait commented Oct 13, 2020

egs33 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

egs33 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020 • edited

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

alexander-akait commented Oct 13, 2020

gtwilliams03 commented Oct 13, 2020

sokra commented Oct 14, 2020

gtwilliams03 commented Oct 14, 2020 • edited

sokra commented Oct 14, 2020

joakimriedel commented Oct 22, 2020

alexander-akait commented Oct 22, 2020

joakimriedel commented Oct 22, 2020 • edited

jdelStrother commented Oct 22, 2020

alexander-akait commented Oct 22, 2020

alexander-akait commented Oct 22, 2020 • edited

gtwilliams03 commented Oct 22, 2020 • edited

joakimriedel commented Oct 22, 2020 • edited

alexander-akait commented Oct 22, 2020 • edited

alexander-akait commented Oct 22, 2020

This comment has been minimized.

joakimriedel commented Oct 22, 2020 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

drewlustro commented Oct 22, 2020

alexander-akait commented Oct 23, 2020

alexander-akait commented Oct 23, 2020

alexander-akait commented Oct 23, 2020

This comment has been minimized.

This comment has been minimized.

phantodev commented Sep 23, 2021

PlanetPush commented Jul 17, 2023

gtwilliams03 commented Oct 13, 2020 •

edited

gtwilliams03 commented Oct 13, 2020 •

edited

gtwilliams03 commented Oct 14, 2020 •

edited

joakimriedel commented Oct 22, 2020 •

edited

alexander-akait commented Oct 22, 2020 •

edited

gtwilliams03 commented Oct 22, 2020 •

edited

joakimriedel commented Oct 22, 2020 •

edited

alexander-akait commented Oct 22, 2020 •

edited

joakimriedel commented Oct 22, 2020 •

edited