Error on import

[meymeynard]

Hello. I'm encountering this error when importing the style.css

Uncaught Error: Cannot find module 'react-sweet-progress/lib/style.css'

My component looks like this:

import { Progress } from 'react-sweet-progress'
import 'react-sweet-progress/lib/style.css'

class ProgressModal extends Component {
  render () {
    const { onCloseModal } = this.props
    return (
      <Fragment>
        <ModalBody>
          <Progress percent={88} status='active' />
        </ModalBody>
        <ModalFooter>
          <button disabled onClick={onCloseModal}>
            Please wait a moment
          </button>
        </ModalFooter>
      </Fragment>
    )
  }
}

[nickbullll]

Check node_modules/react-sweet-progress/lib is there style.css ?

[Martialdelastic]

I have style.css in node_modules/react-sweet-progress/lib but i have this error Unable to resolve "react-sweet-progress/lib/style.css"

[nickbullll]

Are you using webpack?

If so, can you provide your webpack config file here.

[dfarrel1]

Hi @abraztsov, I don't mean to hijack this issue but I'm having an import issue as well.

I'm getting

ERROR in ./node_modules/react-sweet-progress/lib/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .react-sweet-progress {
|   display: -ms-flexbox;
|   display: flex;
 @ ./src/components/gifteeOnboarding/GifteeOnboardingForms.js 27:0-45
 @ ./src/components/gifteeOnboarding/GifteeOnboardingApp.js
 @ ./src/index.js

my webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

any idea what I might try to fix this?

ahhh I think I got it, just added this and looks like it's working:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
        ],
      }
    ]
  }
};

[yuvaraj119]

@dfarrel1 I'm getting the same issue, where to add the code which you have shared above. I am using in react-native android

[dfarrel1]

That was a webpack config. If you’re not using webpack then I’m not sure how you fix the issue. You did get a different error though, as shown in the original post on this thread. Not sure it’s the same issue I had.