upgrading from nx 14 -> 15 breaks typescript webworkers

[hevans90]

Current Behavior

In my project (using nx 14, with a standard react app setup), I am using a web worker with TS using the following constructor:

This works perfectly fine.

However when I migrate my repo to nx 15, this happens:

I have tried this, and it has no effect:

Expected Behavior

Should work normally as before. This is a webpack configuration issue.

Github Repo

No response

Steps to Reproduce

export const worker = new Worker(new URL('./worker.ts', import.meta.url));

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : darwin x64
   yarn : 1.22.19

   nx : 15.2.4
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.2.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.2.4
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.2.4
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.2.4
   @nrwl/js : 15.2.4
   @nrwl/linter : 15.2.4
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.2.4
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.2.4
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.2.4
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.2.4
   @nrwl/web : 15.2.4
   @nrwl/webpack : 15.2.4
   @nrwl/workspace : 15.2.4
   typescript : 4.8.4

Failure Logs

No response

Additional Information

I think this is an underlying webpack config issue.

[hevans90]

I dug through the yarn lock and node modules and found that this issue is because of the introduction of @nrwl/webpack, and hence a new webpack config which sets output.scriptType to module rather than text/javascript... changing it back fixes this issue but I am guessing you don't wanna do that for ESM purposes... I am a bit out of my depth here, but can anyone with more webpack experience chime in?

https://webpack.js.org/configuration/output/#outputscripttype

[sancelot]

I have similar issue, my webworker is defined in a workspace library.
and I can not run it. nx 15.4.4

I don't really know howto solve it.

[flippidippi]

This is an issue for us too. We had to create a custom webpack config to change it back. This should be configurable or just go off what the default is from output.module

[hevans90]

Any update on this from the nx team @FrozenPandaz ?

[SandeepThomas]

@hevans90 if you just want to change the module.output.scriptType in nx 15.6.3, you can do this

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  config.output.scriptType = 'text/javascript'
  return config;
});

tested in sample repo for nx-react with web worker: https://github.com/SandeepThomas/nx-react-worker

[sancelot]

using either vite or webpack ths issues will not be the same, here is an example using vite build https://github.com/sancelot/nx-webworker-example

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.