configure-webpack doesn't seem to be running for Vue apps

[westhechiang]

Current Behavior

I modified configure-webpack but didn't notice a change in my newly created vue applications within my nx monorepo. To further test, I modified configure-webpack.js to:

/*
 * Modify the webpack config by exporting an Object or Function.
 *
 * If the value is an Object, it will be merged into the final
 * config using `webpack-merge`.
 *
 * If the value is a function, it will receive the resolved config
 * as the argument. The function can either mutate the config and
 * return nothing, OR return a cloned or merged version of the config.
 *
 * https://cli.vuejs.org/config/#configurewebpack
 */
module.exports = (config) => {
  throw new Error('This error does not get thrown');
};

and ran yarn nx serve my-app and no error was thrown.

Expected Behavior

I expected the error to be thrown.

Steps to Reproduce

1. Generate new nx-plus vue app in an nx monorepo, using NX 13
2. modify configure-webpack to throw an error
3. run app

Failure Logs

No logs, app shouldn't run with that error, right?

Environment

    "@nrwl/cli": "13.9.6",
    "@nrwl/cypress": "^13.0.0",
    "@nrwl/devkit": "13.9.6",
    "@nrwl/eslint-plugin-nx": "13.9.6",
    "@nrwl/jest": "^13.0.0",
    "@nrwl/linter": "^13.0.0",
    "@nrwl/nest": "13.9.6",
    "@nrwl/node": "13.9.6",
    "@nrwl/nx-cloud": "13.2.2",
    "@nrwl/react": "13.9.6",
    "@nrwl/react-native": "13.9.6",
    "@nrwl/storybook": "13.9.6",
    "@nrwl/tao": "13.9.6",
    "@nrwl/web": "13.9.6",
    "@nrwl/workspace": "13.9.6",
    "@nx-go/nx-go": "^2.4.0",
    "@nx-plus/vue": "^13.0.0",

yarn run v1.22.18
$ nx report

NX Report complete - copy this into the issue template

Node : 14.17.0
OS : darwin x64
yarn : 1.22.18

nx : 13.9.6
@nrwl/angular : Not Found
@nrwl/cypress : 13.10.1
@nrwl/detox : 13.9.6
@nrwl/devkit : 13.9.6
@nrwl/eslint-plugin-nx : 13.9.6
@nrwl/express : Not Found
@nrwl/jest : 13.10.1
@nrwl/js : 13.9.6
@nrwl/linter : 13.10.1
@nrwl/nest : 13.9.6
@nrwl/next : Not Found
@nrwl/node : 13.9.6
@nrwl/nx-cloud : 13.2.2
@nrwl/nx-plugin : Not Found
@nrwl/react : 13.9.6
@nrwl/react-native : 13.9.6
@nrwl/schematics : Not Found
@nrwl/storybook : 13.9.6
@nrwl/web : 13.9.6
@nrwl/workspace : 13.9.6
typescript : 4.4.4
rxjs : 7.4.0

Community plugins:
@nx-go/nx-go: 2.4.0
@nx-plus/vue: 13.0.0
nx-react-native-expo: 0.0.9
nx-vue3-vite: 0.14.1

Done in 0.80s.

[westhechiang]

I stumbled across this when I was trying to get vuetify 3 running in a new nx-plus/vue app.

It seems like everything works except the SASS / SCSS styles aren't rendering so I decided to give this a try but didn't notice a change which led to the above investigation:

[gregveres]

I think I just ran into this too. I am trying to convert my vue 2 app over to nx. I need to run the webpack-assets-manifest plugin and the vuetify-loader plugin. I have defined my configure-webpack.js file in my app directory like this:

const WebpackAssetsManifest = require('webpack-assets-manifest');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = (config) => {
      config.plugins.push(new WebpackAssetsManifest({
        output: 'asset-manifest.json'
      }));
      config.plugins.push(new VuetifyLoaderPlugin());
      // config.plugins.push(new BundleAnalyzerPlugin());

      return config;
  }

I know the WebpackAsseetsManifest plugin isn't getting installed because there is no file being output from it. It looks like this mechanism is broken. I don't know if this is nx-plus/vue thing or an Nx thing.

[gregveres]

@BuckyMaler can you tell us if we are defining our configure-webpack.js files correctly or is this a bug?

[gregveres]

I see the vue-config.js contents are being constructured and then passed to vue cli. Interesting. I don't understand why this isn't working because I see the test if webpack-config.js exists and if it does, that it gets assigned the configureWebpack in the options file. I have tried both this active function approach and the simplier set module.exports to an object. Neither of them setup the plugins that I need.

I went into the code and put a console.log(inlineOptions) in executors.js to see what options were being passed to vue-cli. I think I have discovered an interesting thing. Here is the output:

{
  chainWebpack: [Function: chainWebpack],
  publicPath: '/sc/',
  filenameHashing: true,
  productionSourceMap: true,
  css: { extract: true, sourceMap: false, requireModuleExtension: true },
  configureWebpack: Promise { <pending> },
  transpileDependencies: [ 'vuetify' ]
}

Notice that configureWebpack is a pending promise. I wonder if there is a missing await and we are sending the config down with a blank configureWebpack because the load of webpack-configure.js hasn't finished yet.

I will see if I can dig some more.

[gregveres]

@BuckyMaler, @ZachJW34
The issue here is that the require(configureWebpackPath) in utils.ts isn't awaited. It can either be awaited there or it can be awaited here

This is preventing any sort of ability to configure webpack at the moment. This seems like a pretty big issue. I know it has stopped me in my tracks.

[gregveres]

@BuckyMaler, @ZachJW34
I have created a PR with a fix for this issue. I have tested the fixed code on my own repo and I am now able to load the webpack plugins that I need to use for my app.

I would really appreciate it if you could merge this PR and get a new version released quickly so I can move forward with moving my app into an NX workspace.

Thank you for your time!

[ZachJW34]

@gregveres I've published v13.0.1 with your fix, try it out and let me know how it works!

[gregveres]

@ZachJW34 I am on it. Thank you for turning that around so quickly!

[gregveres]

@ZachJW34 it works great. I think we can consider this issue resolved.
And now that I see how things work, I might take a crack at adding plugInOptions or pwa options.

[ZachJW34]

I was thinking about returning to the vue.config support. I might create a separate builder for it, seems like it might solve a lot of problems people are having with vue configuration options

[gregveres]

Having just gone through it, I think the biggest problem is lack of documentation. I was thinking of writing up the steps I just went through to get my single app repo Vue 2 app into Nx using Nx-plus/vue. I really had to do a lot of digging in the open and closed issues and PRs to figure out how to do it.

But now that it is (mostly) done, I am ok with where I had to put all of the different bits and pieces. I agree with you that most of what is needed is there. I think the notable missing pieces are the plugInOptions and PWA. And I think I worked around PWA by defining it package.json because the PWA plugin allows that.

for the plugInOptions, I was using that to define options for vue-i18n. I had to delete the vue-cli plugin for it to get the build working because there was nowhere else I could define it.

All that to say, I think you guys are close and a good document of "This is where to put all the bits and pieces from vue.config.js" would go a long way to resolving people's issues.

I know that docs are tricky. What I found was that I arrived to your plugin with zero knowledge of Nx, but your readme assumes a ton of Nx knowlege that I think people who want to use your plugin wont have. After I learned some Nx knowledge, reading your Readme.md file made a lot more sense.