Vite run fails: ThirdPartyEmailPasswordPreBuiltUI dependency could not be resolved when importing

xtj7 commented 1 year ago

By following along the supertokens prebuilt guide (https://supertokens.com/docs/thirdpartyemailpassword/pre-built-ui/setup/frontend) in step 3 I unfortunately can't really make any progress using vite.

The import I am trying to make:

import { ThirdPartyEmailPasswordPreBuiltUI } from 'supertokens-auth-react/lib/build/recipe/thirdpartyemailpassword/prebuiltui';

Results in this error:

Error: The following dependencies are imported but could not be resolved:
  supertokens-auth-react/lib/build/recipe/thirdpartyemailpassword/prebuiltui (imported by .../frontend/src/RouterWrapper.tsx)

If I remove the import, run vite and then add the import, it shows the following error:

[vite] Internal server error: Failed to resolve import "supertokens-auth-react/lib/build/recipe/thirdpartyemailpassword/prebuiltui" from "src/RouterWrapper.tsx". Does the file exist?

It is properly installed in node_modules, my IDE can find it and autocomplete, but it seems vite just does not want to resolve that. It resolves everything else just fine, for example this is completely fine:

import ThirdPartyEmailPassword, {
  Google,
} from 'supertokens-auth-react/recipe/thirdpartyemailpassword';

Dependencies are looking as follows:

"dependencies": {
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/modifiers": "^6.0.1",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@material-design-icons/svg": "^0.14.7",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/react-tag-input": "^6.6.1",
    "@vitejs/plugin-react": "^4.0.1",
    "chart.js": "^4.3.0",
    "classnames": "^2.3.2",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-image-file-resizer": "^0.4.8",
    "react-overlays": "^5.2.1",
    "react-redux": "^8.0.5",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.11.0",
    "react-rte": "^0.16.5",
    "react-tag-input": "^6.8.1",
    "sass": "^1.62.1",
    "supertokens-auth-react": "^0.33.1",
    "supertokens-web-js": "^0.6.0",
    "vite-aliases": "^0.11.2",
    "vite-plugin-svgr": "^3.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-rte": "^0.16.5",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "path": "^0.12.7",
    "prettier": "2.8.8",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }

My vite config looks like this:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  server: {
    host: true,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  plugins: [react(), svgr()],
});

I have tried it with @vitejs/plugin-react instead of @vitejs/plugin-react-swc as well with the same result. I am not quite sure why this particular issue happens. All the other imports work fine, this one does not.

xtj7 commented 1 year ago

Alright, I have figured it out, it seems the import path in the example is wrong:

Does NOT work:

import { ThirdPartyEmailPasswordPreBuiltUI } from 'supertokens-auth-react/lib/build/recipe/thirdpartyemailpassword/prebuiltui';

Works:

import { ThirdPartyEmailPasswordPreBuiltUI } from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui';

rishabhpoddar commented 1 year ago

Hey. Thanks for raising this issue. The docs does say:

import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";

Am i missing something?

xtj7 commented 1 year ago

You are right! I copy and pasted that part, but for some reason my IDE (Goland) deemed it necessary to adjust the imports. I can't really reproduce that behavior unless I remove the import line and then autoimport it. In that case it will again jump to the wrong folder. Quite strange! So the error was not even in the docs, it was my IDE messing things up. Sorry for the incorrect information.

Apart from my IDE issue I have to say supertokens is a fantastic and properly documented solution that I'm loving so far :)

supertokens / supertokens-auth-react

Vite run fails: ThirdPartyEmailPasswordPreBuiltUI dependency could not be resolved when importing #717