I'm building a react app.
I imported a slider into a file, then I got a css-loader. I'm using webpack.
Here is my slider:
import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';
export const Slider = () => {
const [value, setValue] = useState(0.5)
return <RubberSlider width={250} value={value} onChange={setValue} />
}
This ^ will go in another component and get called on.
All is well when I comment out
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';
but I need these styles for the slider, when I run my Webpack command I get this error:
src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./src/index.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) /Users/eddy/Projects/Sorting-Visualizer/src/index.js Unknown word
> 1 | import React from 'react';
| ^
2 | import ReactDOM from "react-dom";
3 | import
Here is my webpack.config.js file:
const path = require("path");
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: { extensions: [".mjs", ".js", ".jsx", ".css"] },
module: {
rules: [
{
test: /\.js|jsx|.css$/,
use: [ "style-loader", "css-loader", "babel-loader"],
exclude: /node_modules/,
// loader: "style-loader!css-loader"
},
]
},
}
module.exports = config;
What am I doing wrong?
Thank you!