[BUG] NX 13 and Webpack5 Support

[SquareLi]

Describe the bug We are upgrading the app to nx 13, and nx 13 seems to only support webpack5. We are getting the errors below when building the serverless app:

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/xxx/Development/Work/my-app/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/xxx/Development/Work/my-app/node_modules/ts-loader/dist/index.js:14:21)

The root of the issue is the run-webpack function. In Nx13, this function is updated and moved from the @nrwl/workspace to @nrwl/node. So we need a way to pick the correct version based on the version of nx

Is there a way to use nx13 with this plugin?

To Reproduce Steps to reproduce the behavior:

1. Upgrade to nx 13
2. run nx build my-serverless-app

Check which provider is affected: [x] AWS

Check which framework is affected: [] Angular [] Nodejs [x] Serverless [] Lambda [] Infrastructure as a code

Additional context

[wickstargazer]

Hey guys,

I tried migrating to nx-13 and got stuck and webpack typings used to build and dependency tree shaking

Would you guys have time to chip in?

We have a slack channel we can discuss and go thru it together

[SquareLi]

Sure, how can I join the channel?

[wickstargazer]

Use the link here

https://join.slack.com/t/flowaccountcommunity/shared_invite/zt-10dw6janp-JVE7k6y7OXf8ET9t2Y2BKQ

[wickstargazer]

the migrated workspace is in migrate/nx-13 branch

the error is

libs/nx-serverless/src/utils/depcheck.ts:42:20 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

42     webpackStats?: Stats.ToJsonOutput,
                      ~~~~~
libs/nx-serverless/src/utils/node.config.ts:27:7 - error TS2322: Type '(context: any, request: any, callback: Function) => any' is not assignable to type 'ExternalItem'.
  Type '(context: any, request: any, callback: Function) => any' is not assignable to type '(data: ExternalItemFunctionData, callback: (err?: Error, result?: string | boolean | string[] | { [index: string]: any; }) => void) => void'.

