As a beginner, I'm still learning the ropes. I've integrated the babel loader into my webpack configuration for a react application. However, it seems to be having trouble processing CSS files. Interestingly, when I remove the CSS file from my project, everything works perfectly fine. Here's the error message that's popping up:
ERROR in ./public/App.css 1:0
Module parse failed: Unexpected token (1: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
> #root, #window, body{
| min-height: 100vh;
| position: relative
@ ./src/app/App.js 2:0-30
@ ./src/index.js 3:0-28 4:50-53
Here is a snippet of my webpack configuration:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
};
This is my entry point index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
ReactDOM.render(<App />, document.getElementById('root'));
Lastly, here is my App.js file which is referenced in index.js:
import '../../public/App.css'
import React from "react";
import { Menu, Navbar } from '../components';
// Mobile-friendly menu app with no ordering functionality.
const App = () => {
return (
<div id='window'>
Hello!
<Menu />
<Navbar/>
</div>
);
};
export default App;