CODEWITHSUNDEEP
reactjswebpack
chum of chance
chum of chance

Reputation: 6290

Using react-bootstrap-typeahead generating CSS errors

I'm using the following without modification (except for trying to add the typeahead to the project):

React Bootstrap Typeahead

React Redux Universal Hot Example

There's a note in the typeahead module about setting up CSS:

Browserify users will need to use browserify-css (or something similar) to handle the CSS bundling, while Webpack user will need to use css-loader and/or style-loader in their webpack config file.

Here is the stock Webpack config from the example:

    loaders: [
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
  { test: /\.json$/, loader: 'json-loader' },
  { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
  { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
  { test: /\.css$/, loader: "css=style!css"}, // I added this line
  { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]

Yet I'm still getting this error:

[0] ./~/react-bootstrap-typeahead/css/Typeahead.css
[0] Module parse failed: /Users/myproject/react-redux-universal-hot-example/node_modules/react-bootstrap-typeahead/css/Typeahead.css Unexpected token (1:0)
[0] You may need an appropriate loader to handle this file type.
[0] SyntaxError: Unexpected token (1:0)

Followed by this further down:

[1] [require-hook] Trying to load "Token.css" as a "*.js"

So apparently I'm doing something wrong with this. I've been googling but I'm a bit stumped about:

  1. What I am doing wrong to make the error go away.
  2. What exactly these loaders are trying to accomplish, and why it is not picking it up.

Thanks!

Upvotes: 2

Views: 984

Answers (2)

ericgio
ericgio

Reputation: 3499

Note that v0.5.x of the module stopped requiring CSS directly in JS files, so this should no longer be a problem.

As far as your original question, Filip's answer should work but if not you might also try:

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

Upvotes: 0

Filip Dupanović
Filip Dupanović

Reputation: 33650

I think this should work:

{ test: /\.css$/, include: /node_modules/, loader: "style!css"}

And you need to have css-loader and style-loader installed. Not sure how well Webpack reports on missing loaders.

Upvotes: 1

Related Questions