Did you upgrade the extract-text-webpack-plugin to latest version?

@sokra To which version? I'm using v3.0.2 which is -- according to this page -- the latest available stable version. So from my point of view, yes, I'm using the latest version.

fyi: I've just updated the PR to set the version explicitly, see https://github.com/julmot/form-components/pull/9/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R38

Just got the same issue directly after installing webpack

webpack 4.0.0
node 8.9.3
text-webpack-plugin 3.0.2

I think you have to install v4.0.0-alpha.0 of text-webpack-plugin.

As you can see in the release notes under Code Refactoring: ExtractTextPlugin: update to new plugin system and API's.

Can't imagine that relaying on alpha releases is intended. (haven't checked if it works)

using v4.0.0-alpha.0 worked for me

@sokra If using v4.0.0-alpha.0 works (can't confirm currently), is this the way to go?

I'm no longer using extract-text-webpack-plugin anywhere, is there a way to find out which plugin is generating this warning?

node --trace-depracation

I had the same problem.but resolved it using version 3.11.0

@sokra What's the solution in this regard?

@julmot Try with extract-text-webpack-plugin@next

extract-text-webpack-plugin
npm i -D extract-text-webpack-plugin@next

Works with v4.0.0-alpha.0

No Works with extract-text-webpack-plugin v4.0.0-beta.0

Doesn't work for me either, just gives a different error message:

Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'resolveUrlLoader' of undefined

@julmot Could you please submit an issue for that error?

Hello guys, i've found the way to resolve this problem. You can check my config here, hope it will help you.

http://io.misostack.com/posts/webpack-003/

I'm sure using extract-text-webpack-plugin@next works if you're getting the error from extract-text-webpack, but what if you're not?

extract-text-webpack-plugin@next works for me

@montogeek The issue that occured afterwards seems to be covered in: bholloway/resolve-url-loader#79

@sokra It's annoying that you're ignoring my questions.

In order to use webpack@4.0.1 you must install extract-text-webpack-plugin@4.0.0-beta.0. What you are seeing is not an error but a deprecation notice. If there actually is an error, you could open an issue on ETWP repository.

@ooflorent I assume the reason there are so many people reporting this as an error and not just a notice is that something else is failing silently, and without anywhere else to look people believe this to be the error. I for one cannot get Webpack 4 working, but no error messages.

@slapbox try to comment plugins and loader step by step

I'm still getting:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

with:

"html-webpack-plugin": "^3.0.4"
"extract-text-webpack-plugin": "^4.0.0-beta.0"

same with or without "extract-text-webpack-plugin": "^4.0.0-beta.0"

Also having same issue:

Running webpack ...

(node:26427) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/var/www/example.com/node_modules/webpack/lib/Chunk.js:460
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/var/www/example.com/node_modules/webpack/lib/Chunk.js:460:9)
    at /var/www/example.com/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /var/www/example.com/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/example.com/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/var/www/example.com/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/var/www/example.com/node_modules/webpack/lib/Compilation.js:881:27)
    at hooks.make.callAsync.err (/var/www/example.com/node_modules/webpack/lib/Compiler.js:464:17)
    at _done (eval at create (/var/www/example.com/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err1 (eval at create (/var/www/example.com/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
    at _addModuleChain (/var/www/example.com/node_modules/webpack/lib/Compilation.js:749:12)
    at processModuleDependencies.err (/var/www/example.com/node_modules/webpack/lib/Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

package.json:

user@server:/var/www/example.com# cat package.json 
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.17.0",
        "webpack-cli": "^2.0.10",
        "webpack-notifier": "^1.5.1"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "bootstrap-sass": "^3.3.7",
        "extract-text-webpack-plugin": "4.0.0-beta.0",
        "jquery": "^3.3.1",
        "node-sass": "^4.7.2",
        "sass-loader": "^6.0.6",
        "webpack": "^4.0.1"
    }
}

Also getting yarn run encore dev error which is weird:

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c /var/www/example.com/node_modules/.bin/encore dev
Directory: /var/www/example.com
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/var/www/example.com/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It's worth mentioning that I was using symfony 4 we-encore installation today. And also I was installing same thing about 5 day ago without any of those issues.

I don't have extract-text-webpack-plugin installed but I'm still getting the deprecation warning: yarn list | grep text-web returns nothing.

edit: running with --trace-deprecation shows it's my use of CircularDependencyPlugin

I have a same error too.

before

  "devDependencies": {
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "gulp": "^3.8.8",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12"
  },

after
"devDependencies": {
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0", // updated by npm i -D extract-text-webpack-plugin@next fnpm i -D extract-text-webpack-plugin@next`
"gulp": "^3.8.8",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12"
},

and I've solve it.

"devDependencies": {
"extract-text-webpack-plugin": "^4.0.0-beta.0",
},

Still get the error

For everyone commenting here about using the latest version of X and still having the notices: Please run webpack using node --trace-deprecation ./node_modules/.bin/webpack. This is the only way to identify which package is using deprecated APIs.

If you were doing this:

webpack --bail --env dist -p

Then please try this:

node --trace-deprecation ./node_modules/.bin/webpack --bail --env dist -p

If the stack trace shows that extract-text-webpack-plugin is responsible for the notice, please open an issue on its repository.

node --trace-deprecation ./node_modules/.bin/webpack --config is requiered
But thanks for this advice. :)

(node:10213) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at FriendlyErrorsWebpackPlugin.apply (./node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:39:14)
    at webpack (./node_modules/webpack/lib/webpack.js:37:12)
    at processOptions (./node_modules/webpack-cli/bin/webpack.js:436:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
    at Function.Module.runMain (module.js:703:11)
    at startup (bootstrap_node.js:193:16)
    at bootstrap_node.js:617:3

So friendly-errors-webpack-plugin is the source of this warning.
Thank you!

@MartinX3 I've submitted a PR (see geowarin/friendly-errors-webpack-plugin#63)

Sorry to say, migrate to Webpack 4 now, sucks!!!

I'm no longer using extract-text-webpack-plugin anywhere
The same notice here

I had the same problem and the deprecation notice is linked to uglifyjs-webpack-plugin.

I checked the version installed via npm:

npm list uglifyjs-webpack-plugin
└─┬ webpack@4.1.1
  └── uglifyjs-webpack-plugin@1.2.0

I wanted to use the why function of yarn and I was surprised to not have the .hook warning anymore and justly:

❯ yarn list uglifyjs-webpack-plugin
└─ uglifyjs-webpack-plugin@1.2.4

Seems like npm is not installing the latest dependency for uglifyjs-webpack-plugin, I can't explain why but this seems to be the problem.
Hope it helps

@Fenntasy npm/yarn cache clear && npm/yarn install

Well...

npm cache clear
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

To be sure, I tried npm cache verify but it does not change anything.
npm cache clear --force did not change anything either (which is somewhat reassuring considereing the previous message, it really self heal, it just still has an error).
I even tried upgrading npm to 5.7.1 but it did not change the fact that npm does not want to install the last version of uglifyjs-webpack-plugin

@Fenntasy Delete the node_modules folder and try installing again

I did that between every try ^^'.

I'm not saying that because I have the problem, just pointing to a potential way of discovering the problem or a way out (using yarn).

I have tried all the solutions above and still get the same error. I even went as far as removing all plugins from my config file and got the same error.
When I try to do a node trace to figure out the cause of the problem, I get the error;

ERROR in Entry module not found: Error: Can't resolve './src' in '/home/jioke/lab/altalabs/ui'

What could I possibly be doing wrong?

@kinsomicrote please open an issue to help us diagnose the problem.

For anyone still reading this and struggling with extract-text-webpack-plugin, first off I will say that the @next solution worked for me.

However, it seems that extract-text-webpack-plugin is being replaced with mini-css-extract-plugin for weback4.

See this issue for reference.

Just remember, mini-css-extract-plugin requires webpack >= 4.1

Sean Larkin just said in his blog post about the release of Webpack 4 that it won't support ExtractTextPlugin anymore. CSS files will be simply added to the entry points for bundling (which is way better).

extract-text-webpack-plugin@next works for me

I have used mini-css-extract-plugin but this issue still exist. Are there other libraries will also causes this issue?

Same error with "webpack": "^4.4.1" and "extract-text-webpack-plugin": "^3.0.2".

Fixed with extract-text-webpack-plugin@next (currently extract-text-webpack-plugin@4.0.0-beta.0).

Here is a quick summary for everyone encountering this message.

What is this message?

webpack 4 is using a new plugin system and deprecates the previous APIs. There are 2 new warnings:

DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

These are warnings. They are outputted to the console to warn our users that they are using an outdated API and should migrate to the newest.

How bad are these warnings?

They are only a textual information, not errors. If you see a DeprecationWarning you can ignore it until you have to update to the next major version of webpack.

How to get rid of them?

Update your webpack dependencies (webpack, loaders, plugins, …). If all your dependencies have done the migration, the warnings should be gone. If they are not and you can help us and the plugin authors to fix this!

1. Identify who raises the warning by getting the stracktrace:

   • add process.traceDeprecation = true at the top of your config
   • or run you node process using the --trace-deprecation flag

2. The stracktrace will be similar to this:

   (node:10213) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
       at FriendlyErrorsWebpackPlugin.apply (./node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:39:14)
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            this plugin is using a                                it is defined in
               deprecated API                                       this package
   
       at webpack (./node_modules/webpack/lib/webpack.js:37:12)
       at processOptions (./node_modules/webpack-cli/bin/webpack.js:436:16)
       at <anonymous>
       at process._tickCallback (internal/process/next_tick.js:160:7)
       at Function.Module.runMain (module.js:703:11)
       at startup (bootstrap_node.js:193:16)
       at bootstrap_node.js:617:3
   

   In the above stacktrace, FriendlyErrorsWebpackPlugin is causing the warning.

3. Open an issue on the plugin's (or loader's) repository and include the stacktrace so its author could identify what is causing the warning.

If you absolutely want to remove them, you can disable the deprecation notices within your configuration by adding the following statement:

// Ignore all deprecations and hope that nothing will silently break in the future.
process.noDeprecation = true;