CODEWITHSUNDEEP
reactjswebpack
Tarun Nagpal
Tarun Nagpal

Reputation: 700

Webpack React - CSS Loader Issue

I am getting the following error.

ERROR in ./node_modules/react-clock/dist/Clock.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

.react-clock { | display: block; | position: relative;

ERROR in ./node_modules/react-time-picker/dist/TimePicker.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

.react-time-picker { | display: inline-flex; | position: relative; i ｢wdm｣: Failed to compile.

Upvotes: 1

Views: 953

Answers (2)

Tarun Nagpal
Tarun Nagpal

Reputation: 700

I am able to solve the issue by just replacing the code.

Older

{
       test: /\.css$/,
       exclude: /node_modules/,
       use: ["style-loader", "css-loader"]}

Newer 

{ test: /\.css$/, use: ["style-loader", "css-loader"] },

I was using a css file from the node_modules and it was excluded.

Thanks for the help Guys

Upvotes: 1

Vishnu
Vishnu

Reputation: 1701

You could use css loader for this, Add the following to the rules array in webpack config should be fine:

{
  test: /\.css$/,
  // exclude: /node_modules/,
  use: [
      {
        loader: "style-loader",
      },
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
        },
      },
    ],
},

Upvotes: 0

Related Questions