Uncaught Error: Cannot find module 'cloudinary-react/lib/components/CloudinaryContext' from 'cloudinary-react/lib/index.js'

This is my code

import React from 'react';
import {Image, CloudinaryContext, Transformation} from 'cloudinary-react';

class ImageUpload extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello, world!</h1>
        <Image cloudName="demo" publicId="sample" width="300" crop="scale"/>
      </div>
    );
  }
}

export default ImageUpload;

In the console:

Uncaught Error: Cannot find module 'cloudinary-react/lib/components/CloudinaryContext' from 'cloudinary-react/lib/index.js'

But the folder Exists (I’m installed via npm)

What is the problem?

Thanks

[eitanp461]

@hmontes It is definitely brunch.io, it works fine out of the box with Webpack.

Brunch are not using standard NPM package lookups, and loads all modules with their resolved name, e.g. it caches cloudinary-react/lib/components/CloudinaryComponent/CloudinaryComponent.js

However our code is using the module folders as modules pattern, so it requires cloudinary-react/lib/components/CloudinaryComponent which cannot be resolved by Brunch.

Nevertheless, you can overcome this issue by aliasing Cloudinary’s files in your brunch-config.js by adding:

exports.npm = {
  aliases: {
    "cloudinary-react/lib/components/CloudinaryContext": "cloudinary-react/lib/components/CloudinaryContext/CloudinaryContext.js",
    "cloudinary-react/lib/components/CloudinaryComponent": "cloudinary-react/lib/components/CloudinaryComponent/CloudinaryComponent.js",
    "cloudinary-react/lib/components/Image": "cloudinary-react/lib/components/Image/Image.js",
    "cloudinary-react/lib/Util": "cloudinary-react/lib/Util/Util.js",
    "cloudinary-react/lib/components/Transformation": "cloudinary-react/lib/components/Transformation/Transformation.js",
    "cloudinary-react/lib/components/Video": "cloudinary-react/lib/components/Video/Video.js"
  }
}

[eitanp461]

@hmontes Where did you see that error? What was the command you were running?