From c065035289f513323fc8b7fe9fca25cf9fc55753 Mon Sep 17 00:00:00 2001 From: dab Date: Tue, 10 Jan 2023 11:57:33 +0100 Subject: [PATCH 1/3] Update readme.md for using with Webpack 5 --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index 8a2826d..8c6064e 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,39 @@ The only differences with a traditional create-react-app application are : See [`src/App.js`](./src/App.js) for the code. ### [view the live demo](https://react-sqljs-demo.ophir.dev/) + +## Using with Webpack 5 +Webpack 5 do not include nodejs polyfills by default, and you'll have to explicitely specify the file-loader for `wasm` file. So you'll need to update `craco.config.js` as below +```js +module.exports = { + webpack: { + 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') + } + }, + }, + }, +}; +``` +And add the required module to your project +``` +npm install -D path-browserify crypto-browserify stream-browserify +``` +or +``` +yarn add -D path-browserify crypto-browserify stream-browserify +``` From 2b8e8b759d84faf257be91721b27ece1866d12b1 Mon Sep 17 00:00:00 2001 From: dbuchet Date: Tue, 10 Jan 2023 15:15:57 +0100 Subject: [PATCH 2/3] Update craco.config to work with webpack5 --- README.md | 37 +++++-------------------------------- craco.config.js | 21 ++++++++++++++------- package.json | 10 +++++----- 3 files changed, 24 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 8c6064e..6237548 100644 --- a/README.md +++ b/README.md @@ -8,38 +8,7 @@ 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. - - ### [view the live demo](https://react-sqljs-demo.ophir.dev/) - -## Using with Webpack 5 -Webpack 5 do not include nodejs polyfills by default, and you'll have to explicitely specify the file-loader for `wasm` file. So you'll need to update `craco.config.js` as below -```js -module.exports = { - webpack: { - 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') - } - }, - }, - }, -}; -``` -And add the required module to your project +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 ``` @@ -47,3 +16,7 @@ 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/) \ 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", From 08f104c4d1d7495be0bf933189f4d28a95e224ac Mon Sep 17 00:00:00 2001 From: dbuchet Date: Tue, 10 Jan 2023 15:36:28 +0100 Subject: [PATCH 3/3] link to actual readme for webpack 4 configuration --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6237548..93df72d 100644 --- a/README.md +++ b/README.md @@ -19,4 +19,7 @@ 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/) \ No newline at end of file +### [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