Can not use params in router (web), is it a bug?

[blatoo]

Hi all,

In this start template, I can not use params in router, is it a bug?

I only added one line in the App.tsx for a new link with parameter...

        <Route path="/detail/:id" component={Tab1} exact={true}/>

But I got this error: Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info. at K (jeep-sqlite.entry.js:2620) at jeep-sqlite.entry.js:2680

Here, I made two pictures:

1. my code:

2. the result:

   

Actually I also tried to write a new component, but the same error. Is it from jeep-sqlite, the web implementation?

Happy Holiday season! Conny

[jepiqueau]

@blatoo Look at react-sqlite-app-starter@3.3.3-2 i demonstrate the use of params in router without any issue.

[blatoo]

Hi @jepiqueau , can you tell me where can I find the react-sqlite-app-starter@3.3.3-2 ? The current master branch is 3.3.3-1, and there is no tag and branch called 3.3.3-1...

P.S If you are still in writing the 3.3.3-2 and need help to speed up, just tell me, what I can do for you. I am not experienced in javascript and only know react, but I think some basic tasks I should have no problem. 😄

[jepiqueau]

@blatoo the master is 3.3.3-2

[blatoo]

Hi Jepiqueau,

thanks so much for push the new version so quickly. But I tried the code, the same error:

I searched in internet and found an article about this error: Uncaught (in promise) RuntimeError: abort(CompileError:

Can the problem related to this topic?

(P.S. My system is macOS. I cleaned all the database in browser and then try chrome, firefox and safari, all the same...)

[jepiqueau]

@blatoo i do not understand i am on MacOs too which version of Nodejs are you using?

[jepiqueau]

@blatoo i do not understand i run it on macOs too. Which Nodejs version are you using?

[jepiqueau]

@blatoo Can you delete the sql-wasm.wasm file in the public/assets folder of your app and copy the sql-wasm.wasm file of the node_modules/sql.js/dist to the public/assets folder of your app and tell me if it works

[blatoo]

Hi Jepiqueau,

@jepiqueau My node was 16.xx.x, I can not remember which detailed version. I just deleted it and installed with nvm, so that I can switch different node version. I will tell you, if it works.

I will also test delete the sql-sasm.wasm, and tell you the result.

[blatoo]

Hi Jepiqueau,

I just used the node 17.3.0, but it still the same. Then, I deleted the sql-wasm.wasm and copy the one from node_modules/sql.js/dist , but it still the same error.

Can it be the error from sql.js??? I saw the jeep-sqlite use the sql.js@1.5.0, but the recent version is sql.js@1.6.2.

I will try to test on my old mac computer and tell you the result.

[jepiqueau]

@blatoo hi i used node v14.15.4 on macOs development platform, i know someone had a problem when using v16.x.x with the gyp not working and i completely fuck up my Windows development platform by installing the node 17.3.0 and could not repaired it yet. when you install jeep-sqlite it must install sql.js@1.5.0 it has only be tested with sql.js@1.5.0 and has a "peerDependencies": {"sql.js": "~1.5.0"} So you must not install the latest version of sql.js. This should be the reason of the error you got.

[blatoo]

@jepiqueau I didn't installed the sql.js@1.6.2. Currently I am trying to figure out how to make a docker image, so that we can have a same base... (I have a long time not use the docker, need to revive the knowledge... 😓 )

[jepiqueau]

@blatoo if i install sql.js@1.6.2 with a --force in the app ans run npm start i got the same error than you. now if i remove the node_modules folder and the package-lock.json and run npm install it works again. Now what is really strange if i update on my dev platform jeep-sqlite stencil component to sql.js@1.6.2 i can run the stencil component alone and it works fine So i do not really know what is going on in between Node, Capacitor and the wasm file.

[blatoo]

@jepiqueau currently I did the following experiment:

1. create a new project with ionic template with "react" -> "tabs"
2. copy your index.tsx, app.tsx and other related files into the new project, It works fine without any error.

So, it looks like in your sqlite template, some other files has caused the problem. No matter I use node 16 or 17, the same error.

I am still in figure out how to run a docker with node.js... 😅

[jepiqueau]

@blatoo i will have a look tomorrow

[blatoo]

@jepiqueau a short report: just tested on another mac with node 16.13.1, still the same error...

[jepiqueau]

@blatoo i have published jeep-sqlite@test so do npm i --save-dev jeep-sqlite@test it should be the version jeep-sqlite@1.3.4-test.1 after install in your app. do not forget to delete the sql-wasm.wasm file from your public/assets folder and to copy the sql-wasm.wasm file from the node_modules/sql.js/dist/sql-wasm.wasm file to the public/assets folder. having done this it should work. I test it in Windows platform with Node v17.1.0 and on macOS with Node v14.15.4 . I also create a branch test in react-sqlite-app-starter which is using jeep-sqlite@1.3.4-test.1. Hope this will be helpful. If it is working on your side i will update the jeep-sqlite stencil component to the latest version of sql.js

[jepiqueau]

@blatoo on Node v17.1.0 under windows i had to add the option --openssl-legacy-provider to the start and the build scripts in the package.json file

    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",

to run it

[blatoo]

@jepiqueau I just tested in linux 16.13.1 and macOS 16.13.1, the command can not be executed and said: "bad option: --openssl-legacy-provider"

yesterday I forked your this repo and made a branch: test_router_params https://github.com/blatoo/react-sqlite-app-starter/tree/test_router_params

I made a docker container and added a the node 16.13.1 and linux environment. If you use vscode as editor, you can easily open the code in the given environment. Yesterday I also send you a detailed email to your email address: jepi.queau@free.fr , can you take a look?

[jepiqueau]

@blatoo I did not see other email in jepi.queau@free.fr that the ones where you give me your comment from github. how can i install in docker your test_router_params is it easy

[blatoo]

@jepiqueau Did you get an email direct from "connygy@gmail.com"? Yesterday, the email I send you some screenshot how to open the dock enviornment in vscode, in case you don't know how to use it... But I guess... it is too basic for you. ^^

P.S. I just tested with node 17, and linux debian environment, it can run, but still the same error. It looks like "--openssl-legacy-provider" has no effect in linux and in macOs, it doesn't work.

It looks like somehow, the windows environment operates different as Linux.

[jepiqueau]

@blatoo No i did not

[blatoo]

@jepiqueau can you take a look at your email? I send the mail agian to "jepi.queau@free.fr", if not, will it landed in your spam???

[jepiqueau]

@blatoo Can you try to paste in the terminal (Unix-based OS)

export NODE_OPTIONS= --openssl-legacy-provider

but it seems that you remove some security.

one said that we have to move back to the current LTS version 16.13.0) where this problem does not occur

Can you send back you email to jeanpierre.queau@gmail.com

[blatoo]

In 16.13, terminal refuse to start, it said: "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS"

Just send you the email to "jeanpierre.queau@gmail.com"

[blatoo]

I think, the 17 version has a lot of problems. Even react native still doesn't support 17 now.

[jepiqueau]

@blatoo i just update my Windows platform to Node.js v16.13.0 and remove the --openssl-legacy-provider from the scripts start and build and it works fine

[blatoo]

Hi @jepiqueau I don't have windows... Have you tried to open my docker container? It is node 16.13

[jepiqueau]

@blatoo i did use the docker container provided by you and did in the terminal window

npm i --save-dev jeep-sqlite@test
npm i --save-dev react-sqlite-hook@latest

• delete the sql-wasm.wasm file from the public/assets folder
• copy the sql-wasm.wasmfile fromnode_module/sql.js/dist/sql-wasm.wasmto thepublic/assets` folder
• npm run build
• npx cap sync (i got a warning saying that cocoapods is not installed, but the web and android went fine)
• npx cap sync @capacitor-community/electron
• npm run build
• npx cap copy
• npx cap copy @capacitor-community/electron
• npm start

it works fine

[blatoo]

@jepiqueau I have no idea why it still doesn't work on my mac, but I can work around with it. Maybe we should wait for someone else test ...

But I have a question, why you will run two times "npm run build"? and why you "copy" again? I thought, "sync" = "copy + update"...

[jepiqueau]

@blatoo after cloning the app and installed it you need to do a build to be able to do a npx sync to synchronize the capacitor plugins then a npm build to get everything inline and a npx cap copy. Only after this you can run npm start. This is the recommended way advised by the Capacitor team.

[blatoo]

@jepiqueau Oh! Thanks! At the first time I saw it in the doc, thought it must be a mistake by accident, now I know, it is correct. 😄 Happy new year's eve! 🥳 🎆 🍾

[jepiqueau]

@blatoo i assume i can close the issue now. Feel free to re-open it if necessary