KubukaH commented 2 years ago

I am using Windows 10 OS, running a project using parcel@latest and yarn init -2 and deploying the project to Netlify. My challenge is that I cannot use react-netlify-identity library for Identity strategy. The code crashes with the above stated error.

Code

package.js

{
  "name": "kubuka-sub",
  "packageManager": "yarn@3.2.1",
  "private": true,
  "source": "public/index.html",
  "scripts": {
    "start": "parcel --https --open --port 7420",
    "build": "parcel build"
  },
  "devDependencies": {
    "@parcel/compressor-brotli": "^2.5.0",
    "@parcel/compressor-gzip": "^2.5.0",
    "@parcel/config-default": "^2.5.0",
    "@parcel/core": "^2.5.0",
    "@parcel/resolver-default": "^2.5.0",
    "@parcel/transformer-raw": "^2.5.0",
    "@parcel/transformer-svg-react": "^2.5.0",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/line-clamp": "^0.4.0",
    "parcel": "^2.5.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24"
  },
  "dependencies": {
    "@emotion/css": "^11.9.0",
    "@emotion/react": "^11.9.0",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@headlessui/react": "^1.6.2",
    "@heroicons/react": "^1.0.6",
    "faunadb": "^4.5.4",
    "formik": "^2.2.9",
    "gotrue-js": "^0.9.29",
    "is-hotkey": "^0.2.0",
    "process": "^0.11.10",
    "react": "17",
    "react-dom": "17",
    "react-netlify-identity": "^0.2.5",
    "react-router-dom": "^6.3.0",
    "rxjs": "^7.5.5",
    "slate": "^0.78.0",
    "slate-history": "^0.66.0",
    "slate-react": "^0.79.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "alias": {
    "process": {
      "global": "process"
    }
  },
  "browserslist": "> 0.5%, not op_mini all, not ie 11, not ios_saf < 13"
}

index.html

<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <title>Kubuka Space PBC - Scouting the hidden genius</title>
</head>
<body class="h-full">
  <div id="root"></div>
  <script type="module" src="../src/index.js"></script>
</body>
</html>

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
  ],
}

.postcssrc

{
  "plugins": {
    "tailwindcss": {}
  },
  "extends": "@parcel/config-default",
  "resolvers": ["@company/parcel-resolver", "..."]
}

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["...", "@parcel/transformer-svg-react"],
    "*.{zip,tgz,mp4,png,jpeg,jpg,mp3}": ["@parcel/transformer-raw"]
  }
}

ContextProvider.js

import { useEffect, useState, createContext, useContext } from 'react';
import { useParams } from 'react-router-dom';
import { useNetlifyIdentity } from "react-netlify-identity";

const ApiContext = createContext();

export const ContextProvider = ({ children }) => {
  const [url] = useState("https://www.mysitelinkmain.com");
  const identity = useNetlifyIdentity(url);

  return (
    <ApiContext.Provider value={identity}>
    {children}
    </ApiContext.Provider>
  );
};

export const useCtx = () => {
  return useContext(ApiContext);
};

How it is behaving

yarn init -2 - Successful
yarn install - Successful
yarn start - xBuild failed =>
```
× Build failed.
```

@parcel/core: Failed to resolve 'react-netlify-identity' from './src/.../context/index.js'

C:\Users...\src\components\context\index.js:3:36 2 | import { useParams } from 'react-router-dom';

3 | import { useNetlifyIdentity } from "react-netlify-identity"; | ^^^^^^^^^^^^^^^^^^^^^^^^

@parcel/resolver-default: Could not load './dist/react-netlify-identity.es.production.js' from module 'react-netlify-identity' found in package.json#module

C:\Users....yarn__virtual__\react-netlify-identity-virtual-92217ec8e4\0\cache\react-netlify-identity-npm-0.2.5-e3363cde5b-8b31bb74f9.zip\node_modules\react-netlify-identity\package.json:10:13 9 | "umd:main": "dist/react-netlify-identity.umd.production.js",

