Nuxt.js: Unable to run dev script with static target and modern client

[hannes-k]

Version

v2.13.0

Reproduction link

https://github.com/hannes-k/nuxt-modern

Steps to reproduce

Create new nuxt project
add target: 'static' and modern: 'client' to nuxt.config.js
npm run dev
ctrl + c
npm run dev

What is expected ?

Developer mode should be started.

What is actually happening?

 ERROR  Cannot read property 'filter' of undefined                                                                                                                                                     14:27:24

  at node_modules/@nuxt/webpack/dist/webpack.js:176:12
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:97:5)

Additional comments?

The error does not always occur. Sometimes it works, but the next time it does not.

_{This bug report is available on Nuxt community (#c10805)}

[MrJmpl3]

I have same problem in SSR mode.

[ThibaultVlacich]

I'm getting the same error here since Nuxt 2.13. Also, navigation from page to page is not working anymore. When I click a nuxt-link, the whole page reloads instead of just updating the content.

[jjelev]

We have discussed this here also:
https://cmty.app/nuxt/nuxt.js/issues/c10826#comment-5ef328c011200fb6dea89a4b

[jjelev]

On my build the issue is modern browsers can't open the build but legacy one can.
I suppose modern build is failing.
I observe this issue on yarn dev but not on yarn build && yarn export (for production).
So I am cheating a little and setting modern: process.env.NODE_ENV === 'production' in nuxt.config.js

[kreig303]

fwiw this has impacted us as well. we don't have target: static defined in our nuxt.config.js, just modern: client (per initial description)

<=2.13.2, same Cannot read property 'filter' of undefined webpackish looking error. build fails
2.13.3, build succeeds but render pinwheels in browser

so this is half-fixed in our use case. 😕

[clarkdo]

@kreig303 Can you please provide us more details about your problem? It would be great if you can create a minimal reproducible repo as well.

[kreig303]

~@clarkdo the newly released v2.14.0 seems to correct this.~

~judging by the lockfile changes with the new install i imagine the issue was another "adventures in babel-land" episode.~ 🥇

[kreig303]

@clarkdo spoke too soon. my issue persists. ☹️

would take a while to produce a "demo" which is why i hoped I could just await a new version 😕

mode: spa, modern: client

[kreig303]

~so it would seem that "wait and see" was the correct approach here @clarkdo. yesterday's 2.14.1 release finally allowed us to upgrade our production applications.~

[kreig303]

again spoke too soon. issue seems to be all about modern: client. would love to have esm builds but disabling them altogether will be our current workaround. ☹️

observed behavior seems to be similar to #6442, btw. this issue got conflated (for us) with the webpack stall on modern builds that was fixed in 2.13.3 as mentioned above.

[seangwright]

Env:

nuxt: 2.14.1
node: 12.13.1

When running nuxt dev and this combination of settings in nuxt.config.js

  target: 'static',
  mode: 'spa',
  modern: 'client',

I don't see any <script type="module" src="..."></script> in the DOM, however I do see the <script nomodule src="..."></script>.

The site doesn't load completely and instead all I see is the pinwheel/spinner.

If I change my nuxt.config.js to

  target: 'static',
  mode: 'universal', // changed from 'spa'
  modern: 'client',

Then I do see <script type="module" src="..."></script> in the DOM in addition to the nomodule scripts. The site loads and runs correctly, but it's server rendered so I can't debug in the browser.

What I'd like is to use modern mode to make debugging async functions (ex: asyncData) easier in the browser, but changing from 'spa' to 'universal' kinda defeats the purpose.

However, when I deploy I want to statically generate the whole site with modern: 'client'.

[shainegordon]

I have had to comment out modern: 'client' on all our apps since upgrading to nuxt 2.14.2

no build errors, but just a pin wheel

    mode: 'spa',
    // modern: 'client',

[clarkdo]

There is a bug reported and fixed in v2.14.3 which might be relalted to this issue, can you please double check with v2.14.3 ?

If issue still persists, please provide us a repo or steps to reproduce the issue.

[kreig303]

@shainegordon (and others)

further research showed that the ESM build wasn't an issue per se (2.14.1+)... it seemed to mainly surround the hot swapping capability of the development builds which caused the "spinning wheel of doom". 😖

we refined the modern flag further in nuxt.config.js thusly:

const dev =
  process.env.NODE_ENV === 'development' ||
  process.env.NODE_ENV === 'test'

module.exports = {
  dev,
  mode: 'spa', // single page application mode
  modern: dev ? false : 'client', // don't produce esm build when config.dev === true
  target: 'server', // rendering target. new in 2.13+
 ...
}

we have an override flag for dev to include test so ymmv but a direct test of the NODE_ENV should produce the same result.

[shainegordon]

I just upgraded to 2.14.3 and this issue did still persist.

however, I then used create-nuxt-app, and it worked.
I then compared the configuration, and noticed that we did not have target: 'static' in nuxt.config.js

as soon as I added target: 'static' to nuxt.config.js , then modern: 'client' worked on localhost

[kreig303]

There is a bug reported and fixed in v2.14.3 which might be relalted to this issue, can you please double check with v2.14.3 ?

If issue still persists, please provide us a repo or steps to reproduce the issue.

thanks @clarkdo i'll take a look

[kreig303]

I just upgraded to 2.14.3 and this issue did still persist.

however, I then used create-nuxt-app, and it worked.
I then compared the configuration, and noticed that we did not have target: 'static' in nuxt.config.js

as soon as I added target: 'static' to nuxt.config.js , then modern: 'client' worked on localhost

i would second the necessity of an explicit target like in my code example above. there might be a case where an implicit target flag check is failing in the codebase?

[clarkdo]

Thanks for the info , I'll take a look by using create-nuxt-app without static target

[kreig303]

There is a bug reported and fixed in v2.14.3 which might be relalted to this issue, can you please double check with v2.14.3 ?
If issue still persists, please provide us a repo or steps to reproduce the issue.

thanks @clarkdo i'll take a look

this happens upon repeated startups and shutdowns of nuxt in dev mode (e.g. using npx nuxt to start or equivalent) which is of course a natural use case

again, looks to be a consequence of the hot reload capabilities

workaround: disable client: modern when dev === true

[clarkdo]

@kreig303 @shainegordon Thanks for providing info about how to reproduce the issue, the issue is because of racing condition between modern and legacy build, I've opened a pr to fix it, if you want to try it in advance, you can verify it by applying my pr change to you local @nuxt/webpack in node_module.

[kreig303]

@clarkdo i see this is slated for release so i will confirm once the release has gone live

[pi0]

v2.14.4 released :)

[shainegordon]

wonderful. updated all our projects, and modern is now working across the board in development mode

[kreig303]

@clarkdo @pi0 i have upgraded one application and allowed it to use "unfettered" modern: client again. will report back if the issue remains unresolved somehow. i am of course being conservative as this one bedeviled us for some time so i need time to observe and ensure the behavior doesn't return.

[kreig303]

i did some extensive work with that app in the last day. the modern:client when dev === true demons seem to have been exorcised.

thanks for all your help @clarkdo

[youbicode]

Hello,

Unfortunately still having the same issue on version 2.14.4 with a different setup.
Basically we build the app, then we inject the env variables at runtime as described in https://github.com/nuxt/nuxt.js/issues/5960 for the CDN.

It builds correctly and we get our modern script tags locally, the issue is once we inject the env variable responsible for the CDN, we lose those injected scripts

[clarkdo]

@youbicode Can you provide use more details about you issue ?

• nuxt.config.js
• the way how you deploy your app
• a repo to reproduce the issue would be great

[youbicode]

in order to use the CDN env var on runtime, we got this
nuxt.config.js

hooks: {
    /*
     * the renderer hook is a middleware which handles and serves all SSR and asset requests.
     * https://nuxtjs.org/api/internals-renderer#hooks
     */
    render: {
      // Nuxt doesn't allow changing the cdn (publicPath) at run time, it's stored in the manifest at build time
      // When resources for render are loaded, this hook updates the publicPath inside the manifest with our cdn
      resourcesLoaded(resources) {
        const path = process.env.BASE_STATIC_URL;
        const cdn = path !== '/_nuxt/' ? `${path}/_nuxt/` : path;
        // inject the cdn path for legacy browsers
        if (resources.clientManifest) {
          resources.clientManifest.publicPath = cdn;
        }
        // inject the cdn path for modern browsers
        if (resources.modernManifest) {
          resources.modernManifest.publicPath = cdn;
        }
      },
    },
  },

cdn.ts : plugin file

export default async (context: Context) => {
  const { $config } = context;
  const path = $config.cdnPath;
  const cdn = path !== '/_nuxt/' ? `${path}/_nuxt/` : path;
  // specify the base path for all the assets within the app on the fly
  // `cdnPath` is the env variable injected on runtime
  // for more: https://webpack.js.org/guides/public-path/
  // @ts-ignore
  __webpack_public_path__ = cdn;
};

Basically when env.BASE_STATIC_URL === '/_nuxt/' we get the needed scripts, but once we set it to our cdn env.BASE_STATIC_URL === 'CDN_PATH, we lose the modules.
We don't rebuild the project, just change the env and run the start command again
I'll try to add a repo reproducing this, might be related to how we set the CDN at runtime