version 0.4.1 serves non-HTML files as text/html

[donpark]

my index.html file needs to load some CSS and JS files directly which worked fined in previous releases but not with react-scripts version 0.4.1 because they are served with wrong content-type text/html.

These files cannot be loaded using import statements in JS files due to various issues caused by some obscure differences between two approaches.

[gaearon]

Please see 0.4.0 release notes and description of the breaking change. This only worked before by accident and was never supported (for example it only worked in development but not in production). If you need this feature please raise an issue explaining why in detail, preferably with an example project. This was also mentioned in 0.4.0 release notes breaking change description. Thank you!

[gaearon]

(You can find release notes either in changelog.md or on GH Releases page.)

[gaearon]

As a workaround, you can upload those files to your server or serve them locally from another host. I understand this is not ideal, but to help you I would need to know what kind of incompatibilities don't let you import those files through the module system.

I'm also curious how you handled them in production. Did you specifically copy them as an additional build step? Did you manually bump versions in HTML file every time you updated them?

[gaearon]

Relevant change for some context: #551

[donpark]

Although I've written many React apps, this is my first 'create-react-app' and it hasn't been deployed yet although I've gone as far as running production build in a docker container without problems before.

First trouble I had was with a jquery-based library, knob.js, which complained about jQuery missing although I've imported it just before. I backed tracked to 0.3.1 immediate to keep things moving so haven't explored why it wasn't able to find jQuery.

Sorry to hear this feature was accidental. No big deal. There is always the eject option. It's just that I like the convenience and wanted to defer ejecting as long as I can. :-)

[gaearon]

I'm not saying you should necessarily eject. I'm saying the feature was broken and it we want to support it, we need to fully understand a range of use cases for it. So I'd like to ask you to share a code example that worked in 0.3.0 both for development and production but broke in 0.4.x so that I both understand your use case better, and can test a complete new solution if we add one for 1.0. If you can't share it, unfortunately, it will be less likely that we'll solve this problem, because we need to accumulate some use cases to come up with a proper solution.

[donpark]

Sadly, I can't share my project but I can point out which files I had trouble using import with:

• jQuery (imported directly instead of npm module)
• jQuery-Knob

If I can find time today, I'll retry 0.4.1 again to explore the import issue. I don't know how much trouble resource loading from index.html file is but I think it's something that's worthwhile to support since there are huge number and variety of CSS and JS libs out there and these sort of import-related issues will keep cropping up.

[cloudmu]

@donpark you can npm install jQuery as dependency, and then add the following in your index.js:

window.$ = window.jQuery=require('jquery');

or

import jquery from 'jquery';
window.$ = window.jQuery=jquery;

You can also import bootstrap, font-awesome, etc. See index.js in my starter kit to gather some idea. They all work well with create-react-app 0.4.1, and I think it's a cleaner approach than loading them from the index.html. @gaearon

[donpark]

Yeah, I did just that today with jQuery and jQuery-Knob to stay in good grace of react-scripts. In my case, both javascript library had npm versions so this solves my problem but others may not be as lucky.

I don't know what compelling benefits requiring webpack loader-based inclusions brings to create-react-app users and developers but I think it's a glaring flaw in an otherwise wonderful developer tool.

[gaearon]

I don't know what compelling benefits requiring webpack loader-based inclusions brings to create-react-app users and developers but I think it's a glaring flaw in an otherwise wonderful developer tool.

Content hashing works correctly. If you update your jQuery plugin, an old version won't be accidentally cached by your users.

If you use code splitting, you can delay loading jQuery and plugin code until you actually load the component using it, without writing any complicated code to inject scripts dynamically. Thanks to Webpack.

Same for any other asset types. Images get correct hashes automatically.

If you link to an image, and that image gets deleted, you will get a compile time error rather than a 404 in the app.

There are numerous benefits 😉

[cloudmu]

I was thinking libs without npm versions may be the legit use cases for directly linking them from index.html. But just realized they also can/should be loaded via webpack. In my test the following index.js works just fine. (note jquery is not npm installed but rather saved as a 3rd-party lib outside of src)

import jquery from '../libs/jQuery/jquery-3.1.0.min.js';
window.$ = window.jQuery=jquery;

It works under both dev and prod.

[cloudmu]

Prior to CRA, I actually spent quite a bit of effort (with my own webpack and build scripts) making static assets linked in index.html to work under both dev and prod, due to some baseUrl related issues. I made it work but I would have still missed all the benefits @gaearon outlined.

So I like the philosophy (wisdom) of being really conservative when introducing "features" in CRA.