casual
casual copied to clipboard
Error when using casual with `create-react-app`
Steps to reproduce:
- Create a new React app using
create-react-app
, i.e.npm create react-app casual-test
- Run
yarn add casual
- Update the default
App.js
component like this - 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...).
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.
@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.
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'
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.