Troubleshooting
This section lists some common compatibility requirements and how to address them
You may need to update your
craco.config.js file (or create a new one) with the followingconst webpack = require("webpack");
module.exports = {
webpack: {
plugins: {
add: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
],
},
configure: (webpackConfig) => {
// ts-loader is required to reference external typescript projects/files (non-transpiled)
webpackConfig.module.rules.push({
test: /\\.tsx?$/,
loader: "ts-loader",
options: {
transpileOnly: true,
configFile: "tsconfig.json",
},
});
webpackConfig.resolve.fallback = {
// crypto and stream needed for @celo/utils
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
url: false,
zlib: false,
https: false,
http: false,
};
return webpackConfig;
},
},
};
There's a known incompatibility issue with Capsule CSS loading with apps using Next.js SSR. As a temporary workaround, we recommend the following
- 1.Add 'style-loader' and 'css-loader' as dev dependencies for your project.
yarn add style-loader css-loader --dev
- 2.Make the following change to your
next.config.jsfile
module.exports = {
reactStrictMode: true,
webpack: (config, { isServer }) => {
config.resolve.fallback = {
...config.resolve.fallback, // The rest of your fallbacks if necessary
fs: false,
crypto: 'crypto-browserify'
}
// Push new rules to the module in the webpack config
if (!isServer) {
config.module.rules.push({
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
})
config.module.rules.push({
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
})
}
return config
}
}
- 3.
const [CapsuleButtonComponent, setCapsuleButtonComponent] = useState<FC<{ capsule: any; appName: string; }> | null>(null);
const [capsuleInstance, setCapsuleInstance] = useState(null);
async function loadCapsule() {
let loadedInstance;
if (!capsuleInstance) {
const CapsuleModule = await import('@usecapsule/web-sdk');
loadedInstance = new CapsuleModule.default(CapsuleModule.Environment.DEVELOPMENT);
}
return loadedInstance;
}
useEffect(() => {
async function loadCapsuleModule() {
const { Button: CapsuleButton } = await import('@usecapsule/web-sdk');
setCapsuleButtonComponent(() => CapsuleButton);
}
loadCapsuleModule();
}, []);
useEffect(() => {
loadCapsule().then(capsule => {
setCapsuleInstance(capsule);
});
}, []);
// Now you can use the Capsule component as follows
<CapsuleButtonComponent capsule={capsuleInstance} appName="WalletConnect" />