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?