WebpackOptionsValidationError: configuration misses the property 'entry'

[bauer01]

Hi,
I've just tried this tool an its awesome!
But with a few problems. When I follow the isntructions from readme and run

sails lift

It fails with an error:

debug: sails-hook-webpack-vue: Creating webpack compiler ...
error: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration misses the property 'entry'.
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
    at webpack (C:\Users\bauer\dev\gitlab\kreatiq\sweet-app\node_modules\webpack\lib\webpack.js:19:9)
    at Hook.configure (C:\Users\bauer\dev\gitlab\kreatiq\sweet-app\node_modules\sails-hook-webpack-vue\index.js:81:23)
    at Hook.wrapper [as configure] (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\@sailshq\lodash\lib\index.js:3250:19)
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\lib\app\private\loadHooks.js:170:20
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:181:20
    at Object.async.forEachOf.async.eachOf (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:233:13)
    at Object.async.forEach.async.each (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:209:22)
    at configure (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\lib\app\private\loadHooks.js:167:17)
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:713:13
    at iterate (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:262:13)
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:274:29
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:44:16
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:718:17
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:167:37
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:52:16
    at done (C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:246:17)
    at C:\Users\bauer\AppData\Roaming\npm\node_modules\sails\node_modules\async\lib\async.js:44:16
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

I've tried to setup an entry in config/webpack.js:

module.exports = {
  webpack: {
    options: {
      context: path.resolve(__dirname, '../webpack'),
      entry: './src/main',
    },
    middlewares: {
      // after: 'router',
      hot: { quiet: true },
      dev: { quiet: false },
      history: {}
    },
  }
}

That helps a little bit but with next error:

error: Hash: 4430735a57a8b486c3f9
error: Time: 1696ms
error: chunk    {0} main.js (main) 285 kB [entry] [rendered]
error:    [0] ./node_modules/vue/dist/vue.runtime.esm.js 205 kB {0} [built]
error:    [1] (webpack)/buildin/global.js 488 bytes {0} [built]
error:    [2] ./webpack/src/main.js 360 bytes {0} [built]
error:    [3] ./node_modules/timers-browserify/main.js 1.36 kB {0} [built]
error:    [4] ./node_modules/setimmediate/setImmediate.js 6.47 kB {0} [built]
error:    [5] ./node_modules/process/browser.js 5.42 kB {0} [built]
error:    [6] ./webpack/src/router/index.js 251 bytes {0} [built]
error:    [7] ./node_modules/vue-router/dist/vue-router.esm.js 65.6 kB {0} [built]
error:
error: ERROR in ./webpack/src/main.js
error: Module not found: Error: Can't resolve './App' in 'C:\Users\bauer\dev\gitlab\kreatiq\sweet-app\webpack\src'
error:  @ ./webpack/src/main.js 4:0-23
error:
error: ERROR in ./webpack/src/router/index.js
error: Module not found: Error: Can't resolve '@/components/HelloWorld' in 'C:\Users\bauer\dev\gitlab\kreatiq\sweet-app\webpack\src\router'
error:  @ ./webpack/src/router/index.js 3:0-48
error:  @ ./webpack/src/main.js

Sails: 0.12.14

[bauer01]

seems to be a problem related to changes in vuejs-templates/webpack#975

[fabiankaimer]

I tried to solve the problem by following the steps above and adding the ".vue"-File extension to all files within the document. Anyways, the problem is a missing appropriate loader for the ".vue"-filetype as stated in the error message:

[Tarrask]

The issue is clearly the new Promise returned by the devConfig.

To work around that until a more robust solution is found is to edit the file webpack/build/webpack.dev.conf.js and replace lines from 53 to the end of the file by just this line:

module.exports = devWebpackConfig;

You also need to install the webpack-hot-middleware:

npm install webpack-hot-middleware

diff --git a/webpack/build/webpack.dev.conf.js b/webpack/build/webpack.dev.conf.js
index d344b96..ce1885b 100644
--- a/webpack/build/webpack.dev.conf.js
+++ b/webpack/build/webpack.dev.conf.js
@@ -50,28 +50,4 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   ]
 })

-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${config.dev.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
-})
+module.exports = devWebpackConfig;