10 | "module": "dist/react-netlify-identity.es.production.js", | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ './dist/react-netlify-identity.es.production.js' does not exist, did you mean './dist/react-netlify-identity.cjs.production.min.js'?' 11 | "typings": "dist/index.d.ts", 12 | "jsnext:main": "dist/index.es.js",

I hope this is not too long. It's my first time to post an error so I don't know the standard way of doing it or whether there are templates used.

Thank you

Skn0tt commented 2 years ago

Hi! I'd love to look into this. Could you share a reproduction repository with how you set up, and some steps for how to reproduce the error? That'd make it a lot easier for me to find out what's causing this.

KubukaH commented 2 years ago

Hi @Skn0tt , I edited the post in order to add the issues you requested.

Thank you

Skn0tt commented 2 years ago

Thanks for updating! I think you missed some files (e.g. index.js) - it might be easier to do this as a Github repository, and link it here.

KubukaH commented 2 years ago

@Skn0tt I have added you as a collaborator to my repo [kubuka-sub](https://github.com/KubukaH/kubuka-sub). If you would want some additional info I am available on email also kubukahub@gmail.com.

Thank you

Skn0tt commented 2 years ago

The steps you outlined are working fine for me - I cannot reproduce the error you're seeing locally. I'm not on Windows, though, so that might be a reason.

I see you're using Yarn 2, is there a specific reason for that? Yarn 2 does non-standard things to your module resolution, which might cause the problem you're seeing. Please try using NPM instead, and see if the error persists.

KubukaH commented 2 years ago

I am using Yarn 2 because I work with my code offline most of the time due to Data Bandwidth issues I am facing. Therefore I use Yarn 2 to be able to copy new files into a flash drive to my offline work environment, A desktop computer (if it was a laptop I wouldn't be doing this). Actually before I migrated to Yarn 2, I was using NPM and everything worked so fine.

But anyway, thank you for looking into this issue for me. I had thought perhaps there was a way I could bypass that error and continue using Yarn 2. I will try to raise an issue with Yarn for assistance on dependency resolution. It seems Yarn is looking for react-netlify-identity.es.production.js but Netlify is providing react-netlify-identity.cjs.production.min.js. However, in this instance, react-netlify-identity.cjs.production.min.js is installed but not being read correctly, and the code end up falling back to react-netlify-identity.es.production.js, a non existent module. The question would therefore be, does Netlify provide this react-netlify-identity.es.production.js module or this react-netlify-identity.cjs.production.min.js one.

Thank you

Skn0tt commented 2 years ago

Thanks for elaborating! I think I see the problem, now: package.json has a typo in the module field. It says .es.production, but the buildstep produces .esm.production 🤦 I'll open a PR and see how we can get this fixed.

KubukaH commented 2 years ago

Noted with thanks. I can't wait for the fix because I can't proceed to the next step in my development process.

Skn0tt commented 2 years ago

I'm not sure how fast this PR will land, btw - talking to @sw-yx (former maintainer) about how we're publishing a new version. So this could take a week or two.

Skn0tt commented 2 years ago

published on 0.2.6!

KubukaH commented 2 years ago

published on 0.2.6!

Thank you, let me update right away!

KubukaH commented 2 years ago

The error was fixed, however I think the there's another module again which needs to be fixed the same way. Here is the new error.

     9 |   "umd:main": "dist/react-netlify-identity.umd.production.js",
  > 10 |   "module": "dist/react-netlify-identity.esm.production.js",
  >    |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ './dist/react-netlify-identity.esm.production.js' does not exist, did you mean './dist/react-netlify-identity.cjs.production.min.js'?'
    11 |   "typings": "dist/index.d.ts",
    12 |   "jsnext:main": "dist/index.es.js",

If you check, this time it's the .esm. vs .cjs..

Skn0tt commented 2 years ago

Could you try 0.2.7? 😅

KubukaH commented 2 years ago

Thank you @Skn0tt problem solved. 🤩

netlify-labs / react-netlify-identity

'./dist/react-netlify-identity.es.production.js' does not exist, did you mean './dist/react-netlify-identity.cjs.production.min.js'?' #48

Code

package.js

index.html

tailwind.config.js

.postcssrc

.parcelrc

ContextProvider.js

How it is behaving