I was trying to use react-datetime-range-picker and When I import it I started getting error.
I have tried other solution but did not work.
Full Error
javascript modules 6.14 KiB
./src/pages/Campaign/CampaignNew.js 2.39 KiB [built]
./node_modules/react-datetime-range-picker/dist/style.css 3.75 KiB [built] [1 error]
ERROR in ./node_modules/react-datetime-range-picker/dist/style.css 5:0
Module parse failed: Unexpected token (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured
to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> .rdt {
| position: relative;
| }
@ ./node_modules/react-datetime-range-picker/dist/index.js 27:0-22
@ ./src/pages/Campaign/CampaignNew.js 3:0-62
@ ./src/App.js 6:0-55 16:46-57
@ ./src/index.js 1:0-24
I checked webpack.config.js but it looks correct to me.
I have installed style-loader, css-loader
webpack.config.js
const path = require("path");
const webpack = require("webpack");
require('dotenv').config({path: './.env'});
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/app_chat/js"),
filename: "[name].js",
},
module: {
rules: [
{
test: /.(jsx|js)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.(sass|scss|css)$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
],
};
package.json
{
"name": "app_chat",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"axios": "^1.2.4",
"babel-loader": "^9.1.2",
"dotenv": "^16.0.3",
"react": "^18.2.0",
"react-datetime": "^3.2.0",
"react-datetime-range-picker": "^3.0.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",
"react-switch": "^7.0.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"devDependencies": {
"css-loader": "^6.7.3",
"style-loader": "^3.3.1"
}
}
What should I do to fix this problem ?