Code Monkey home page Code Monkey logo

Comments (5)

lewsmith avatar lewsmith commented on August 15, 2024 1

@Kylar13 could you please try the solution suggested by @lewsmith? If that fixes it, would update the template.

Thinking about it, it should be {} as WebAppManifest not <WebAppManifest>{}. @lewsmith, could you pls try adding as WebAppManifest and see if that breaks it? On another note, why have I stopped getting emails about issues???

Hey @ShafSpecs, I've continued to use {} as WebAppManifest with no issues 👍

from monorepo.

Kylar13 avatar Kylar13 commented on August 15, 2024 1

Hey!! Tried it and it works!! Didn't have to make any changes tho, pnpm dlx remix-pwa manifest generated the file with {} as WebAppManifest instead of <WebAppManifest>{} already

Thanks for the quick action!

from monorepo.

lewsmith avatar lewsmith commented on August 15, 2024

I'm also seeing this

"dependencies": {
    "@remix-pwa/sw": "^3.0.1",
    "@remix-pwa/worker-runtime": "^2.1.1",
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-pwa/dev": "^3.0.4",
    "@remix-run/dev": "^2.8.1",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "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",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }

Could start in dev okay after running the initial npx remix-pwa sw, but after running npx remix-pwa manifest I get the following when running the dev script:

npm run dev

> dev
> remix vite:dev

🏗️  Building Service Worker in development mode...
x Build failed in 41ms
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 (/home/dev/node_modules/@babel/parser/lib/index.js:353:19)
    at TypeScriptParserMixin.raise (/home/dev/node_modules/@babel/parser/lib/index.js:3277:19)
    at TypeScriptParserMixin.unexpected (/home/dev/node_modules/@babel/parser/lib/index.js:3297:16)
    at TypeScriptParserMixin.expect (/home/dev/node_modules/@babel/parser/lib/index.js:3601:28)
    at TypeScriptParserMixin.jsxParseExpressionContainer (/home/dev/node_modules/@babel/parser/lib/index.js:6692:10)
    at TypeScriptParserMixin.jsxParseElementAt (/home/dev/node_modules/@babel/parser/lib/index.js:6766:36)
    at TypeScriptParserMixin.jsxParseElement (/home/dev/node_modules/@babel/parser/lib/index.js:6804:17)
    at TypeScriptParserMixin.parseExprAtom (/home/dev/node_modules/@babel/parser/lib/index.js:6816:19)
    at TypeScriptParserMixin.parseExprSubscripts (/home/dev/node_modules/@babel/parser/lib/index.js:10590:23)
    at TypeScriptParserMixin.parseUpdate (/home/dev/node_modules/@babel/parser/lib/index.js:10573: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: [
    '/home/dev/node_modules/@remix-pwa/worker-runtime/dist/src/service-worker.internal.js'
  ]
}

Deleting the generated file app/routes/manifest[.webmanifest].ts generated by the npx remix-pwa manifest command stops the error. But then there's no custom manifest..

UPDATE

Removing the type assertion from the generated manifest[.webmanifest].ts seems to remove the error:

import type { WebAppManifest } from '@remix-pwa/dev';
import { json } from '@remix-run/node';

export const loader = () => {
  return json(<WebAppManifest>{
      short_name: 'PWA',
      name: 'Remix PWA',
      start_url: '/',
      display: 'standalone',
      background_color: '#d3d7dd',
      theme_color: '#c34138',
  }, {
      headers: {
          'Cache-Control': 'public, max-age=600',
          'Content-Type': 'application/manifest+json',
      },
  });
};

to

import type { WebAppManifest } from '@remix-pwa/dev';
import { json } from '@remix-run/node';

export const loader = () => {
  return json({
      short_name: 'PWA',
      name: 'Remix PWA',
      start_url: '/',
      display: 'standalone',
      background_color: '#d3d7dd',
      theme_color: '#c34138',
  } as WebAppManifest, {
      headers: {
          'Cache-Control': 'public, max-age=600',
          'Content-Type': 'application/manifest+json',
      },
  });
};

works

from monorepo.

ShafSpecs avatar ShafSpecs commented on August 15, 2024

Not sure what causes the error. @remix-pwa/dev latest version is 3.0.4 and for @remix-pwa/worker-runtime: 2.1.1

Not sure why the error is thrown, could you please provide the code at the error location? I have an offline epic stack repo here

from monorepo.

ShafSpecs avatar ShafSpecs commented on August 15, 2024

@Kylar13 could you please try the solution suggested by @lewsmith? If that fixes it, would update the template.

Thinking about it, it should be {} as WebAppManifest not <WebAppManifest>{}. @lewsmith, could you pls try adding as WebAppManifest and see if that breaks it? On another note, why have I stopped getting emails about issues???

from monorepo.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.