CODEWITHSUNDEEP
javascriptcssreactjswebpack
Harry Z. Huang
Harry Z. Huang

Reputation: 79

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. CSS

I'm rather new so bear with me. Im using the babel loader in my webpack config for a react app. However, it doesn't seem to want to process CSS. When I remove the CSS file from my project, it works fine. This is the error im getting

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

This is what my webpack looks like

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'],
        },
      },
    ],
  },
};

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'));

And lastly my App.js to which index.js refers to

import '../../public/App.css'
import React from "react";
import { Menu, Navbar } from '../components';

// Menu app designed for mobile menu viewing. No ordering functionality.

const App = () => {
  return (
    <div id='window'>
      Hello im 
      <Menu />
      <Navbar/>
    </div>
  );
};

export default App;

Upvotes: 2

Views: 6670

Answers (1)

Giorgio Tempesta
Giorgio Tempesta

Reputation: 2059

Babel is intended to only process JavaScript files, so as the error message suggests, you will need to add a CSS loader.

If you look at the Webpack documentation:

You'll find out that in fact you need at least two loaders to process your css.

So here's what you should do:

  • Install style loader:
npm install style-loader
  • Install css loader
npm install css-loader
  • Update your Webpack configuration by adding a new value to your rules array, which will become:
rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
    },
  },
  {
    test: /\.css$/i,
    use: ["style-loader", "css-loader"],
  },
],

This should fix the error.

Upvotes: 1

Related Questions