27       function (context, request, callback: Function) {
         ~~~~~~~~
libs/nx-serverless/src/utils/node.config.ts:42:10 - error TS2349: This expression is not callable.
  Type 'typeof import("D:/projects/flowaccount/nx-plugins/node_modules/webpack-merge/dist/index")' has no call signatures.

42   return mergeWebpack(getBaseWebpackPartial(options), getNodePartial(options));
            ~~~~~~~~~~~~
libs/nx-serverless/src/utils/packagers/index.ts:39:10 - error TS2724: '"webpack"' has no exported member named 'compilation'. Did you mean 'Compilation'?

39 import { compilation, Stats } from 'webpack';
            ~~~~~~~~~~~
libs/nx-serverless/src/utils/packagers/index.ts:67:10 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

67   stats: Stats.ToJsonOutput,
            ~~~~~
libs/nx-serverless/src/utils/types.ts:82:18 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

82   webpackStats?: Stats.ToJsonOutput,
                    ~~~~~
libs/nx-serverless/src/utils/webpack.stats.ts:16:20 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

16     webpackStats?: Stats.ToJsonOutput,
                      ~~~~~
libs/nx-serverless/src/utils/webpack.stats.ts:58:29 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

58   getExternalModules(stats: Stats.ToJsonOutput) {
                               ~~~~~

libs/nx-serverless/src/utils/depcheck.ts:42:20 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

42     webpackStats?: Stats.ToJsonOutput,
                      ~~~~~
libs/nx-serverless/src/utils/node.config.ts:27:7 - error TS2322: Type '(context: any, request: any, callback: Function) => any' is not assignable to type 'ExternalItem'.
  Type '(context: any, request: any, callback: Function) => any' is not assignable to type '(data: ExternalItemFunctionData, callback: (err?: Error, result?: string | boolean | string[] | { [index: string]: any; }) => void) => void'.

27       function (context, request, callback: Function) {
         ~~~~~~~~
libs/nx-serverless/src/utils/node.config.ts:42:10 - error TS2349: This expression is not callable.
  Type 'typeof import("D:/projects/flowaccount/nx-plugins/node_modules/webpack-merge/dist/index")' has no call signatures.

42   return mergeWebpack(getBaseWebpackPartial(options), getNodePartial(options));
            ~~~~~~~~~~~~
libs/nx-serverless/src/utils/packagers/index.ts:39:10 - error TS2724: '"webpack"' has no exported member named 'compilation'. Did you mean 'Compilation'?

39 import { compilation, Stats } from 'webpack';
            ~~~~~~~~~~~
libs/nx-serverless/src/utils/packagers/index.ts:67:10 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

67   stats: Stats.ToJsonOutput,
            ~~~~~
libs/nx-serverless/src/utils/types.ts:82:18 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

82   webpackStats?: Stats.ToJsonOutput,
                    ~~~~~
libs/nx-serverless/src/utils/webpack.stats.ts:16:20 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

16     webpackStats?: Stats.ToJsonOutput,
                      ~~~~~
libs/nx-serverless/src/utils/webpack.stats.ts:58:29 - error TS2702: 'Stats' only refers to a type, but is being used as a namespace here.

58   getExternalModules(stats: Stats.ToJsonOutput) {
                               ~~~~~

error Command failed with exit code 1.

[tstackhouse]

That looks like it could be related to changes in webpack 5’s exports. I’ve not touched it yet, I may be able to dig around tomorrow, but at least in my usage I’m still not on the latest version of anything yet.

[SquareLi]

sorry i was out for a few days. Is the invite already expired? I'm not able to find any workspace with my github email.

[wickstargazer]

https://join.slack.com/t/flowaccountcommunity/shared_invite/zt-125cti9bb-KupsvzTn3G4KdOZ43qBWiA

Never expires now

[wickstargazer]

branch migrate/nx-13 is building now. need to test and make sure no effects to

• packager from stats-compilation object
• depcheck

[wickstargazer]

now i am stuck here, while building the webpack. Anyone can help?

(node:20636) [DEP_WEBPACK_MODULE_ERRORS] DeprecationWarning: Module.errors was removed (use getErrors instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:20636) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'map' of undefined
    at D:\projects\flowaccount\nx-plugins\node_modules\copy-webpack-plugin\dist\index.js:483:23
    at fn (D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\Compilation.js:507:9)
    at Hook.eval [as callAsync] (eval at create (D:\projects\flowaccount\nx-plugins\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\projects\flowaccount\nx-plugins\node_modules\tapable\lib\Hook.js:18:14)
    at cont (D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\Compilation.js:3052:34)
    at D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\Compilation.js:3100:10
    at symbolIterator (D:\projects\flowaccount\nx-plugins\node_modules\neo-async\async.js:3485:9)
    at done (D:\projects\flowaccount\nx-plugins\node_modules\neo-async\async.js:3527:9)
    at D:\projects\flowaccount\nx-plugins\node_modules\neo-async\async.js:2830:7
    at done (D:\projects\flowaccount\nx-plugins\node_modules\neo-async\async.js:2865:11)
    at D:\projects\flowaccount\nx-plugins\node_modules\neo-async\async.js:2818:7
    at D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\Compilation.js:4621:18
    at D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (D:\projects\flowaccount\nx-plugins\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\Cache.js:107:20)
    at ItemCacheFacade.store (D:\projects\flowaccount\nx-plugins\node_modules\webpack\lib\CacheFacade.js:137:15)
(node:20636) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20636) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[wickstargazer]

we need to migrate https://github.com/flowaccount/nx-plugins/blob/migrate/nx-13/libs/nx-serverless/src/builders/build/build.impl.ts which is using https://github.com/flowaccount/nx-plugins/blob/migrate/nx-13/libs/nx-serverless/src/utils/run-webpack.ts to use https://github.com/nrwl/nx/blob/master/packages/node/src/executors/webpack/webpack.impl.ts