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

KubukaH · 2022-05-30T20:58:56Z

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": "[email protected]",
  "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

The text was updated successfully, but these errors were encountered:

Skn0tt · 2022-05-31T12:47:09Z

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 · 2022-05-31T17:58:41Z

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

Thank you

Skn0tt · 2022-06-01T08:02:09Z

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 · 2022-06-01T17:27:51Z

@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 [email protected].

Thank you

Skn0tt · 2022-06-02T11:02:45Z

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 · 2022-06-03T15:03:14Z

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 · 2022-06-13T08:47:23Z

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.

closes #48

KubukaH · 2022-06-13T13:58:47Z

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

Skn0tt · 2022-06-13T15:31:17Z

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 · 2022-06-14T14:53:49Z

published on 0.2.6!

KubukaH · 2022-06-14T15:32:35Z

published on 0.2.6!

Thank you, let me update right away!

KubukaH · 2022-06-14T15:54:51Z

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 · 2022-06-15T07:41:25Z

Could you try 0.2.7? 😅

KubukaH · 2022-06-15T14:37:07Z

Thank you @Skn0tt problem solved. 🤩

Skn0tt added a commit that referenced this issue Jun 13, 2022

fix: typo in module field

45fb451

closes #48

Skn0tt mentioned this issue Jun 13, 2022

fix: typo in module field #49

Merged

Skn0tt closed this as completed in #49 Jun 14, 2022

Skn0tt mentioned this issue Jun 15, 2022

fix: package.module again #50

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

KubukaH commented May 30, 2022 •

edited

Loading

Skn0tt commented May 31, 2022

KubukaH commented May 31, 2022

Skn0tt commented Jun 1, 2022

KubukaH commented Jun 1, 2022

Skn0tt commented Jun 2, 2022

KubukaH commented Jun 3, 2022 via email •

edited

Loading

Skn0tt commented Jun 13, 2022

KubukaH commented Jun 13, 2022

Skn0tt commented Jun 13, 2022 •

edited

Loading

Skn0tt commented Jun 14, 2022

KubukaH commented Jun 14, 2022

KubukaH commented Jun 14, 2022

Skn0tt commented Jun 15, 2022

KubukaH commented Jun 15, 2022

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

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

Comments

KubukaH commented May 30, 2022 • edited Loading

Code

package.js

index.html

tailwind.config.js

.postcssrc

.parcelrc

ContextProvider.js

How it is behaving

Skn0tt commented May 31, 2022

KubukaH commented May 31, 2022

Skn0tt commented Jun 1, 2022

KubukaH commented Jun 1, 2022

Skn0tt commented Jun 2, 2022

KubukaH commented Jun 3, 2022 via email • edited Loading

Skn0tt commented Jun 13, 2022

KubukaH commented Jun 13, 2022

Skn0tt commented Jun 13, 2022 • edited Loading

Skn0tt commented Jun 14, 2022

KubukaH commented Jun 14, 2022

KubukaH commented Jun 14, 2022

Skn0tt commented Jun 15, 2022

KubukaH commented Jun 15, 2022

KubukaH commented May 30, 2022 •

edited

Loading

KubukaH commented Jun 3, 2022 via email •

edited

Loading

Skn0tt commented Jun 13, 2022 •

edited

Loading