Mixing
create react app not loading css background images in dev or build
I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:
Note: I have omitted some files & folders, if you need more please let me know.
App/
node_modules/
src/
client/
build/
node_modules/
public/
src/
css/
App.css
images/
tree.png
yeti.png
App.jsx
server/
package.json
Procfile
Here are the steps I take to create this issue:
$ cd src/server && npm run dev
This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.
Note: I load in an image yeti.png and this renders fine.
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti.png';
const Footer = function(props) {
return (
<div>
<Yeti />
<Trees />
</div>
);
};
const Yeti = function(props) {
return (
<img
src={yeti}
className="yeti yeti--xs"
alt="Yeti"
/>
);
};
const Trees = function(props) {
return (
<div className="trees">
<div className="trees__tree trees__tree--1"></div>
<div className="trees__tree trees__tree--2"></div>
</div>
);
};
ReactDOM.render(
<Footer />,
document.getElementById('root')
);
App.css
.trees {
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 1;
}
.trees__tree {
background-size: 30px;
background: url('../images/tree.png') no-repeat;
float: left;
height: 50px;
width: 30px;
}
.trees__tree--1 {
margin: 0 0 0 6%;
}
.trees__tree--2 {
margin: 2% 0 0 4%;
}
When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.
Note that the path for the image I import is similar to the path for the background image:
If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.
How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.
I'm also having the same problem when I build the app.
If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css
javascript reactjs ecmascript-6 jsx create-react-app
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
add a comment |
I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:
Note: I have omitted some files & folders, if you need more please let me know.
App/
node_modules/
src/
client/
build/
node_modules/
public/
src/
css/
App.css
images/
tree.png
yeti.png
App.jsx
server/
package.json
Procfile
Here are the steps I take to create this issue:
$ cd src/server && npm run dev
This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.
Note: I load in an image yeti.png and this renders fine.
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti.png';
const Footer = function(props) {
return (
<div>
<Yeti />
<Trees />
</div>
);
};
const Yeti = function(props) {
return (
<img
src={yeti}
className="yeti yeti--xs"
alt="Yeti"
/>
);
};
const Trees = function(props) {
return (
<div className="trees">
<div className="trees__tree trees__tree--1"></div>
<div className="trees__tree trees__tree--2"></div>
</div>
);
};
ReactDOM.render(
<Footer />,
document.getElementById('root')
);
App.css
.trees {
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 1;
}
.trees__tree {
background-size: 30px;
background: url('../images/tree.png') no-repeat;
float: left;
height: 50px;
width: 30px;
}
.trees__tree--1 {
margin: 0 0 0 6%;
}
.trees__tree--2 {
margin: 2% 0 0 4%;
}
When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.
Note that the path for the image I import is similar to the path for the background image:
If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.
How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.
I'm also having the same problem when I build the app.
If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css
javascript reactjs ecmascript-6 jsx create-react-app
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10
add a comment |
I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:
Note: I have omitted some files & folders, if you need more please let me know.
App/
node_modules/
src/
client/
build/
node_modules/
public/
src/
css/
App.css
images/
tree.png
yeti.png
App.jsx
server/
package.json
Procfile
Here are the steps I take to create this issue:
$ cd src/server && npm run dev
This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.
Note: I load in an image yeti.png and this renders fine.
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti.png';
const Footer = function(props) {
return (
<div>
<Yeti />
<Trees />
</div>
);
};
const Yeti = function(props) {
return (
<img
src={yeti}
className="yeti yeti--xs"
alt="Yeti"
/>
);
};
const Trees = function(props) {
return (
<div className="trees">
<div className="trees__tree trees__tree--1"></div>
<div className="trees__tree trees__tree--2"></div>
</div>
);
};
ReactDOM.render(
<Footer />,
document.getElementById('root')
);
App.css
.trees {
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 1;
}
.trees__tree {
background-size: 30px;
background: url('../images/tree.png') no-repeat;
float: left;
height: 50px;
width: 30px;
}
.trees__tree--1 {
margin: 0 0 0 6%;
}
.trees__tree--2 {
margin: 2% 0 0 4%;
}
When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.
Note that the path for the image I import is similar to the path for the background image:
If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.
How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.
I'm also having the same problem when I build the app.
If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css
javascript reactjs ecmascript-6 jsx create-react-app
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows:
Note: I have omitted some files & folders, if you need more please let me know.
App/
node_modules/
src/
client/
build/
node_modules/
public/
src/
css/
App.css
images/
tree.png
yeti.png
App.jsx
server/
package.json
Procfile
Here are the steps I take to create this issue:
$ cd src/server && npm run dev
This will boot up the dev server and open the browser to my app, everything is working fine except for some elements on the page not displaying a image.
Note: I load in an image yeti.png and this renders fine.
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import yeti from './images/yeti.png';
const Footer = function(props) {
return (
<div>
<Yeti />
<Trees />
</div>
);
};
const Yeti = function(props) {
return (
<img
src={yeti}
className="yeti yeti--xs"
alt="Yeti"
/>
);
};
const Trees = function(props) {
return (
<div className="trees">
<div className="trees__tree trees__tree--1"></div>
<div className="trees__tree trees__tree--2"></div>
</div>
);
};
ReactDOM.render(
<Footer />,
document.getElementById('root')
);
App.css
.trees {
bottom: 0;
height: 110px;
left: 0;
position: fixed;
width: 100%;
z-index: 1;
}
.trees__tree {
background-size: 30px;
background: url('../images/tree.png') no-repeat;
float: left;
height: 50px;
width: 30px;
}
.trees__tree--1 {
margin: 0 0 0 6%;
}
.trees__tree--2 {
margin: 2% 0 0 4%;
}
When I inspect the elements in Chrome, the path to the images appears to be correct. When I hover over the path to the image in the styles tab of my inspector the image appears.
Note that the path for the image I import is similar to the path for the background image:
If I were to import the tree.png as import tree from './images/tree.png'; and change my two <div> elements to <img src={tree} role="presentation" className="trees__tree trees__tree--1" /> and <img src={tree} role="presentation" className="trees__tree trees__tree--2" /> the images will of course load.
How can I get the background images to display? I have other background images in the app that are not loading so the previously mentioned bandaid will not help me. I'm afraid to eject my app and mess with the configuration.
I'm also having the same problem when I build the app.
If you need to see more of the source you can view it at https://github.com/studio174/ispellits but bare in mind I have simplied this example to isolate the problem. The issue I am having is actually in the Footer.jsx and Footer.css
javascript reactjs ecmascript-6 jsx create-react-app
javascript reactjs ecmascript-6 jsx create-react-app
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
edited Dec 1 '16 at 19:47
j_quelly
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
asked Dec 1 '16 at 19:17
j_quellyj_quelly
4991621
4991621
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10
add a comment |
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10
add a comment |
3 Answers
3
active
oldest
votes
The issue was purely an issue with CSS in the App.css file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
add a comment |
My issue was specifically that I did not have background-size: 30px; defined. Thanks for this.
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
add a comment |
Add homepage in package.json to run build in any apache server
{
"name": "app",
"version": "0.1.0",
"private": true,
"homepage": "http://{servername}/{foldername}/",
}
then create build in react using
npm run buildnpm install -g serveserve -s build- Copy build folder and paste in server like xampp/htdocs and hit url
edited Jan 2 at 14:24
Urosh T.
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40918681%2fcreate-react-app-not-loading-css-background-images-in-dev-or-build%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue was purely an issue with CSS in the App.css file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
add a comment |
The issue was purely an issue with CSS in the App.css file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
add a comment |
The issue was purely an issue with CSS in the App.css file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
The issue was purely an issue with CSS in the App.css file:
App.css
.trees__tree {
background: url('../images/tree.png') no-repeat;
background-size: 30px; /** moved this property down */
float: left;
height: 50px;
width: 30px;
}
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
edited Dec 2 '16 at 17:34
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
answered Dec 2 '16 at 1:01
j_quellyj_quelly
4991621
4991621
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
add a comment |
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
1
1
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
Also, if it helps anyone else to know, the problem is that the blanket css "background" overwrites any background specific rules that have already been declared. by moving them down it redeclares the size after the background has been resolved.
– Kai Qing
Mar 26 '18 at 23:34
add a comment |
My issue was specifically that I did not have background-size: 30px; defined. Thanks for this.
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
add a comment |
My issue was specifically that I did not have background-size: 30px; defined. Thanks for this.
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
add a comment |
My issue was specifically that I did not have background-size: 30px; defined. Thanks for this.
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
My issue was specifically that I did not have background-size: 30px; defined. Thanks for this.
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
answered Jun 20 '17 at 14:42
IonicBurgerIonicBurger
2,57412139
2,57412139
add a comment |
add a comment |
Add homepage in package.json to run build in any apache server
{
"name": "app",
"version": "0.1.0",
"private": true,
"homepage": "http://{servername}/{foldername}/",
}
then create build in react using
npm run buildnpm install -g serveserve -s build- Copy build folder and paste in server like xampp/htdocs and hit url
edited Jan 2 at 14:24
Urosh T.
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
add a comment |
Add homepage in package.json to run build in any apache server
{
"name": "app",
"version": "0.1.0",
"private": true,
"homepage": "http://{servername}/{foldername}/",
}
then create build in react using
npm run buildnpm install -g serveserve -s build- Copy build folder and paste in server like xampp/htdocs and hit url
edited Jan 2 at 14:24
Urosh T.
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
add a comment |
Add homepage in package.json to run build in any apache server
{
"name": "app",
"version": "0.1.0",
"private": true,
"homepage": "http://{servername}/{foldername}/",
}
then create build in react using
npm run buildnpm install -g serveserve -s build- Copy build folder and paste in server like xampp/htdocs and hit url
edited Jan 2 at 14:24
Urosh T.
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
Add homepage in package.json to run build in any apache server
{
"name": "app",
"version": "0.1.0",
"private": true,
"homepage": "http://{servername}/{foldername}/",
}
then create build in react using
npm run buildnpm install -g serveserve -s build- Copy build folder and paste in server like xampp/htdocs and hit url
edited Jan 2 at 14:24
Urosh T.
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
edited Jan 2 at 14:24
Urosh T.
75411419
edited Jan 2 at 14:24
Urosh T.
75411419
edited Jan 2 at 14:24
Urosh T.
75411419
75411419
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
answered Jan 2 at 13:25
abhinav tyagiabhinav tyagi
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40918681%2fcreate-react-app-not-loading-css-background-images-in-dev-or-build%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you can hover over the image src in the class inspector and see the image preview?
– 4m1r
Dec 1 '16 at 19:22
@4m1r Yes I can, I was unable to capture that with my screenshot, but chrome is displaying the image when I hover the path of both the imported image and the background image
– j_quelly
Dec 1 '16 at 19:23
Can you file an issue please? I'll try to remember to reply to this but it would be much better if you could just file an issue in Create React App repo so it's visible there, and I will see it next time I open the issue tracker.
– Dan Abramov
Dec 1 '16 at 21:55
@DanAbramov done
– j_quelly
Dec 1 '16 at 22:10