[BUG] NX 13 and Webpack5 Support #123

SquareLi · 2022-01-13T03:03:19Z

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:

Upgrade to nx 13
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

The text was updated successfully, but these errors were encountered:

wickstargazer · 2022-01-15T07:47:53Z

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 · 2022-01-15T08:43:16Z

Sure, how can I join the channel?

wickstargazer · 2022-01-15T09:29:04Z

Use the link here

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

wickstargazer · 2022-01-15T11:35:12Z

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 · 2022-01-16T17:54:32Z

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 · 2022-01-25T14:45:02Z

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 · 2022-01-25T16:00:52Z

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

Never expires now

wickstargazer · 2022-02-04T11:18:21Z

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

packager from stats-compilation object
depcheck

wickstargazer · 2022-03-11T11:32:30Z

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 · 2022-05-03T09:32:05Z

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

wickstargazer mentioned this issue Jan 25, 2022

[BUG] After creating monorepo blank workspace not able to create api #126

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] NX 13 and Webpack5 Support #123

[BUG] NX 13 and Webpack5 Support #123

SquareLi commented Jan 13, 2022 •

edited

wickstargazer commented Jan 15, 2022

SquareLi commented Jan 15, 2022

wickstargazer commented Jan 15, 2022

wickstargazer commented Jan 15, 2022

tstackhouse commented Jan 16, 2022

SquareLi commented Jan 25, 2022

wickstargazer commented Jan 25, 2022

wickstargazer commented Feb 4, 2022

wickstargazer commented Mar 11, 2022

wickstargazer commented May 3, 2022

[BUG] NX 13 and Webpack5 Support #123

[BUG] NX 13 and Webpack5 Support #123

Comments

SquareLi commented Jan 13, 2022 • edited

wickstargazer commented Jan 15, 2022

SquareLi commented Jan 15, 2022

wickstargazer commented Jan 15, 2022

wickstargazer commented Jan 15, 2022

tstackhouse commented Jan 16, 2022

SquareLi commented Jan 25, 2022

wickstargazer commented Jan 25, 2022

wickstargazer commented Feb 4, 2022

wickstargazer commented Mar 11, 2022

wickstargazer commented May 3, 2022

SquareLi commented Jan 13, 2022 •

edited