Skip to content

Update readme.md for use with Webpack 5 #24

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update readme.md for use with Webpack 5 #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c065035
Update readme.md for using with Webpack 5
dbuchet Jan 10, 2023
2b8e8b7
Update craco.config to work with webpack5
dbuchet Jan 10, 2023
08f104c
link to actual readme for webpack 4 configuration
dbuchet Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
21 changes: 14 additions & 7 deletions craco.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
Comment on lines +13 to +15
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we actually use path, crypto and stream anywhere ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that a good question, and honestly I don"t really know how webpack handle wasm, nor how sql.js is built.
My point is everything was working fine for me with Webmact4, and when updating to Webpack5 I had 3 successive errors saying "path", "crypto" and "stream" are not included as polyfill (comming from sql.js/dist), , and adding these lines fixed the error and everything run again smoothly

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably avoid encouraging users to bundle three dependencies they don't need with their code.

Copy link

@Strengthless Strengthless Jun 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to path, crypto and stream, I've just encountered another error related to fs. It seems that setting the fallback of fs to false got it working for me. Is there a chance other dependencies can be set to false as well?

config.resolve.fallback = {
    'fs': false,
    'path': false,
    'crypto': false,
    'stream': false
  }

Edit: This seems to be working for my other repository using TypeORM + Sql.js + Expo Web! Requires further testing on React + Sql.js though I believe it should work the same.

}
},
},
},
};
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down