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

pnpm build fails with the react-storefront sources of commit ca66031ba017d1839f4653deef00830052d01f8e #399

Closed
rodolfojcj opened this issue Aug 17, 2022 · 13 comments
Labels
bug Something isn't working checkout-storefront

Comments

@rodolfojcj
Copy link
Contributor

rodolfojcj commented Aug 17, 2022

Summary

When running the command pnpm build I'm receiving a failure that shows this output at the end:

storefront:build: 
storefront:build: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
storefront:build: ○  (Static)  automatically rendered as static HTML (uses no initial props)
storefront:build: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
storefront:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: ./pages/_document.tsx
saleor-app-checkout:build: 15:11  Warning: `styled-jsx` should not be used in `pages/_document.js`. See: https://nextjs.org/docs/messages/no-styled-jsx-in-document  @next/next/no-styled-jsx-in-document
saleor-app-checkout:build: 
saleor-app-checkout:build: ./frontend/components/elements/AppProvider/AppProvider.tsx
saleor-app-checkout:build: 46:6  Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
saleor-app-checkout:build: 
saleor-app-checkout:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
saleor-app-checkout:build: info  - Creating an optimized production build...
saleor-app-checkout:build: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
saleor-app-checkout:build: info  - Using external babel configuration from /root/react-storefront/apps/saleor-app-checkout/.babelrc
saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
saleor-app-checkout:build: Failed to compile.
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/visitor.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/kinds.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/printer.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/error/GraphQLError.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/parser.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > Build failed because of webpack errors
saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
saleor-app-checkout:build: ERROR: command finished with error: command (apps/saleor-app-checkout) pnpm run build exited (1)
command (apps/saleor-app-checkout) pnpm run build exited (1)

My system runs with these elements:

  • Debian 11
  • node v18.7.0
  • pnpm 7.9.3
  • As said before, the react-storefront commit ID is ca66031ba017d1839f4653deef00830052d01f8e

Steps to reproduce

  1. Checkout the react-storefront repository.
  2. Edit its .env file as needed.
  3. Install the dependencies with the pnpm i command.
  4. Run the pnpm build command inside the react-storefront directory.

A link to a reproduction repository

No response

Output from envinfo

No response

@mmiszy
Copy link
Contributor

mmiszy commented Aug 17, 2022

Thank you for taking the time to write this report, we really appreciate it!

We'll look into this issue but my first guess would be either nodejs or pnpm versions incompatibility. Could you make sure your pnpm lock file is unmodified?

It would be great if you could also provide full output log. Thanks!

@mmiszy mmiszy added bug Something isn't working checkout-storefront labels Aug 17, 2022
@rodolfojcj
Copy link
Contributor Author

You're welcome @mmiszy and thank you too for the feedback.

It also happens with node 16, specifically with version v16.17.0. The operating system and pnpm version are the same previously mentioned.

With node 16 and the react-storefront sources of commit ID bff1fb8255029043cd873c7a86aadf841da25cea this is the end of the output I'm getting:

checkout:build: Compiled successfully.
checkout:build: 
checkout:build: File sizes after gzip:
checkout:build: 
checkout:build:   267.44 kB  build/static/js/main.5186b788.js
checkout:build:   5.86 kB    build/static/css/main.1247d391.css
checkout:build: 
checkout:build: The project was built assuming it is hosted at /.
checkout:build: You can control this with the homepage field in your package.json.
checkout:build: 
checkout:build: The build folder is ready to be deployed.
checkout:build: You may serve it with a static server:
checkout:build: 
checkout:build:   npm install -g serve
checkout:build:   serve -s build
checkout:build: 
checkout:build: Find out more about deployment here:
checkout:build: 
checkout:build:   https://cra.link/deployment
checkout:build: 
saleor-app-checkout:build: Failed to compile.
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/visitor.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/kinds.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/printer.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/error/GraphQLError.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/parser.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > Build failed because of webpack errors
saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
saleor-app-checkout:build: ERROR: command finished with error: command (apps/saleor-app-checkout) pnpm run build exited (1)
command (apps/saleor-app-checkout) pnpm run build exited (1)

