Closed j-berman closed 5 years ago
I solved it by adding
externals: { 'sqlite3':'commonjs sqlite3', }
to the webpack config file
@janglada unfortunately I'm unable to get this to work, but I'm working on it. I saw this solution in issue #698 as well.
When I attempt to add externals: { sqlite3: 'commonjs sqlite3' }
to my webpack config file and start the node server via npm start
, the server appears to run perfectly fine with no errors in the command line. However, when I open up the browser to interact with the app, I get the following error in the browser console:
external "sqlite3":1 Uncaught ReferenceError: require is not defined
at Object.sqlite3 (external "sqlite3":1)
at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678)
at fn (bootstrap c8470ec94022a2bb9e9f:88)
at Object../src/App.js (App.js:4)
at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678)
at fn (bootstrap c8470ec94022a2bb9e9f:88)
at Object../src/index.js (index.css?f255:26)
at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678)
at fn (bootstrap c8470ec94022a2bb9e9f:88)
at Object.0 (registerServiceWorker.js:117)
at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap c8470ec94022a2bb9e9f:724)
at bootstrap c8470ec94022a2bb9e9f:724
I could be getting this wrong, but in looking around to understand this issue, it's because when you add externals
to the webpack file, it tells webpack to ignore bundling sqlite3 prior to running the app and to load the dependency at run-time. But, that also means sqlite3 won't get loaded within node's execution environment -- the browser attempts to load it. And the browser doesn't have a built-in require function like node does, thus the undefined reference error. I've found some potential solutions to this that I'm currently in the process of exploring
have same issue, and what's interesting. In runtime it fails on sqlite3's package.json require
@janglada solution solved my issue
I am having an exact same issue as @j-berman but I am not still able to resolve it. does anyone got any solution/fix ? Below is my error.
[0] Starting the development server...
[0]
[0] Compiled with warnings.
[0]
[0] ./node_modules/sqlite3/lib/sqlite3.js
[0] Critical dependency: the request of a dependency is an expression
[0]
[0] ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/pre-binding.js
[0] Critical dependency: the request of a dependency is an expression
[0]
[0] ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/versioning.js
[0] Critical dependency: the request of a dependency is an expression
[0]
[0] ./src/App.js
[0] Line 19: 'electron_process' is assigned a value but never used no-unused-vars
[0] Line 20: 'electron_app' is assigned a value but never used no-unused-vars
[0] Line 37: Expected '===' and instead saw '==' eqeqeq
[0]
[0] ./src/Login.js
[0] Line 5: 'db' is assigned a value but never used no-unused-vars
[0] Line 63: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
[0]
[0] ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/compile.js
[0] Module not found: Can't resolve 'npm' in '/Volumes/Example/node_modules/sqlite3/node_modules/node-pre-gyp/lib/util'
[0]
[0] ./node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/nw-pre-gyp/index.html 1:0
[0] Module parse failed: Unexpected token (1:0)
[0] You may need an appropriate loader to handle this file type.
[0] > <!doctype html>
[0] | <html>
[0] | <head>
[0]
[0] Search for the keywords to learn more about each warning.
[0] To ignore, add // eslint-disable-next-line to the line before.
[0]
I think node-pre-gyp requires python 2.7
I already have python 2.7.10 installed
There are prerequisites for using sqlite3
, and it must be in a node environment,I tried the above solution. electron
can be used and the browser will report an error. such as : require('sqlite3')
@FengYangLiu that makes sense. Unfortunately I've been super busy lately and haven't gotten around to digging much deeper. But, essentially I think the root of this boils down to the sandboxed nature of the browser: the local filesystem isn't inherently available to a web page. I think sqlite3
is designed to run within a node environment with access to the local filesystem (i.e. not from within the browser).
I think the architecture I was aiming for (a browser that uses a local sql db file as the persistent data store) is only achievable like this:
sqlite3
to interact with itActually implementing 1 seems too fragile because it would only work in Chrome and Chrome may drop support for it in the future. I didn't look much into this route at all.
I don't like 2 because the process of importing/exporting the db file (and the size limitation of the db) feels pretty terrible.
I think the best/closest solution to my desired architecture is IndexedDB (and using one of those libraries noted that uses IndexedDB.. Lovefield is also a sql-based library for reference if anyone is looking for that -- I saw someone mentioned using that in issue 698).
Overall, I don't think this is an issue with sqlite3
so I'm going to close the issue
I have the same issue, however, I couldn't solve it. I'm using Angular + Electron, I described my issue here:
any help would be much appreciated.
UPDATE: I've found a SOLUTION for my issue, you find it in the link above.
I don't think @FrancescoBorzi method works with the most recent angular-electron boilerplate
@TheLazyHatGuy you can add a new answer to my original question :)
@FrancescoBorzi I haven't figured out the answer yet. Tried to apply your suggestion from Stack Overflow but it didn't work
Is there any solution? i'm still having this problem.
I solved it by adding
externals: { 'sqlite3':'commonjs sqlite3', }
to the webpack config file
Works for me with electron. But why?
I really appreciate this more detailed response. I was experiencing the same error with a CRA-based app I'm working on, and now I realize that I will need to shift the sqlite code to a mini-service rather than continuing to try and resolve the error.
Thank you!
@FengYangLiu that makes sense. Unfortunately I've been super busy lately and haven't gotten around to digging much deeper. But, essentially I think the root of this boils down to the sandboxed nature of the browser: the local filesystem isn't inherently available to a web page. I think
sqlite3
is designed to run within a node environment with access to the local filesystem (i.e. not from within the browser).
No problem @tim-rohrer :)
Side note, excuse this shameless self-promotion, but I helped make a tool to satisfy my requirements on this and figure it may be useful. I'm planning to release it in the next week. It's end-to-end encrypted sql.js -- an encrypted sql.js database gets loaded from the server and decrypted client-side. All writes to the database are encrypted.
I talked about it a bit here, and made a CRA-based app with it here (can also check the console in that app to see the SQL statements in action)
@tim-rohrer
Here's the end-to-end encrypted sql.js tool I mentioned above! Hope others arriving here may find it useful too.
@janglada unfortunately I'm unable to get this to work, but I'm working on it. I saw this solution in issue #698 as well.
When I attempt to add
externals: { sqlite3: 'commonjs sqlite3' }
to my webpack config file and start the node server vianpm start
, the server appears to run perfectly fine with no errors in the command line. However, when I open up the browser to interact with the app, I get the following error in the browser console:external "sqlite3":1 Uncaught ReferenceError: require is not defined at Object.sqlite3 (external "sqlite3":1) at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678) at fn (bootstrap c8470ec94022a2bb9e9f:88) at Object../src/App.js (App.js:4) at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678) at fn (bootstrap c8470ec94022a2bb9e9f:88) at Object../src/index.js (index.css?f255:26) at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678) at fn (bootstrap c8470ec94022a2bb9e9f:88) at Object.0 (registerServiceWorker.js:117) at __webpack_require__ (bootstrap c8470ec94022a2bb9e9f:678) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap c8470ec94022a2bb9e9f:724) at bootstrap c8470ec94022a2bb9e9f:724
I could be getting this wrong, but in looking around to understand this issue, it's because when you add
externals
to the webpack file, it tells webpack to ignore bundling sqlite3 prior to running the app and to load the dependency at run-time. But, that also means sqlite3 won't get loaded within node's execution environment -- the browser attempts to load it. And the browser doesn't have a built-in require function like node does, thus the undefined reference error. I've found some potential solutions to this that I'm currently in the process of exploring
so, do you have a better way to solve this problem, I'm in the same case :(
@eyea
I think this is the main limiting issue:
node-sqlite3 is designed to run within a node environment with access to the local filesystem (i.e. not from within the browser)
And the local filesystem isn't available to JS running in the browser.
But, I did just come across this package called BrowserFS that may help you workaround that. Check out their webpack config. Haven't tried it, I'm not optimistic :/ I bet with some serious hacking this could eventually be made to work, but would be pretty challenging
Edit: this require script may come in handy too
This https://github.com/mapbox/node-sqlite3/issues/1029#issuecomment-414116796 worked for me.
For those using vue3 cli and they don't have webpack config file - just edit or create vue.config.js file in project root directory and add following:
module.exports = { configureWebpack: { externals: { 'sqlite3': 'commonjs sqlite3', } } }
Reference: https://stackoverflow.com/a/50304636/4642868
I've been trying to get sqlite3 imported into a create-react-app for the past couple days. Any help would be much appreciated. When I initially install and run the app, I get the following compile error:
After I install aws-sdk (either by installing inside
./node_modules/node-pre-gyp
or on the project's root), I get the following output in my CLI when I try to run the app:And I get this runtime error:
I've tried installing from source, installing past versions, using a different node version, and looking into similar issues (#909 , this issue, this issue, and some others) with no luck.
From what I've seen, it appears the issue may stem from how webpack is configured, but my familiarity with webpack is pretty lacking. For reference, create react app automatically configures webpack with this config file.
Also for reference, here's the log when I install regularly with
npm install sqlite3 --loglevel=info
: