TypeError: resolver.ensureHook is not a function

[ankurk91]

Hi, @arcanis

I followed your instructions and made some progress but i am still facing issues.
You can check my webpack.config.dev.js

Environment

• yarn : 1.12.1
• node : 10.13 LTS (nvm)
• OS: MacOS 10.14 stable
• Webpack: 4.23.1

Steps

git clone https://github.com/ankurk91/vue-flatpickr-component.git -b feat/pnp --single-branch
cd vue-flatpickr-component
yarn install
yarn run docs

You will see this error

Click to see error log

yarn run v1.12.1
$ cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode production
/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-cli-3.1.2-17d7e01b77f89f884a2bbf9db545f0f6a648e746/node_modules/webpack-cli/bin/cli.js:453
                                throw err;
                                ^

TypeError: resolver.ensureHook is not a function
    at Object.resolver [as apply] (/Users/ankurk/Library/Caches/Yarn/v3/npm-pnp-webpack-plugin-1.2.0-a85338bc313b8a0469c1d8c5c5d016873be47cb2/node_modules/pnp-webpack-plugin/index.js:48:35)
    at webpack (/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-4.23.1-db7467b116771ae020c58bdfe2a0822785bb8239/node_modules/webpack/lib/webpack.js:47:13)
    at processOptions (/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-cli-3.1.2-17d7e01b77f89f884a2bbf9db545f0f6a648e746/node_modules/webpack-cli/bin/cli.js:441:16)
    at yargs.parse (/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-cli-3.1.2-17d7e01b77f89f884a2bbf9db545f0f6a648e746/node_modules/webpack-cli/bin/cli.js:536:3)
    at Object.parse (/Users/ankurk/Library/Caches/Yarn/v3/npm-yargs-12.0.2-fe58234369392af33ecbef53819171eff0f5aadc/node_modules/yargs/yargs.js:563:18)
    at /Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-cli-3.1.2-17d7e01b77f89f884a2bbf9db545f0f6a648e746/node_modules/webpack-cli/bin/cli.js:219:8
    at Object.<anonymous> (/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-cli-3.1.2-17d7e01b77f89f884a2bbf9db545f0f6a648e746/node_modules/webpack-cli/bin/cli.js:538:3)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at Function.Module._load (/Users/ankurk/projects/p/vue-flatpickr-component/.pnp.js:11592:14)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/ankurk/Library/Caches/Yarn/v3/npm-webpack-4.23.1-db7467b116771ae020c58bdfe2a0822785bb8239/node_modules/webpack/bin/webpack.js:155:2)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at Function.Module._load (/Users/ankurk/projects/p/vue-flatpickr-component/.pnp.js:11592:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command

I am using the latest version of the packages.
Let me know what i am missing here.

[jennale]

I had this issue as well, and it was because I mistakenly placed the PnpWebpackPlugin within the regular plugins: [ ... ] array instead of inside the resolveLoader : { plugins: [ ... ] }.

Maybe double check your webpack.config.js?

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  resolve: {
    plugins: [
      PnpWebpackPlugin,
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },
  plugins : [  
    // ** NOT in here **
    // PnpWebpackPlugin.moduleLoader(module)
  ]
  // ... etc
};

Note that it goes into both the resolve and resolveLoader plugins arrays

[arcanis]

Might be good to check for this kind of thing and print an helpful error message 😃

[ankurk91]

@jennale
Thank you so much for pointing out this.
I was able to successfully use pnp feature.

@arcanis
Agree, it would be nice to warn user when they mistakenly place the plugin at wrong place.

[imjeremyhi]

I'm getting this issue but have it configured in the right place. I'm working in a webpack 3 repo. Does this have any incompatibility issues between webpack 3 and 4? @arcanis
resolve: { plugins: [ PnpWebpackPlugin, ], }, resolveLoader: { plugins: [ PnpWebpackPlugin.moduleLoader(module), ], },

[arcanis]

Yes, webpack 3 (actually enhanced-resolve 3) uses a different API for plugins. It should be fairly easy to support both styles of APIs though, if you'd like to start a PR!

[jscheid]

I have something working and going to push a PR soon.

@arcanis Do you think this is necessary for older enhanced-resolve versions and if so, is it covered by the tests?

pnp-webpack-plugin/index.js

Lines 60 to 66 in b09fbdc

	resolver.getHook(`file`).intercept({
	register: tapInfo => {
	return tapInfo.name !== `SymlinkPlugin` ? tapInfo : Object.assign({}, tapInfo, {fn: (request, resolveContext, callback) => {
	callback();
	}});
	}
	});

[arcanis]

I'm not sure what's the behavior on older enhanced-resolve releases, but the intent is that symlinks shouldn't be resolved (otherwise it breaks peer dependencies).

It seems it isn't tested at the moment - if you can add one it would be perfect (you can just create a dummy symlink in the fixtures folder and use that to make sure that it isn't resolved by enhanced-resolve).

[xiayuxiaoyan]

when i using awesome-typescript-loader.TsConfigPathsPlugin, this function was used. in webpack4. i got the same error