How to add async attribute to script generated by react scripts (at the npm run build stage on the create-react-app template)

Question

I want to defer parsing of scripts that are generate as a result of transpiling during build. I have added async to all the other tags on my index.html page. However, since the main js file is inject into page during build, it becomes harder.

Is there a way to tell babel/react-scripts to add the async attribute to the injected js tag?

Hes · Accepted Answer · 2018-03-21 13:57:04Z

1

I just ran into this issue recently as well when starting out with create-react-app. However, my problem was in the context of pre-rendering the pages statically. I am using react-snap which has the following configuration option:

"reactSnap": {
  "asyncScriptTags": true
}

This adds the async attribute to the main.js script tag of the generated pages. Hope this helps.

edited Mar 21, 2018 at 13:57

answered Mar 21, 2018 at 13:49

Hes

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

juallom Over a year ago

Hi! I am facing same issue with create-react-app scaffold tool, can you be more specific? So you install that package with npm and add this config to package.json and that's all? Thank you :)

Hes Over a year ago

Yes, that should be all.

juallom · Accepted Answer · 2018-07-12 11:51:53Z

1

I solved the same problem ejecting react-scripts and modifying the configuration files.

Basically you install this new webpack plugin: Script Extension for HTML Webpack Plugin. And then you add this snippet to both dev and prod webpack configurations, within plugins array:

new ScriptExtHtmlWebpackPlugin({
    defaultAttribute: 'async'
})

answered Jul 12, 2018 at 11:51

juallom

1167 bronze badges

Collectives™ on Stack Overflow

How to add async attribute to script generated by react scripts (at the npm run build stage on the create-react-app template)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related