My local file pnpm-lock.yaml has been modified, supposedly after the pnpm i command execution. At http://0x0.st/oLrL.yaml-com there is the output returned by the execution of the git diff pnpm-lock.yaml command.

@mmiszy do you know of a way to keep the original pnpm-lock.yaml file contents while running the pnpm i command?

@mmiszy
Copy link
Contributor

mmiszy commented Aug 17, 2022

Thank you!

Yes, you need to run pnpm i --frozen-lockfile instead. If that doesn't help, I'll get back to you after we've investigated.

@rodolfojcj
Copy link
Contributor Author

Thank you @mmiszy. This is the error output I'm getting when running pnpm i --frozen-lockfile:

Scope: all 11 workspace projects
Lockfile is up to date, resolution step is skipped
 ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with packages/checkout-storefront/package.json
Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"

@rodolfojcj
Copy link
Contributor Author

Just for reference, this is the output I'm getting when running pnpm i on a fresh react-storefront project directory updated to commit ID bff1fb8255029043cd873c7a86aadf841da25cea, with node v16.17.0 and pnpm 7.9.3:

Scope: all 11 workspace projects
packages/ui-kit                          |  WARN  deprecated stable@0.1.8
packages/checkout-storefront             |  WARN  deprecated source-map-resolve@0.6.0
apps/checkout                            |  WARN  deprecated svgo@1.3.2
packages/ui-kit                          |  WARN  deprecated sane@4.1.0
packages/ui-kit                          |  WARN  deprecated chokidar@2.1.8
packages/ui-kit                          |  WARN  deprecated fsevents@1.2.13
packages/ui-kit                          |  WARN  deprecated source-map-resolve@0.5.3
packages/ui-kit                          |  WARN  deprecated querystring@0.2.0
packages/ui-kit                          |  WARN  deprecated querystring@0.2.1
packages/ui-kit                          |  WARN  deprecated resolve-url@0.2.1
packages/ui-kit                          |  WARN  deprecated source-map-url@0.4.1
packages/ui-kit                          |  WARN  deprecated urix@0.1.0
packages/ui-kit                          |  WARN  deprecated uuid@3.4.0
Packages: +2752
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /root/.local/share/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 2691, reused 2654, downloaded 0, added 2752, done
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 165ms

devDependencies:
+ env-cmd 10.1.0
+ husky 8.0.1
+ lint-staged 13.0.3
+ prettier 2.7.1
+ turbo 1.3.4

 WARN  Issues with peer dependencies found
apps/saleor-app-checkout
├─┬ @material-ui/core 4.12.4
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│ ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│ ├── ✕ unmet peer @types/react@"^16.8.6 || ^17.0.0": found 18.0.15
│ ├─┬ @material-ui/styles 4.11.5
│ │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│ │ ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│ │ ├── ✕ unmet peer @types/react@"^16.8.6 || ^17.0.0": found 18.0.15
│ │ └─┬ @material-ui/utils 4.11.3
│ │   ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│ │   └── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│ └─┬ @material-ui/system 4.12.2
│   ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│   ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│   └── ✕ unmet peer @types/react@"^16.8.6 || ^17.0.0": found 18.0.15
├─┬ @material-ui/icons 4.11.3
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│ ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│ └── ✕ unmet peer @types/react@"^16.8.6 || ^17.0.0": found 18.0.15
├─┬ @material-ui/lab 4.0.0-alpha.61
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
│ ├── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0": found 18.2.0
│ └── ✕ unmet peer @types/react@"^16.8.6 || ^17.0.0": found 18.0.15
└─┬ @saleor/macaw-ui 0.4.0
  ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
  └─┬ react-inlinesvg 2.3.0
    └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0

