remix-pwa / monorepo Goto Github PK
View Code? Open in Web Editor NEWRemix PWA v4
Home Page: https://remix-pwa.run
License: MIT License
Remix PWA v4
Home Page: https://remix-pwa.run
License: MIT License
Remix generates a file like assets/manifest-12345.js
that contains the list of routes and their dependencies, and links to this from the HTML doc. But RemixPWA isn't including it in the __workerManifest.assets list, which makes it tricky to ensure that file gets cached for offline use.
I think maybe the PWA vite plugin that generates the assets list is running before Remix generates the manifest file?
//package.json
"dependencies": {
"@remix-pwa/sw": "^3.0.7",
"@remix-pwa/worker-runtime": "^2.1.2",
"@remix-run/node": "^2.9.2",
"@remix-run/react": "^2.9.2",
"@remix-run/serve": "^2.9.2",
"isbot": "^5.1.7",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@remix-pwa/dev": "^3.0.5",
"@remix-run/dev": "^2.9.2",
"@types/react": "^18.3.3",
"cross-env": "^7.0.3",
"vite": "^5.2.12"
}
//vite.config.js
export default defineConfig({
build: {
minify: false
},
plugins: [
remix({
ssr: true,
}),
remixPWA()],
});
should be a !==
and not ===
dev
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can fix this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project β¨
Your semantic-release bot π¦π
I got this error when I was running remix vite:build
[plugin vite-plugin-remix-pwa:loader] Sourcemap is likely to be incorrect: a plugin (vite-plugin-remix-pwa:loader) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
My vite.config.ts file:
export default defineConfig({
server: { port: 3000 },
build: { sourcemap: true },
plugins: [
remix({
ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
routes: async (defineRoutes) => flatRoutes("routes", defineRoutes),
// serverModuleFormat: "cjs",
// browserNodeBuiltinsPolyfill: {
// modules: { buffer: true, events: true, process: true },
// },
}),
remixPWA(),
cjsInterop({
dependencies: ["lodash", "usehooks-ts", "rc-table", "@sentry/remix"],
}),
tsconfigPaths({ root: __dirname }),
],
});
I'm using remix v2.8.1 and @remix-pwa v3.0.0
Hey @ShafSpecs, I was installing remix-pwa, I went through all the steps on the getting started page but when i start the server I get this error. I ran the two npm commands, put the couple of lines in the vite config file and created the service worker. I did it a couple of time to make I'd done it right. Let me know if you need any more info to help fix this. Thanks
Hello!
I'm trying to implement remix-pwa and I'm having an issue with the browser loading the entry.worker.js
Uncaught SyntaxError: Unexpected token 'export' (at entry.worker.js:5666:1)
(index):39 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/entry.worker.js'): ServiceWorker script evaluation failed
versions:
"@remix-pwa/dev": "^3.0.5",
"@remix-pwa/worker-runtime": "^2.1.2",
"@remix-run/react": "^2.8.0",
"@remix-run/server-runtime": "^2.8.0",
my vite config looks like this
import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {remixPWA} from '@remix-pwa/dev';
import {vitePlugin as remix} from '@remix-run/dev';
import commonjs from 'vite-plugin-commonjs';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [
hydrogen(),
oxygen(),
commonjs({
filter(id: string) {
// `node_modules` is exclude by default, so we need to include it explicitly
// https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.10.1/src/index.ts#L143
if (
id.includes('node_modules/@sanity/image-url') ||
id.includes('node_modules/lodash.debounce')
) {
return true;
}
},
}),
remix({
presets: [hydrogen.preset()],
ignoredRouteFiles: ['**/.*', '**/*.test.*', '**/styleguide.tsx'],
future: {
v3_fetcherPersist: false,
v3_relativeSplatPath: false,
v3_throwAbortReason: false,
},
}),
tsconfigPaths(),
remixPWA(),
],
optimizeDeps: {
include: ['clsx', 'lodash.debounce', '@sanity/image-url'],
},
});
Any ideas on what might be wrong w/ my config?
Hey there!
After installing this in an epic-web project to make it a pwa, I run into the following issue during build:
Error during worker build: SyntaxError: [vite-plugin-remix-pwa:virtual-entry-sw] Could not load virtual:entry-sw (imported by ../../node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js): Unexpected token, expected "}" (7:16)
Any ideas on how to go about fixing it? For reference, here are the versions I'm using:
"dependencies": {
"@remix-pwa/dev": "^3.0.2",
"@remix-pwa/sw": "^3.0.1",
"@remix-pwa/worker-runtime": "^2.1.0",
"@remix-run/express": "^2.8.1",
"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
},
"devDependencies": {
"@remix-run/dev": "^2.8.1",
"@types/react": "^18.2.74",
"@types/react-dom": "^18.2.24",
"typescript": "^5.4.4",
"vite": "^5.2.8",
},
"engines": {
"node": ">=20.0.0"
}
Hello,
I am looking for a solution to setup Offline Page in PWA in my Remix App and I was looking around on Google and I came across your remix-pwa
package, but in the documentation I wasn't able to find how to setup Offline Page in Remix App using remix-pwa
.
can you please help me how to setup a offline page in Remix App using remix-pwa
?
Hey there!
I'm working in a remix website and want to make it a PWA. I followed the Quick Start docs but when I run remix vite:dev --host
I get the following errors:
Error during worker build: SyntaxError: [vite-plugin-remix-pwa:virtual-entry-sw] Could not load virtual:entry-sw (imported by node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js): Unexpected token, expected "}" (7:16)
at constructor (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:353:19)
at TypeScriptParserMixin.raise (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3277:19)
at TypeScriptParserMixin.unexpected (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3297:16)
at TypeScriptParserMixin.expect (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:3601:28)
at TypeScriptParserMixin.jsxParseExpressionContainer (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6692:10)
at TypeScriptParserMixin.jsxParseElementAt (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6766:36)
at TypeScriptParserMixin.jsxParseElement (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6804:17)
at TypeScriptParserMixin.parseExprAtom (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:6816:19)
at TypeScriptParserMixin.parseExprSubscripts (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:10580:23)
at TypeScriptParserMixin.parseUpdate (/Users/myuser/Documents/remix/myapp/node_modules/@babel/parser/lib/index.js:10563:21) {
code: 'PLUGIN_ERROR',
reasonCode: 'UnexpectedToken',
loc: Position { line: 7, column: 16, index: 178 },
pos: 178,
pluginCode: 'BABEL_PARSER_SYNTAX_ERROR',
plugin: 'vite-plugin-remix-pwa:virtual-entry-sw',
hook: 'load',
watchFiles: [
'/Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js'
]
}
Error: ENOENT: no such file or directory, open '/Users/myuser/Documents/remix/myapp/public/entry.worker.js'
at Object.openSync (node:fs:596:3)
at readFileSync (node:fs:464:35)
at getWorkerHash (file:///Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/dev/dist/src/hash.js:7:17)
at Context.buildStart (file:///Users/myuser/Documents/remix/myapp/node_modules/@remix-pwa/dev/dist/src/plugins/bundler.js:133:24)
at async Promise.all (index 6)
at async hookParallel (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50358:9)
at async Object.buildStart (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50710:13)
at async file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64593:13
at async httpServer.listen (file:///Users/myuser/Documents/remix/myapp/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64611:17) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/myuser/Documents/remix/myapp/public/entry.worker.js'
}
If I move entry.worker.ts
(which was generated with npx remix-pwa sw
) into the public
folder and change the extension to .js
, the second error (no such file or directory
) seems to go away, but the first one is still there
Any ideas on how to fix it?
At first, thanks for the great work!
I am getting the following error while using remix-pwa with the new remix vite plugin.
But I think the issue is not vite related since remix-pwa dev
isnt using it.
Is it an ESM problem?
> remix-pwa dev
ποΈ Building Service Worker in development mode...
πΏ Built Service Worker in: 21.477ms
π Watching for changes in the service worker file...
X [ERROR] glob is not a function [plugin sw-assets-module]
../../../node_modules/esbuild/lib/main.js:1434:27:
1434 β let result = await callback({
β΅ ^
Weird bugs from not finding config file: what's going on?
Given this cache handler
cacheFirst({
cache: assetCache,
cacheQueryOptions: {
ignoreSearch: true,
ignoreVary: true,
},
})
In a defaultFetchHandler
export const defaultFetchHandler: DefaultFetchHandler = ({
context,
request,
}) => {
const type = matchRequest(request);
if (type === "asset") {
return assetsHandler(context.event.request);
}
if (type === "loader") {
return dataHandler(context.event.request);
}
return context.fetchFromServer();
};
This crash on Safari 17 (beta and developper preview) on macOS.
Packages: @remix-pwa/strategy, @remix-pwa/cache
Throw on this line:
monorepo/packages/cache/src/cache.ts
Line 301 in a65e6a1
I'm trying to find why.
Failed to load resource: FetchEvent.respondWith received an error: SyntaxError: The string did not match the expected pattern.
FetchEvent.respondWith received an error: SyntaxError: The string did not match the expected pattern.
Hi I have a Remix project and I get an error when I call npx remix-pwa sw
.
I Created the project with npx create-remix@latest
- my package.json
is at the bottom :)
Name | Version |
---|---|
node | 20.9.0 |
npm | 10.1.0 |
macOS | Β Sonoma 14.5 |
npx remix-pwa sw
node:internal/errors:497
ErrorCaptureStackTrace(err);
^
TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "file:///Users/marc/.npm/_npx/3c34892bd302acc6/node_modules/@remix-pwa/cli/package.json" needs an import assertion of type "json"
at new NodeError (node:internal/errors:406:5)
at validateAssertions (node:internal/modules/esm/assert:94:15)
at defaultLoad (node:internal/modules/esm/load:122:3)
at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
at new ModuleJob (node:internal/modules/esm/module_job:65:26)
at #createModuleJob (node:internal/modules/esm/loader:290:17)
at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17)
at async ModuleLoader.import (node:internal/modules/esm/loader:315:23) {
code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'
}
Node.js v20.9.0
{
"name": "website",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": "remix vite:build",
"dev": "remix vite:dev",
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"start": "remix-serve ./build/server/index.js",
"typecheck": "tsc"
},
"dependencies": {
"@remix-pwa/worker-runtime": "^2.1.2",
"@remix-run/node": "^2.10.3",
"@remix-run/react": "^2.10.3",
"@remix-run/serve": "^2.10.3",
"isbot": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-pwa/dev": "^3.0.6",
"@remix-run/dev": "^2.10.3",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"autoprefixer": "^10.4.19",
"eslint": "^8.38.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.4",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=20.0.0"
}
}
Thanks in advanced - thanks for making awesome tools :D
In packages/sw/src/message/precacheHandler.ts
The assetCache
is not initialized, resulting in a cache named rp-undefined
being created.
Unlike dataCache
and documentCache
the corresponding asset variable is not initialized with this.assetCacheName
.
Then this.assetCacheName
is checked if it's a string, but the always undefined assetCache
variable is used to open the cache.
For some reason there is a @ts-expect-error
which hides this error.
Hello,
I encountered an issue while trying to upgrade Remix PWA by executing npx remix-pwa sw. The process advises that this command is soon to be deprecated and suggests using npx remix-pwa@latest init instead. However, following through with the instructions leads to a failure in creating the entry.worker.ts file, accompanied by an error.
Here is the error message when executing npx remix-pwa sw:
$ npx remix-pwa sw
This command is getting deprecated soon. Please use `npx remix-pwa@latest init` instead.
β Is this a TypeScript or JavaScript project? Pick the opposite for chaos! Β· ts
β Do you want to integrate workbox into your project? (y/N) Β· false
β Do you want to utilise precaching in this project? (y/N) Β· false
β What features of remix-pwa do you need? Don't be afraid to pick all! Β· sw
β What package manager do you use? Β· npm
β Do you want to run npm install? (Y/n) Β· true
β Integrating Service Worker...
file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/getPkgVersion.js:5
return pkgJson[0].version;
^
TypeError: Cannot read properties of undefined (reading 'version')
at getPkgVersion (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/getPkgVersion.js:5:23)
at createPWA (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/create.js:152:74)
at async Module.init (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/commands.js:16:5)
at async Module.run (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/@remix-pwa/dev/dist/cli/run.js:261:13)
at async cli (file:///Users/tsuyoshihiguchi/develop/mulligan/repositories/front-end/node_modules/remix-pwa/dist/cli.js:4:5)
Node.js v18.18.0
Following the suggestion to use npx remix-pwa@latest init, I encountered another issue:
$ npx remix-pwa@latest init
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
error: unknown command 'init'
This error suggests that the init command is unknown, which is contrary to the recommendation provided in the deprecation warning.
I am unable to proceed with the integration and upgrade process due to these errors.
Best Regard,
Hey
Did anyone try to use remix-pwa inside an electron app? Any feedback related to possible issues?
Thanks
Hi there, I have installed V4 and it works well so far, main reason for using the plugin is that I want to implement push notifications, I know the use to be a package @remix-pwa/push, but I think it is depreciated, is there a way to do this now or are you working on something that will do this? I can't find anything on the current website. If this is the wrong place for this message please point me somewhere I can ask.
Remove Prettier and Eslint and migrate the monorepo to biomejs.
This also removes the need for lint-staged
due to biome's --staged
flag.
This migration would require removing the eslint + lint-staged package (from all packages), as well as adjusting commands in package.json
scripts. Biome doesn't have out-of-the-box support for monorepos, so this change would require some manual tooling (maybe a biome-js
package?) that allows each package to have individual config files whilst retaining a global config
Hey there,
I'm attempting to upgrade to remix/[email protected]. However, after running:
npx remix-pwa sw
I encounter the following error:
`
Generating TypeScript service worker file...
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: ENOENT: no such file or directory, open '/home/canic/remix-echarge/templates/entry.worker.ts'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/home/canic/remix-echarge/templates/entry.worker.ts'
}
Node.js v20.10.0
`
Additionally, I noticed that the entry.worker.js file hasn't been updated and still refers to old dependencies, as per the upgrade documentation:
https://github.com/remix-pwa/monorepo/blob/main/templates/app/entry.worker.ts
Am I missing something here?
In @remix-pwa/[email protected]
, running the dev
throws the following error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@rollup/plugin-commonjs' imported from "project\node_modules\@remix-pwa\dev\dist\src\plugins\bundler.js"
Reason:
I erroneously added the plugin to devDependencies
instead of dependencies
. Of course the users are going to utilise the plugins at build-time, SMH π€¦ββοΈ.
Hi,
I am getting following error while running remix 2 app using "npm run dev".
Error: Directory import '/Projects/remix/my-remix-app-v2/node_modules/@remix-pwa/cache/node_modules/buffer/' is not supported resolving ES modules imported from /Projects/remix/my-remix-app-v2/node_modules/@remix-pwa/cache/dist/src/cache.js
Did you mean to import buffer/index.js?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.