Truffle-contract installed, but receiving error in Chrome console: Uncaught Error: Cannot find module 'truffle-contract'

Question

I am working on my first end to end ethereum project. A problem that I am stuck on is that I have installed 'truffle-contract', but when I run my server and open the project in the Chrome browser, the console is reporting:

Uncaught Error: Cannot find module 'truffle-contract'
at s (_prelude.js:1)
at s (_prelude.js:1)
at splitter.js:1

My node_modules is showing the 'truffle-contract'. Package.json is showing it as well:

  "dependencies": {
"truffle-contract": "^3.0.6"
}

In my app folder, I have a 'splitter.js' file which has the require of truffle-contract:

var contract = require("truffle-contract");
const splitterJson = require("../build/contracts/Splitter.json");
const Splitter = contract(splitterJson);

It is showing tripple dots under the first double quote of "truffle-contract", which shows the following when hovered over:

Could not find a declaration file for module 'truffle-contract'. 
'/home/richard/workspace/Splitter/node_modules/truffle- 
contract/index.js' implicitly has an 'any' type.
Try `npm install @types/truffle-contract` if it exists or add a new 
declaration (.d.ts) file containing `declare module 'truffle-   
contract';`ts(7016)
module "/home/richard/workspace/Splitter/node_modules/truffle- 
contract/index"

Installing with @types didn't make a difference. The path specified is correct.

I have removed node_modules and ran 'npm init', 'npm install truffle-contract' and 'npm install' from fresh, but it made no difference.

Any suggestions as to why it can't find module?

Answer 1

"require" doesn't work on the client side by default, it's only available on the server side (ie NodeJS). Webpack needs to be used to package the app folder and make it run on the server side, which then will make the "require" work.