react-boilerplate: Webpack Error when trying to pack CSS

I have to include statically a library (cesium) which does not support RequireJS. I have managed to get webpack to package this file by:

putting this library under a new directory named lib under app
adding the following to my app.js:

// Import for cesium
window.CESIUM_BASE_URL = './lib';
require('./lib/Cesium/Cesium.js');
require('./lib/Cesium/Widgets/widgets.css');
var Cesium = window.Cesium;

and adding the following loader to internals/webpack/webpack.base.babel.js:

    { test: /Cesium\.js$/, loader: 'script-loader' }

If I remove the require('./lib/Cesium/Widgets/widgets.css'); line from app.js, webpack builds fine and I can access the global Cesium object that this library creates.

However, requiring the CSS seems to give me the following error when running npm start:

ERROR in ./app/lib/Cesium/Widgets/widgets.css
Module parse failed: /home/balajeerc/Projects/ReactTest/app/lib/Cesium/Widgets/widgets.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .my-custom-selector {
|     color: red;
|     text-align: center;
 @ ./app/app.js 24:0-43
 @ multi main

I have stripped the CSS down in this file to just the following to make sure it isn’t really anything specific to the CSS itself that is causing the problem:

.my-custom-selector {
    color: red;
    text-align: center;
}

I have made sure that I have the css-selector and style-selector packages installed.

Could someone please point out what it is that I am doing wrong?

Versions

React-Boilerplate: 3.4.0
Node: 6.9.1
npm: 3.10.8

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (6 by maintainers)

Most upvoted comments

Hello! Do you have in webpack config loaders for css files?

{
      test: /\.css$/,  
      include: /node_modules/,  
      loaders: ['style-loader', 'css-loader'],
 }

+23

qpeela on Mar 17, 2017

@KarandikarMihir
Actually, I cloned the boilerplate source code from the master branch. webpack config /internals/webpack/webpack.base.babel.js file has below part of code to load .CSS file,

{
      // Do not transform vendor's CSS with CSS-modules
      // The point is that they remain in global scope.
      // Since we require these CSS files in our JS or CSS files,
      // they will be a part of our compilation either way.
      // So, no need for ExtractTextPlugin here.
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }

To load our own custom CSS files, I added

{
  // Transform our own .css files with PostCSS and CSS-modules
  test: /\.css$/,
  exclude: /node_modules/,
  use: ['style-loader', 'css-loader'],
}, {
  // Do not transform vendor's CSS with CSS-modules
  // The point is that they remain in global scope.
  // Since we require these CSS files in our JS or CSS files,
  // they will be a part of our compilation either way.
  // So, no need for ExtractTextPlugin here.
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader'],
}

instead of

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
}

For more information please look into this - https://github.com/react-boilerplate/react-boilerplate/pull/1599#issuecomment-280843785

ghost on Apr 3, 2017

@KarandikarMihir Thanks for taking time to reply, I followed as you suggested in the above comment, now I’m getting

(node:32091) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
webpack built 300c48f08c417bb0cd1f in 2475ms

ERROR in ./~/sanitize.css/sanitize.css
Module parse failed: /var/www/html/shopping-app-react/node_modules/sanitize.css/sanitize.css Unexpected token (23:8)
You may need an appropriate loader to handle this file type.
| nav,
| section,
| summary { /* 1 */
| 	display: block;
| }
 @ ./app/app.js 17:0-35
 @ multi main
Child html-webpack-plugin for "index.html":

One more 😃, As per the doc - https://github.com/react-boilerplate/react-boilerplate#features Instant feedback, if I’m right if I change any .js file, let us take footer.js file, it should render automatically in the browser, but its not rendering until unless I start the server again npm start

ghost on Apr 3, 2017

Please refer to css docs

mihir0x69 on Mar 31, 2017

@KarandikarMihir
Could you please suggest few GitHub repo’s which are using React boilerplate. So it might help us.

ghost on Apr 4, 2017

@bharadwajag Great. Can you post the exact problem and how you solved it? It might help others too.

mihir0x69 on Apr 3, 2017

Hello, Me also facing the same problem, while I’m trying to include .css file in one of my components, getting below error.

ERROR in ./app/components/Footer/footer.css
Module parse failed: /var/www/html/shopping-app-react/app/components/Footer/footer.css Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| /* Footer styles */
| footer {
|   padding: 25px 0;
|   text-align: center;
 @ ./app/components/Footer/index.js 9:0-22
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi main

ghost on Mar 31, 2017