Error when using casual with create-react-app

[dplaton]

Steps to reproduce:

1. Create a new React app using create-react-app, i.e. npm create react-app casual-test
2. Run yarn add casual
3. Update the default App.js component like this
4. Run yarn start

The browser opens automatically and shows an error page saying TypeError: exists is not a function, pointing to this line

Tested on macOs Mojave (10.14.3) and Windows 10 1803

A quick SO search revealed this similar issue (Webpack...).

[liquidvisual]

Happened to me too with Vue.js, I think this library is not for Webpack - but for Node.js.

I ended up using https://github.com/marak/Faker.js/ which worked fine.

[dplaton]

@liquidvisual Sadly, I didn't manage to fix this. It appears to be an issue with Webpack - I could reproduce it even with a simple Webpack config an a code similar to

const fs = require('fs');
if (!fs) {
    console.log('No FS!');
}

When I executed the script without Webpack (i.e. using node) it ran successfully. When I bundled it with Webpack and ran it on a wepbage I hit the No FS! message.

[likethemammal]

I fixed this issue by using casual-browserify. Didnt need to change my webpack config at all, but I did need to replace the imports in any of the files that webpack built for the browser.

import casual from 'casual'

// to

import casual from 'casual-browserify'

[fiznool]

If you are running causal in the browser then you will need to tell webpack to bundle the fs module with your code. fs is something that only (by default) exists when running the code on the server with node.

Take a look at the node webpack configuration for instructions on how to bundle node APIs for consumption in the browser.