Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to parse source errors #3048

Closed
3 tasks done
dicknetherlands opened this issue Mar 14, 2023 · 2 comments · Fixed by #3053
Closed
3 tasks done

Failed to parse source errors #3048

dicknetherlands opened this issue Mar 14, 2023 · 2 comments · Fixed by #3053

Comments

@dicknetherlands
Copy link

Describe the bug

I'm getting the following warnings from NPM when running a React app that has urql has a dependency. There's actually 10x warnings relating to 10 different sources, all of which have identical warning message format:

Failed to parse source map from '(pathtomycode)/node_modules/urql/src/components/react-urql/src/components/Mutation.ts' file: Error: ENOENT: no such file or directory, open '(pathtomycode)/node_modules/urql/src/components/react-urql/src/components/Mutation.ts'

The project compiles and runs fine. The 10 files that get mentioned in these 10 warning messages are:

node_modules/urql/src/components/react-urql/src/components/Mutation.ts
node_modules/urql/src/components/react-urql/src/components/Query.ts
node_modules/urql/src/components/react-urql/src/components/Subscription.ts
node_modules/urql/src/hooks/react-urql/src/hooks/cache.ts
node_modules/urql/src/hooks/react-urql/src/hooks/state.ts
node_modules/urql/src/hooks/react-urql/src/hooks/useMutation.ts
node_modules/urql/src/hooks/react-urql/src/hooks/useQuery.ts
node_modules/urql/src/hooks/react-urql/src/hooks/useRequest.ts
node_modules/urql/src/hooks/react-urql/src/hooks/useSubscription.ts
node_modules/urql/src/react-urql/src/context.ts

Here's my package.json that produces the issue. NPM is 8.19.2. Node is 18.12.1.

{
  "name": "myproject",
  "version": "0.1.0",
  "description": "myproject frontend",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+https://github.com/(myproject)",
    "directory": "ui"
  },
  "dependencies": {   
    "@azure/msal-browser": "^2.34.0",
    "@azure/msal-react": "^1.5.4",
    "@codemirror/lang-python": "^6.1.2",
    "@codemirror/language": "^6.6.0",
    "@codemirror/lint": "^6.2.0",
    "@codemirror/state": "^6.2.0",
    "@codemirror/view": "^6.9.2",
    "@fontsource/inter": "^4.5.15",
    "@headlessui/react": "^1.7.13",
    "@heroicons/react": "^2.0.16",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.8",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.15.1",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@urql/devtools": "^2.0.3",
    "@urql/exchange-auth": "^1.0.0",
    "formik": "^2.2.9",
    "graphql": "^16.5.0",
    "highlight.js": "^11.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "urql": "^3.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.21",
    "prettier": "2.8.4",
    "tailwindcss": "^3.2.7"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

It can be triggered simply by importing urql as shown below in any of my project components and running npm start:

import { createClient, Provider, fetchExchange } from "urql"

The issue has only arisen in urql@3.0.4. Rolling back to urql@3.0.3 resolves it.

Reproduction

Literally any code that imports urql@3.0.4 as described

Urql version

urql@3.0.4

Validations

  • I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
  • Read the docs.
  • Follow our Code of Conduct
@JoviDeCroock
Copy link
Collaborator

JoviDeCroock commented Mar 15, 2023

Some investigation, yes it looks like our source maps are pointing at src files rather than the dist file with the appropriate line-numbers 😅 https://www.runpkg.com/?urql@3.0.4/dist/urql.js.map#1 then again the same is present in 3.0.3 though https://www.runpkg.com/?urql@3.0.3/dist/urql.js.map#1 but the paths in 3.0.4 are wrong.

This might be caused by the move from the typescript-2 to typescript rollup plugin

@kitten
Copy link
Member

kitten commented Mar 15, 2023

Funnily enough, I believe this problem is solved by actually removing @rollup/plugin-typescript and only relying on @rollup/plugin-sucrase for stripping TypeScript types from the bundled source.

I wanted to do something similar anyway, however, it's probably best to do several things while we're fixing this:

  • Check whether @rollup/plugin-sucrase is sufficiently stable for this task, and check whether we'd like to use an alternative instead (I believe there are several transformers that could be better)
  • Check whether we could relace both @rollup/plugin-typescript and @rollup/plugin-sucrase with something else entirely (back to rollup-plugin-typescript2?) since rollup-plugin-dts is sufficient for generating the declarations
  • Check resulting sourcemaps and whether they actually work (in @urql/core they actually seem to be empty?)

Lastly, we may want to insert a lint rule for some JS features that we'd like to not transpile or even use, e.g. currently optional properties rely on a polyfill in TypeScript that can't be disabled (?) and we typically don't use them as they bloat when transpiled anyway. However, the Optional chaining operator is indeed in our support range, so they wouldn't have to be transpiled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants