diff --git a/examples/js-example/package.json b/examples/js-example/package.json index 415ed1c..b4173f5 100644 --- a/examples/js-example/package.json +++ b/examples/js-example/package.json @@ -4,10 +4,13 @@ "main": "index.js", "license": "MIT", "dependencies": { - "@circle-fin/w3s-pw-web-sdk": "^1.0.0", + "@circle-fin/w3s-pw-web-sdk": "^1.1.1", + "buffer": "^6.0.3", "html-webpack-plugin": "^5.5.3", "jquery": "^3.7.1", "live-server": "^1.2.2", + "node-polyfill-webpack-plugin": "^4.0.0", + "process": "^0.11.10", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" diff --git a/examples/js-example/webpack.config.js b/examples/js-example/webpack.config.js index b5b8825..43192c4 100644 --- a/examples/js-example/webpack.config.js +++ b/examples/js-example/webpack.config.js @@ -1,6 +1,7 @@ const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') +const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') module.exports = { entry: './src/index.js', @@ -16,7 +17,17 @@ module.exports = { $: 'jquery', jQuery: 'jquery', }), + new NodePolyfillPlugin(), + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'], + }) ], + resolve: { + alias: { + process: 'process/browser', + }, + }, devServer: { static: { directory: path.join(__dirname, 'dist'), diff --git a/examples/react-example/config-overrides.js b/examples/react-example/config-overrides.js new file mode 100644 index 0000000..c184d0f --- /dev/null +++ b/examples/react-example/config-overrides.js @@ -0,0 +1,30 @@ +const webpack = require('webpack') + +module.exports = function override(config) { + const fallback = config.resolve.fallback || {} + + Object.assign(fallback, { + buffer: require.resolve('buffer/'), + crypto: require.resolve('crypto-browserify'), + stream: require.resolve('stream-browserify'), + util: require.resolve('util/'), + vm: require.resolve('vm-browserify'), + 'process/browser': require.resolve('process/browser'), + }) + + config.resolve.fallback = fallback + config.plugins = (config.plugins || []).concat([ + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'], + }), + ]) + config.module.rules.unshift({ + test: /\.m?js$/, + resolve: { + fullySpecified: false, + }, + }) + + return config +} diff --git a/examples/react-example/package.json b/examples/react-example/package.json index bbdb655..3424adf 100644 --- a/examples/react-example/package.json +++ b/examples/react-example/package.json @@ -3,18 +3,25 @@ "version": "0.1.0", "private": true, "dependencies": { - "@circle-fin/w3s-pw-web-sdk": "^1.0.0", + "@circle-fin/w3s-pw-web-sdk": "^1.1.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "buffer": "^6.0.3", + "crypto-browserify": "^3.12.0", + "process": "^0.11.10", + "react": "^18.3.1", + "react-app-rewired": "^2.2.1", + "react-dom": "^18.3.1", "react-scripts": "5.0.1", + "stream-browserify": "^3.0.0", + "util": "^0.12.5", + "vm-browserify": "^1.1.2", "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", + "start": "react-app-rewired start", + "build": "react-app-rewired build", "test": "react-scripts test", "eject": "react-scripts eject" }, diff --git a/examples/vue-example/package.json b/examples/vue-example/package.json index 6580ee8..2a71ac7 100644 --- a/examples/vue-example/package.json +++ b/examples/vue-example/package.json @@ -8,7 +8,10 @@ "preview": "vite preview" }, "dependencies": { - "@circle-fin/w3s-pw-web-sdk": "^1.0.0", + "@circle-fin/w3s-pw-web-sdk": "^1.1.1", + "buffer": "^6.0.3", + "process": "^0.11.10", + "vite-plugin-node-polyfills": "^0.22.0", "vue": "^3.2.47" }, "devDependencies": { diff --git a/examples/vue-example/vite.config.js b/examples/vue-example/vite.config.js index de5cb31..0a6d6e3 100644 --- a/examples/vue-example/vite.config.js +++ b/examples/vue-example/vite.config.js @@ -1,14 +1,14 @@ +import vue from '@vitejs/plugin-vue' import { fileURLToPath, URL } from 'node:url' - import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' +import { nodePolyfills } from 'vite-plugin-node-polyfills' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue()], + plugins: [nodePolyfills(), vue()], resolve: { alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, + }, })