apps/storefront
├─┬ @graphql-codegen/cli 2.6.2
│ ├─┬ @graphql-tools/prisma-loader 7.2.6
│ │ └─┬ @graphql-tools/url-loader 7.13.1
│ │   └─┬ meros 1.2.0
│ │     └── ✕ missing peer @types/node@>=12
│ └─┬ graphql-config 4.3.2
│   ├─┬ cosmiconfig-typescript-loader 3.0.0
│   │ └── ✕ missing peer @types/node@"*"
│   └─┬ ts-node 10.9.1
│     └── ✕ missing peer @types/node@"*"
├─┬ @apollo/client 3.5.10
│ └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
└─┬ @saleor/sdk 0.4.4
  ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0
  └── ✕ unmet peer graphql@^15.5.0: found 16.3.0
Peer dependencies that should be installed:
  @types/node@>=12.0.0  

packages/checkout-storefront
├─┬ @testing-library/react 12.1.5
│ ├── ✕ unmet peer react@<18.0.0: found 18.2.0
│ └── ✕ unmet peer react-dom@<18.0.0: found 18.2.0
└─┬ @saleor/sdk 0.4.4
  └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0

packages/ui-kit
├─┬ @storybook/addon-actions 6.5.9
│ └─┬ react-inspector 5.1.1
│   └── ✕ unmet peer react@"^16.8.4 || ^17.0.0": found 18.2.0
├─┬ @storybook/addon-essentials 6.5.9
│ └─┬ @storybook/addon-docs 6.5.9
│   └─┬ @mdx-js/react 1.6.22
│     └── ✕ unmet peer react@"^16.13.1 || ^17.0.0": found 18.2.0
└─┬ @storybook/react 6.5.0-beta.7
  └─┬ react-element-to-jsx-string 14.3.4
    ├── ✕ unmet peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1": found 18.2.0
    └── ✕ unmet peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1": found 18.2.0

@rodolfojcj
Copy link
Contributor Author

Hello everybody.

I found a way to avoid the reported error, by means of editing the file apps/saleor-app-checkout/next.config.js and changing this fragment:

experimental: {
  esmExternals: false,
},

to this other one:

experimental: {
  esmExternals: 'loose',
},

I tested it with Node.js 18 on Ubuntu 22.04, with the react-storefront sources updated to commit b4cdf06e3f5e43a5acdf443e5b2357244e924d40.

Some related observations to better understand the situation:

  • The file apps/saleor-app-checkout/.turbo/turbo-build.log shows these lines:

    saleor-app-checkout:build: > saleor-app-checkout@0.0.0 compile:i18n
    saleor-app-checkout:build: > formatjs compile-folder --ast --format transifex content/locales content/compiled-locales
    saleor-app-checkout:build: info  - Loaded env from /root/react-storefront/apps/saleor-app-checkout/.env
    saleor-app-checkout:build: warn  - You have enabled experimental feature (esmExternals) in next.config.js.
    saleor-app-checkout:build: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
    
  • At https://nextjs.org/blog/next-11-1#es-modules-support there is a mention about the esmExternals attribute becoming true by default since Next.js 12, which is the version used by this react-storefront project.

  • At https://nextjs.org/docs/messages/import-esm-externals there are details related with this reported error. Specifically, the part saying that If you are already using import, make sure that this is not changed by a transpiler, e. g. TypeScript or Babel. seems to apply to the react-storefront project, given that the generated file packages/checkout-storefront/dist/cjs/index.js has the following near the beginning:

    var e=require("react/jsx-runtime"),t=require("graphql/language/visitor.mjs"),r=require("graphql /language/kinds.mjs"),n=require("graphql/language/printer.mjs"),o=require("graphql/error/GraphQLError.mjs"),i=require("graphql/language/parser.mjs"),a=require("rea ct"),s=require("graphql"),u=require("react-dom");

  • At Use 'import' with ESM packages instead vercel/next.js#35217 there are related details.

Given all of the above, could you please check what source code or documentation change may be applied to react-storefront?

Thanks again.

@mmiszy
Copy link
Contributor

mmiszy commented Aug 25, 2022

We require "pnpm": "^7.5.0" make sure you're using that. Then, run pnpm install --frozen-lockfile.

Unfortunately, I couldn't reproduce the problem locally.

