Unable to run dev script with static target and modern client #7562

hannes-k · 2020-06-19T12:37:19Z

Version

v2.13.0

Reproduction link

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)}

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

MrJmpl3 · 2020-06-21T14:50:03Z

I have same problem in SSR mode.

ThibaultVlacich · 2020-06-24T11:04:32Z

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 · 2020-06-29T08:45:01Z

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

jjelev · 2020-06-29T11:49:58Z

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

#7562

kreig303 · 2020-07-10T22:28:33Z

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 · 2020-07-12T20:51:23Z

@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 · 2020-07-29T13:32:17Z

~~@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 · 2020-07-29T17:12:10Z

@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 · 2020-08-05T19:27:39Z

~~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 · 2020-08-06T19:41:35Z

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 · 2020-08-07T20:29:20Z

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 · 2020-08-25T13:59:52Z

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 · 2020-08-25T14:09:21Z

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 · 2020-08-25T14:13:17Z

@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 · 2020-08-25T14:44:30Z

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 · 2020-08-25T14:44:34Z

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 · 2020-08-25T15:00:08Z

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 · 2020-08-25T15:05:35Z

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

kreig303 · 2020-08-25T15:13:45Z

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 · 2020-08-25T19:19:22Z

@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 · 2020-08-26T11:24:28Z

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

pi0 · 2020-08-27T10:30:08Z

v2.14.4 released :)

shainegordon · 2020-08-28T09:56:08Z

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

kreig303 · 2020-08-31T13:51:49Z

@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 · 2020-09-01T23:35:09Z

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 · 2020-09-03T15:01:43Z

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 #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 · 2020-09-03T17:18:15Z

@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 · 2020-09-04T07:53:09Z

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

ghost added the cmty:bug-report label Jun 19, 2020

clarkdo self-assigned this Jun 29, 2020

clarkdo mentioned this issue Jun 29, 2020

fix(webpack): modern build should wait for legacy assets #7635

Merged

7 tasks

pi0 closed this as completed in #7635 Jun 29, 2020

pi0 pushed a commit that referenced this issue Jun 29, 2020

fix(webpack): modern build should wait for legacy assets (#7635)

23324b9

#7562

pi0 reopened this Jun 29, 2020

This was referenced Jun 30, 2020

Push navigation not working since 2.13 when using modern bundle #7628

Closed

v2.13.3 #7641

Merged

clarkdo mentioned this issue Aug 25, 2020

fix(webpack): no module scripts in spa modern client mode #7967

Merged

7 tasks

pi0 mentioned this issue Aug 26, 2020

v2.14.4 #7971

Merged

pi0 closed this as completed Sep 2, 2020

danielroe added 2.x pending triage labels Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to run dev script with static target and modern client #7562

Unable to run dev script with static target and modern client #7562

hannes-k commented Jun 19, 2020

MrJmpl3 commented Jun 21, 2020

ThibaultVlacich commented Jun 24, 2020

jjelev commented Jun 29, 2020

jjelev commented Jun 29, 2020

kreig303 commented Jul 10, 2020 •

edited

clarkdo commented Jul 12, 2020

kreig303 commented Jul 29, 2020 •

edited

kreig303 commented Jul 29, 2020 •

edited

kreig303 commented Aug 5, 2020 •

edited

kreig303 commented Aug 6, 2020 •

edited

seangwright commented Aug 7, 2020 •

edited

shainegordon commented Aug 25, 2020

clarkdo commented Aug 25, 2020 •

edited

kreig303 commented Aug 25, 2020 •

edited

shainegordon commented Aug 25, 2020

kreig303 commented Aug 25, 2020

kreig303 commented Aug 25, 2020 •

edited

clarkdo commented Aug 25, 2020 •

edited

kreig303 commented Aug 25, 2020 •

edited

clarkdo commented Aug 25, 2020

kreig303 commented Aug 26, 2020

pi0 commented Aug 27, 2020

shainegordon commented Aug 28, 2020

kreig303 commented Aug 31, 2020 •

edited

kreig303 commented Sep 1, 2020 •

edited

youbicode commented Sep 3, 2020

clarkdo commented Sep 3, 2020

youbicode commented Sep 4, 2020 •

edited

Unable to run dev script with static target and modern client #7562

Unable to run dev script with static target and modern client #7562

Comments

hannes-k commented Jun 19, 2020

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additional comments?

MrJmpl3 commented Jun 21, 2020

ThibaultVlacich commented Jun 24, 2020

jjelev commented Jun 29, 2020

jjelev commented Jun 29, 2020

kreig303 commented Jul 10, 2020 • edited

clarkdo commented Jul 12, 2020

kreig303 commented Jul 29, 2020 • edited

kreig303 commented Jul 29, 2020 • edited

kreig303 commented Aug 5, 2020 • edited

kreig303 commented Aug 6, 2020 • edited

seangwright commented Aug 7, 2020 • edited

shainegordon commented Aug 25, 2020

clarkdo commented Aug 25, 2020 • edited

kreig303 commented Aug 25, 2020 • edited

shainegordon commented Aug 25, 2020

kreig303 commented Aug 25, 2020

kreig303 commented Aug 25, 2020 • edited

clarkdo commented Aug 25, 2020 • edited

kreig303 commented Aug 25, 2020 • edited

clarkdo commented Aug 25, 2020

kreig303 commented Aug 26, 2020

pi0 commented Aug 27, 2020

shainegordon commented Aug 28, 2020

kreig303 commented Aug 31, 2020 • edited

kreig303 commented Sep 1, 2020 • edited

youbicode commented Sep 3, 2020

clarkdo commented Sep 3, 2020

youbicode commented Sep 4, 2020 • edited

kreig303 commented Jul 10, 2020 •

edited

kreig303 commented Jul 29, 2020 •

edited

kreig303 commented Jul 29, 2020 •

edited

kreig303 commented Aug 5, 2020 •

edited

kreig303 commented Aug 6, 2020 •

edited

seangwright commented Aug 7, 2020 •

edited

clarkdo commented Aug 25, 2020 •

edited

kreig303 commented Aug 25, 2020 •

edited

kreig303 commented Aug 25, 2020 •

edited

clarkdo commented Aug 25, 2020 •

edited

kreig303 commented Aug 25, 2020 •

edited

kreig303 commented Aug 31, 2020 •

edited

kreig303 commented Sep 1, 2020 •

edited

youbicode commented Sep 4, 2020 •

edited