Error while installing & serve:ing with both NPM & Yarn

[bromso]

I've been trying to install and get this to work. When I tried using NPM, I got the same type of errors as this issue: https://github.com/ZachJW34/nx-plus/issues/189 , both in NPM 7 & using lower versions of NPM like the recommendation in the issue above.

So I turned to Yarn. But I still are getting errors and can't get Nuxt to work.

Yarn -v
1.22.10

node -v
14.17.6

nx serve my-app

First line of errors

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.

Second line of errors

ERROR in ./dist/apps/my-app/.nuxt/client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/userX/Sites/nx-test-repo/dist/apps/my-app/.nuxt/client.js: Cannot find module '@babel/preset-env/lib/utils'
Require stack:
- /Users/userX/Sites/nx-test-repo/node_modules/@nuxt/babel-preset-app/src/polyfills-plugin.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nuxt/babel-preset-app/src/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/userX/Sites/nx-test-repo/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/userX/Sites/nx-test-repo/node_modules/@babel/core/lib/config/files/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/@babel/core/lib/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/babel-loader/lib/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/loader-runner/lib/loadLoader.js
- /Users/userX/Sites/nx-test-repo/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/userX/Sites/nx-test-repo/node_modules/webpack/lib/NormalModule.js
- /Users/userX/Sites/nx-test-repo/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/userX/Sites/nx-test-repo/node_modules/webpack/lib/Compiler.js
- /Users/userX/Sites/nx-test-repo/node_modules/webpack/lib/webpack.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nuxt/webpack/dist/webpack.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nuxt/builder/dist/builder.js
- /Users/userX/Sites/nx-test-repo/node_modules/nuxt/dist/nuxt.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nx-plus/nuxt/src/builders/server/builder.js
- /Users/userX/Sites/nx-test-repo/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/userX/Sites/nx-test-repo/node_modules/@angular-devkit/architect/node/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nrwl/tao/src/commands/ngcli-adapter.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nrwl/tao/src/commands/run.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nrwl/tao/index.js
- /Users/userX/Sites/nx-test-repo/node_modules/@nrwl/cli/lib/run-cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at Module.require (/Users/userX/Sites/nx-test-repo/node_modules/@nrwl/tao/src/compat/compat.js:7:40)
    at require (internal/modules/cjs/helpers.js:92:18)
    at PluginPass.Program (/Users/userX/Sites/nx-test-repo/node_modules/@nuxt/babel-preset-app/src/polyfills-plugin.js:15:34)
    at newFn (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/context.js:131:19)
    at Function.traverse.node (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/index.js:82:17)
    at traverse (/Users/userX/Sites/nx-test-repo/node_modules/@babel/traverse/lib/index.js:62:12)
    at transformFile (/Users/userX/Sites/nx-test-repo/node_modules/@babel/core/lib/transformation/index.js:105:29)

[mwidmann]

Should somebody else stumble on this while trying this out, here's the solution I found on StackOverflow

Adding the following to my nuxt.config.js fixes this:

export default {
  //  ....
  build: {
    babel: {
      presets({isServer}) {
        const targets = isServer ? { node: 'current' } : { ie: 11 }
        return [
          [ require.resolve("@babel/preset-env"), { targets }  ]
        ]
      },
      plugins: [
        "@babel/syntax-dynamic-import",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator"
      ]
    },
  }
  // ....
}

I'm not much further than this yet, but at least it allows me to proceed.