@rodolfojcj
Copy link
Contributor Author

rodolfojcj commented Aug 25, 2022

Hello @mmiszy.

Based on your feedback I gathered these observations when running, or trying to run, the pnpm build command:

  • On Ubuntu 22.04 with nodejs version 16.17.0, pnpm version 7.5.2, the react-storefront sources of commit ID 06ee103aea750fb714fc14201181e649b09c8c48 and previously running pnpm install --frozen-lockfile, the issue does not happen.
  • On Debian 11 with nodejs version 18.8.0, pnpm version 7.9.5, the react-storefront sources of commit ID 06ee103aea750fb714fc14201181e649b09c8c48 and previously running pnpm install, the issue still happens.
  • On Debian 11 with nodejs version 18.8.0, pnpm version 7.9.5 or 7.6.0, the react-storefront sources of commit ID 06ee103aea750fb714fc14201181e649b09c8c48 running pnpm install --frozen-lockfile fails with the message ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with packages/checkout-storefront/package.json.
  • On Debian 11 with nodejs version 18.8.0, pnpm version 7.5.2, the react-storefront sources of commit ID 06ee103aea750fb714fc14201181e649b09c8c48 and previously running pnpm install --frozen-lockfile, the issue does not happen.
  • On Debian 11 with nodejs version 18.8.0, pnpm version 7.5.2, the react-storefront sources of commit ID 06ee103aea750fb714fc14201181e649b09c8c48 and previously running pnpm install, the issue does not happen.

For reference, this is the final output of running the pnpm install command when having pnpm version 7.5.2, with and without the frozen-lockfile parameter:

devDependencies:
+ env-cmd 10.1.0
+ husky 8.0.1
+ lint-staged 13.0.3
+ prettier 2.7.1
+ turbo 1.4.3
+ typescript 4.7.4

. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 111ms

It's worth mentioning that no local source code modifications have been applied to the react-storefront directory, except adjusting the variables inside its .env file to point to a saleor core installation of mine, which runs with version 3.6.3.

Summary:

  • The reported issue seems to happen with the newer pnpm versions, like 7.6.x or 7.9.x.
  • Installing pnpm 7.5.x seems the safe way to avoid the issue and avoid changes to the react-storefront source code.

Regards.

@jamesknelson
Copy link

This seems to be caused by this pnpm bug, which was introduced after 7.5.2.

pnpm/pnpm#5144

Unfortuneatly, Vercel now uses a newer version of pnpm, so it's impossible to deploy to vercel without a fix.

As a workaround, I disabled auto-install-peers at a project level, then reinstalled to regenerate the lockfile by reinstalling, and committed the result.

pnpm config set auto-install-peers false --location project
pnpm i

This may be hard to reproduce even on newer pnpm versions if auto-install-peers is already off by default on your machine for some reason.

@rodolfojcj
Copy link
Contributor Author

Thank you @jamesknelson.

I have not played with auto-install-peers. The issue I reported happens for me on fresh Debian or Ubuntu machines, installing the official Node 16.x or 18.x packages from the Node.js project, and then installing pnpm.

For my local purposes, I can continue using pnpm version 7.5.2.

Is there other thing to consider? If not, maybe we can close this issue, unless someone from the Saleor team thinks different.

Regards.

@mmiszy
Copy link
Contributor

mmiszy commented Sep 5, 2022

We're moving forward with enabling corepack on Vercel by default now. Some of the problems should now be gone. See: #458

@rodolfojcj
Copy link
Contributor Author

Hello.

The initial reported issue no longer happens with some combination of these:

  • Using the react-storefront sources of commit e0780e7c830b32254b4331ebb6c6ce5fa19f0856.
  • Installing the pnpm utility without specifying its version.

In case that no other improvements are considered, this issue can be closed.

Regards.

@mmiszy
Copy link
Contributor

mmiszy commented Sep 13, 2022

Fixed in #458

@mmiszy mmiszy closed this as completed Sep 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working checkout-storefront
Projects
None yet
Development

No branches or pull requests

3 participants