React - unexpected css token with Webpack/babel-register

524 Views Asked by At

In my React app, I'd like to use style-loader/css-loader with Webpack to import a stylesheet from another Node module, react-quill - https://github.com/zenoamaro/react-quill. I've obviously not configured it correctly, though, as my app throws the error

.ql-container {
^
SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/username/Desktop/Development/project/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/username/Desktop/Development/project/src/Quill/Quill.jsx:2:1)

Following the react-quill docs, I've imported the stylesheet into my Quill.jsx component using

import theme from 'react-quill/dist/quill.snow.css'

and my Webpack config:

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: './public/bundle.js',
    publicPath: '/'
  },
  module: {
    loaders: [
      { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
        query: {
          presets:['react','es2015','stage-2']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  }
}

and looking at my bundle.js, I can see that the Quill stylesheet was included in the build.

Finally, one of the errors refers to babel-register, which I'm using in development to handle on-the-fly transpiling for server-side rendering - it appears as

require('babel-register')({
    presets: ['es2015','react','stage-2']
})

Can anyone offer any guidance?

0

There are 0 best solutions below