[Enhancement] Support extractCss in webpack 4

[Diolor]

Mini-css-extract-plugin is the successor of currently used extract-text-webpack-plugin for webpack 4.

Using extractCss=true in webpack 4 fails with:

basic chunk optimization/PROJECT_DIR/node_modules/webpack/lib/Chunk.js:465
		throw new Error("Chunk.entrypoints: Use Chunks.addGroup instead");
		^

Error: Chunk.entrypoints: Use Chunks.addGroup instead
    at Chunk.set (/PROJECT_DIR/node_modules/webpack/lib/Chunk.js:465:9)
    at /PROJECT_DIR/node_modules/extract-text-webpack-plugin/dist/index.js:176:40
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/PROJECT_DIR/node_modules/extract-text-webpack-plugin/dist/index.js:171:18)
    at Compilation.applyPluginsAsyncSeries (/PROJECT_DIR/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/PROJECT_DIR/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:602:8)
    at applyPluginsParallel.err (/PROJECT_DIR/node_modules/nuxt/node_modules/webpack/lib/Compiler.js:504:17)
    at /PROJECT_DIR/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/PROJECT_DIR/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:505:11)
    at processModuleDependencies.err (/PROJECT_DIR/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:475:14)
    at process._tickCallback (internal/process/next_tick.js:112:11)
error An unexpected error occurred: "Command failed.
Exit code: 1

_{This question is available on Nuxt.js community (#c2692)}

[pi0]

Hi. What version of nuxt are you using? We have just recently migrated nuxt to use mini-css :)

[Diolor]

Oh you guys are fast ^^

Nuxt@1.4.0 (which has internally dependency to webpack@3.11.0)

Is the migration coming with 2.0.0?

[pi0]

@Diolor Will come with 2.0.0 soon 🥃

[Diolor]

🍻

[essamamdani]

I am having same issue occurred.

nuxt:build App root: /Users/essamamdani/Desktop/auth-moduleWork +0ms
nuxt:build Generating /Users/essamamdani/Desktop/auth-moduleWork/.nuxt files... +0ms
nuxt:build Generating files... +62ms
nuxt:build Generating routes... +7ms
nuxt:build Building files... +26ms
nuxt:build Adding webpack middleware... +1s
████████████████████ 76% basic chunk optimization/Users/essamamdani/Desktop/auth-moduleWork/node_modules/webpack/lib/Chunk.js:465
throw new Error("Chunk.entrypoints: Use Chunks.addGroup instead");
^

Error: Chunk.entrypoints: Use Chunks.addGroup instead
at Chunk.set (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/webpack/lib/Chunk.js:465:9)
at /Users/essamamdani/Desktop/auth-moduleWork/node_modules/extract-text-webpack-plugin/dist/index.js:176:40
at Array.forEach ()
at Compilation. (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/extract-text-webpack-plugin/dist/index.js:171:18)
at Compilation.applyPluginsAsyncSeries (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/tapable/lib/Tapable.js:206:13)
at Compilation.seal (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:602:8)
at applyPluginsParallel.err (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/webpack/lib/Compiler.js:504:17)
at /Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:505:11)
at processModuleDependencies.err (/Users/essamamdani/Desktop/auth-moduleWork/node_modules/nuxt/node_modules/webpack/lib/Compilation.js:475:14)
at process._tickCallback (internal/process/next_tick.js:112:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nuxtjs/auth@4.0.0-rc.3 dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nuxtjs/auth@4.0.0-rc.3 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/essamamdani/.npm/_logs/2018-03-25T21_32_15_343Z-debug.log

"eslintIgnore": [
"lib/auth/plugin.js"
],
"files": [
"lib"
],
"jest": {
"testEnvironment": "node",
"collectCoverage": true
},
"dependencies": {
"@nuxtjs/axios": "^5.1.1",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"bootstrap-vue": "^2.0.0-rc.2",
"cookie": "^0.3.1",
"css-loader": "^0.28.11",
"dotprop": "^1.0.2",
"element-ui": "^1.4.13",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.1.0",
"js-cookie": "^2.2.0",
"mysql2": "^1.5.3",
"node-sass": "^4.8.3",
"nuxt": "^1.4.0",
"sass-loader": "^6.0.7",
"sequelize": "^4.37.4",
"socket.io": "^2.0.4",
"socket.io-client": "^2.0.4",
"vue-loader": "^14.2.2",
"vue-plyr": "^3.0.0",
"webpack": "^4.2.0"
},
"devDependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"body-parser": "^1.18.2",
"codecov": "latest",
"cookie-parser": "^1.4.3",
"cross-env": "^5.0.1",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jest": "^21.15.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "latest",
"eslint-plugin-vue": "^4.4.0",
"express": "^4.16.3",
"express-jwt": "^5.3.1",
"jest": "^22.4.3",
"jsdom": "latest",
"nodemon": "^1.11.0",
"puppeteer": "^1.2.0",
"standard-version": "latest"
}

[pi0]

@essamamdani But you can't use webpack 4 with Nuxt 1.x. There are MANY changes. You can try changing nuxt dependency in your package.json into "nuxt-edge": "^2.0.0-25366812.8b82168" for testing only :)

[essamamdani]

@pi0 You are so quick. Let me check now.

[essamamdani]

@pi0, I need to run expressjs server include the nuxt-edge dependency?

[pi0]

No it is just latest nuxt.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.