Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

unexpected noscript tag added in dev server #3285

Closed
cyrfer opened this issue Oct 15, 2017 · 6 comments
Closed

unexpected noscript tag added in dev server #3285

cyrfer opened this issue Oct 15, 2017 · 6 comments

Comments

@cyrfer
Copy link

cyrfer commented Oct 15, 2017

I am seeing the <noscript>You need to enable JavaScript to run this app.</noscript> markup when using the dev server launched with npm start.

Is this a bug report?

No

$ node --version
v8.5.0
$ npm --version
5.3.0

I previously have been working with CRA without ejecting in order to build a custom server with Firebase Cloud Functions to support SSR. I had things working well - my custom server would serve the expected html and the CRA dev server worked independently just fine.

I just began expanding upon the client code to call API in my custom server. I must have messed up something because now I always see markup that JS is disabled. What could I have done to make the dev server think it needs to insert such a warning?

Edit: I just noticed the initial response from the custom server SSR also contains the unexpected noscript warning. I guess this means the client-app must be adding the markup rather than the framework. My SSR technique depends on using a custom Webpack config to transform the client-app into CommonJS modules that the server imports.

@miraage
Copy link

miraage commented Oct 16, 2017

c749de7 #2224

@cyrfer
Copy link
Author

cyrfer commented Oct 18, 2017

I have no idea what is being accomplished by displaying such a message in the markup.

Also, my SSR is not using public/index.html.

I am starting to think the PWA support is blocking my efforts to improve the page content.

@viankakrisna
Copy link
Contributor

viankakrisna commented Oct 18, 2017

<noscript /> tag content is only visible if javascript in the browser is disabled, which is required to be turned on to be able to use the app created with CRA (without any custom SSR like you did).

I must have messed up something because now I always see markup that JS is disabled. What could I have done to make the dev server think it needs to insert such a warning?

Do you see noscript content displayed in the browser? It's either js is disabled in your browser or there is some CSS that style the noscript tag. Something like this could be the culprit:

* {
  display: flex;
}

Also, maybe you see the markup because the app is served by service worker, not your SSR. It cache your index.html. You can read more about it here https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#opting-out-of-caching

@miraage
Copy link

miraage commented Oct 19, 2017

@cyrfer in case you bored to read #2224, please take a look at https://developers.google.com/web/tools/lighthouse/audits/no-js

@cyrfer
Copy link
Author

cyrfer commented Oct 21, 2017

@viankakrisna Since I had thought SW was showing an old cache, I changed my app code to unregister the SW, but I suspect that my new app is never used because of the SW cache. I also used the Chrome DevTools to unregister the SW.

After more tinkering, I am pretty sure the problem is related to the FAAS tools I am using. Something went wonky with my Firebase code, preventing me hitting it with curl and seeing new results. I am pretty sure this ticket can be resolved/deleted, but I will update it when I have conclusive solutions.

@gaearon
Copy link
Contributor

gaearon commented Nov 3, 2017

Not sure how this is related to CRA, but the <noscript> is only in public/index.html and you can delete it if you want to.

@gaearon gaearon closed this as completed Nov 3, 2017
@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants