Comments (13)
Confirmed. I can replicate like this:
npx create-next-app foo
Then in package.json
, add:
"resolutions": {
"webpack": "^5.0.0-beta.30"
}
... to enable wp5 support per https://nextjs.org/blog/next-9-5#webpack-5-support-beta.
Then npm install replicache
and instantiate it in index.js. I get:
error - ./node_modules/replicache/out/wasm/release/replicache_client.js 302:22
Module parse failed: Unexpected token (302:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| async function init(input) {
| if (typeof input === 'undefined') {
> input = import.meta.url.replace(/\.js$/, '_bg.wasm');
| }
| const imports = {};
/Users/aa/work/roci/replicache-next/node_modules/replicache/out.cjs/wasm/release/replicache_client.js:223
export function uuid() {
^^^^^^
SyntaxError: Unexpected token 'export'
I think since this blocks anyone creating a cjs app it's a p1. @arv I see the flag in webpack-build, but not sure how you want to setup the output.
from replicache.
Did some exploring. If we generate --target nodejs
for wasm-pack compilation we get closer but there are some more issues.
- The shape of the module it generates is different (no default export for
init
)- We can probably do
import * as mod
and "feature detect" the defaultinit
function.
- We can probably do
- Next.js complains that there is no:
localStorage
- I commented that one out to get things further
Performance
- This one comes from Rust wasm_bindgen because we are doing
dyn_into::<Performance>
- This one comes from Rust wasm_bindgen because we are doing
Next.js is running in a Node.js environment without a lot of DOM. I think we will also run into trouble with IDBFactory
if we get that far.
from replicache.
Iām so lost - why are we running in a node environment?
from replicache.
Next.js tries to run the js on the server, it is what is so special about next.js. I will try to switch to dynamic import and see how that plays out.
from replicache.
We can check process.browser
or use dynamic import which are only run on the client.
from replicache.
Manually Removing out.cjs
and things seems to work well with next.js
from replicache.
This needs to be re-opened, right?
from replicache.
Getting closer...
Turns out I have to use yarn for "resolutions"
to work.
Now it replaces the import.meta.url
with a file://
URL (which is clearly wrong), however, one of the webpack bugs suggests using the following pattern to get webpack to realize that it is an asset (webpack/webpack#6719 (comment))
new URL('./path/file.wasm', import.meta.url);
That look much better and becomes http://localhost:3000/_next/c770d646807cab937689.wasm
but that file is 404
Then I tried using file-loader
.
// next.config.js
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.wasm/,
use: ["file-loader"],
});
return config;
},
};
Could not resolve file-loader
...
yarn add file-loader
Still getting 404.
Maybe @elsigh has any idea what I am missing?
from replicache.
I was able to hack this to work horribly with the following steps:
- npx create-next-app foo
- resolutions -> use wp5
- add a symlink public/wasm -> node_modules/out/wasm
- pass
wasmModule
field toReplicache
constructor with valuewasm/release/replicache_client_bg.wasm
Basically, I tell Replicache the URL to find the wasm file at specifically rather than trying to derive it from import.meta.url
, then I hack app dir to serve it.
This is not ideal, but works for now.
from replicache.
new URL('./path/file.wasm', import.meta.url);
Where did you put this? I can't replicate your steps here.
That look much better and becomes
http://localhost:3000/_next/c770d646807cab937689.wasm
but that file is404
I wonder if webassemblyModuleFilename
is the missing piece here?
https://github.com/vercel/next.js/blob/canary/examples/with-webassembly/next.config.js
from replicache.
I modified the generated code in replicache_client.js but we can do the same thing one layer higher up.
I tried using webassemblyModuleFilename
too. Not sure if it was working, in other words changing the name didn't seem to change the URL or where the file was assured on disk.
More later...
from replicache.
And yes, manually putting things in public works for me too
from replicache.
Calling this done for now.
We will see if we need to resurface a cjs build in the future.
from replicache.
Related Issues (20)
- Consider adding WriteTransaction.merge() convenience HOT 1
- Add the ability to encrypt data. HOT 5
- User Request: Support devalue or other alternate serialization format
- ReadTransaction.scan ignores limit option when an indexName is provided
- Add support for other JavaScript types to indexes HOT 3
- RFE: Add a push() method HOT 4
- Question: Subscribing to all changes? HOT 2
- Caching pulls for high scale HOT 1
- RFE: A way to know if/when at least one sync has happened
- Obtaining the version number of the domain object that was last know to the a client? HOT 1
- Invalid ref count during persist HOT 1
- License Key Socket Connection Timeout HOT 9
- Data not persisting through refreshes HOT 2
- Replicache should print a log (at debug) when the cookie doesn't increase HOT 3
- Link broken HOT 1
- First-class reactive queries
- Non-covering indexes
- Incorrect license link in getting started guide HOT 4
- Issue while trying to generate license HOT 1
- dropAllDatabases does not respect experimentalCreateKVStore HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from replicache.