Failed to parse source errors

dicknetherlands commented 1 year ago

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

[X] 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
[X] Read the docs.
[X] Follow our Code of Conduct

JoviDeCroock commented 1 year ago

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 commented 1 year ago

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.

urql-graphql / urql