Unable to add bootstrap

[micopiira]

I tried following https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#adding-bootstrap to add bootstrap into my project

I installed bootstrap@3 with npm, added import 'bootstrap/dist/css/bootstrap.css'; into my src/index.js'then ran npm start. The bootstrap.css file does exist in the correct directory. And a import './index.css'; right below it works just fine.

OS: Windows 10, Chrome browser

Console output:

[HMR] Waiting for update signal from WDS...
index.js:31 Uncaught Error: Cannot find module "bootstrap/dist/css/bootstrap.css"webpackMissingModule @ index.js:31(anonymous function) @ index.js:31(anonymous function) @ bundle.js:1264__webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ multi_main:3(anonymous function) @ bundle.js:589__webpack_require__ @ bundle.js:556(anonymous function) @ bundle.js:579(anonymous function) @ bundle.js:582
client:22 [WDS] Hot Module Replacement enabled.
client:45 [WDS] Errors while compiling.
client:47 ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\Users\username\Projects\my-project\node_modules\bootstrap\dist\css\bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)
    at Parser.pp.raise (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.unexpected (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1490:8)
    at Parser.pp.semicolon (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1469:73)
    at Parser.pp.parseExpressionStatement (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1994:8)
    at Parser.pp.parseStatement (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1772:188)
    at Parser.pp.parseTopLevel (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1666:21)
    at Parser.parse (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:1632:17)
    at Object.parse (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\acorn\dist\acorn.js:885:44)
    at Parser.parse (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\Users\username\Projects\my-project\node_modules\react-scripts\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./src/index.js 31:0-43errors @ client:47sock.onmessage @ client:82EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:274SockJS._transportMessage @ main.js:272EventEmitter.emit @ emitter.js:50WebSocketTransport.ws.onmessage @ websocket.js:35

[micopiira]

Upgrading the react-scripts package fixed this.