diff --git a/README.md b/README.md index 8a2826d..93df72d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,18 @@ The only differences with a traditional create-react-app application are : Note that you should make sure your server serves `.wasm` files with the right mimetype, that is: `application/wasm`. Otherwise, you'll see the following error: `TypeError: Response has unsupported MIME type` - See [`src/App.js`](./src/App.js) for the code. +Webpack 5 do not include nodejs polyfills by default, so you'll need to include them by adding them as dev dependency +``` +npm install -D path-browserify crypto-browserify stream-browserify +``` +or +``` +yarn add -D path-browserify crypto-browserify stream-browserify +``` + +See [`src/App.js`](./src/App.js) for the code. - ### [view the live demo](https://react-sqljs-demo.ophir.dev/) +### [view the live demo](https://react-sqljs-demo.ophir.dev/) + +### Using Webpack 4 +See [here](https://github.com/sql-js/react-sqljs-demo/tree/v1) for craco configuration using Webpack 4 \ No newline at end of file diff --git a/craco.config.js b/craco.config.js index 7a6e104..1efdcec 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,13 +1,20 @@ module.exports = { webpack: { - configure:{ - // See https://github.com/webpack/webpack/issues/6725 - module:{ + configure: { + module: { rules: [{ test: /\.wasm$/, type: 'javascript/auto', - }] - } - } - } + use: [{ loader: 'file-loader' }] + }], + }, + resolve: { + fallback: { + 'path': require.resolve('path-browserify'), + 'crypto': require.resolve('crypto-browserify'), + 'stream': require.resolve('stream-browserify') + } + }, + }, + }, }; \ No newline at end of file diff --git a/package.json b/package.json index 8020f89..689d27d 100644 --- a/package.json +++ b/package.json @@ -9,13 +9,13 @@ "main": "src/index.js", "license": "MIT", "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2", - "sql.js": "^1.6.2" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sql.js": "^1.8.0" }, "devDependencies": { - "@craco/craco": "^5.9.0", - "typescript": "^4.5.5" + "@craco/craco": "^7.0.0", + "typescript": "^4.9.4" }, "scripts": { "start": "craco start",