substrate-front-end-template icon indicating copy to clipboard operation
substrate-front-end-template copied to clipboard

yarn start not working

Open ghost opened this issue 3 years ago • 7 comments

Screenshot from 2022-11-16 09-58-48

ghost avatar Nov 16 '22 04:11 ghost

@hariaccubits I saw some errors in your yarn install process. You might re-install it again or try to figure out what is that error.

sbzi1020 avatar Nov 26 '22 04:11 sbzi1020

The reason you are getting error Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation) is because you are trying to use an old version of Yarn 1.22.15 (see your output of yarn --version) whilst running yarn start, however the repository is configured to use Node.js LTS v16.18.1 (hence why in .nvmrc it has lts/gallium) and to use Yarn 3.1.1 (hence why there's a .yarn folder with .yarn/releases/yarn-3.1.1.cjs and a file called .yarnrc.yml whose contents include the line yarnPath: .yarn/releases/yarn-3.1.1.cjs).

I got the same error when using the node:gallium-alpine pre-built Docker image since it was using Yarn v1 (1.22.19), but the contents of the .yarn folder and .yarnrc.yml file in this repository requires Yarn v3 and was causing a conflict.

I even got an error trying to use the versions used in this repository of Node.js LTS Gallium and Yarn 3.1.1, but when I upgraded to Yarn 3.3.0 it resolved the issue when running yarn start. To do that I first had to:

Use stable Node.js 16.x (i.e. lts/gallium)

Remove the .yarn directory,

rm -rf .yarn

Temporarily backup by renaming .yarnrc.yml since it has some extra lines of code at the top to retain and use later

mv .yarnrc.yml .yarnrc.yml.old

Run the following to create a .yarn folder with latest Yarn v3.3.0 and re-create .yarnrc.yml with Yarn v3.3.0 (with contents yarnPath: .yarn/releases/yarn-3.3.0.cjs)

yarn policies set-version 3.3.0

Copy remainder of .yarnrc.yml.old back into .yarnrc.yml, so the file became:

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

yarnPath: .yarn/releases/yarn-3.3.0.cjs

Then using Node.js with LTS Gallium, I simply followed these Yarn instructions to install its Corepack and the latest Yarn 3.3.0 and also installed Git first since it used that, then after doing that I was able to run yarn start without issue.

Alpine Linux

apk update && apk add --update git && rm -rf /var/cache/apk/*
corepack enable \
    && corepack prepare yarn@stable --activate \
    && yarn set version 3.3.0 \
    && yarn install
yarn start

Note: If you're using Ubuntu rather than Alpine Linux then you'd instead install git with apt-get update && apt-get install -y git.

There's also an inconsistency in the Node.js version used in the repo. The CircleCI .circleci/config.yml file is using Node.js 16.14, whereas the .nvmrc file is using Node.js 16.18 (Gallium) lts/gallium

ltfschoen avatar Dec 11 '22 21:12 ltfschoen

@ltfschoen - looks like a good stack exchange question and answer about how to use this template to me, and per #245 comment for a PR to update things here, I am sure a succinct a minimal update would be very welcome :)

nuke-web3 avatar Dec 12 '22 01:12 nuke-web3

The reason you are getting error Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation) is because you are trying to use an old version of Yarn 1.22.15 (see your output of yarn --version) whilst running yarn start, however the repository is configured to use Node.js LTS v16.18.1 (hence why in .nvmrc it has lts/gallium) and to use Yarn 3.1.1 (hence why there's a .yarn folder with .yarn/releases/yarn-3.1.1.cjs and a file called .yarnrc.yml whose contents include the line yarnPath: .yarn/releases/yarn-3.1.1.cjs).

I got the same error when using the node:gallium-alpine pre-built Docker image since it was using Yarn v1 (1.22.19), but the contents of the .yarn folder and .yarnrc.yml file in this repository requires Yarn v3 and was causing a conflict.

I even got an error trying to use the versions used in this repository of Node.js LTS Gallium and Yarn 3.1.1, but when I upgraded to Yarn 3.3.0 it resolved the issue when running yarn start. To do that I first had to:

Use stable Node.js 16.x (i.e. lts/gallium)

Remove the .yarn directory,

rm -rf .yarn

Temporarily backup by renaming .yarnrc.yml since it has some extra lines of code at the top to retain and use later

mv .yarnrc.yml .yarnrc.yml.old

Run the following to create a .yarn folder with latest Yarn v3.3.0 and re-create .yarnrc.yml with Yarn v3.3.0 (with contents yarnPath: .yarn/releases/yarn-3.3.0.cjs)

yarn policies set-version 3.3.0

Copy remainder of .yarnrc.yml.old back into .yarnrc.yml, so the file became:

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

yarnPath: .yarn/releases/yarn-3.3.0.cjs

Then using Node.js with LTS Gallium, I simply followed these Yarn instructions to install its Corepack and the latest Yarn 3.3.0 and also installed Git first since it used that, then after doing that I was able to run yarn start without issue.

Alpine Linux

apk update && apk add --update git && rm -rf /var/cache/apk/*
corepack enable \
    && corepack prepare yarn@stable --activate \
    && yarn set version 3.3.0 \
    && yarn install
yarn start

Note: If you're using Ubuntu rather than Alpine Linux then you'd instead install git with apt-get update && apt-get install -y git.

There's also an inconsistency in the Node.js version used in the repo. The CircleCI .circleci/config.yml file is using Node.js 16.14, whereas the .nvmrc file is using Node.js 16.18 (Gallium) lts/gallium

my initial post above is erroneous, please refer to this stackexchange post

ltfschoen avatar Dec 15 '22 12:12 ltfschoen

Thanks for chiming in here @ltfschoen! Just going through these issues and trying to sort them out. Am I good to close this?

sacha-l avatar May 09 '23 15:05 sacha-l

Maybe revert to using Yarn 1.x instead of Yarn 3.x or update the README with more precise steps on how to configure it to use Yarn 3.x so users don't encounter this issue and give up.

ltfschoen avatar May 09 '23 18:05 ltfschoen

@sbzi1020 when installing the dependencies, I have encountered several similar issues:

  • Peer Dependency Warnings: Several packages, such as eslint-config-react-app, react-dev-utils, and react-scripts, were missing required peer dependencies, causing warnings during the yarn install process.

  • Checksum Mismatch: The semantic-ui-css package had a checksum mismatch error, causing the installation to fail.

My Solution to issue:

Node.js Version Requirement

Unlike what is stated on substrate-tutorial : The node version should be at least v14 to run the front-end template. It appears that the latest version of Corepack requires a more recent version of Node.js. Specifically, it requires Node.js ^18.17.1 or >=20.10.0. Initially, I had Node.js v16.20.2, which does not meet these requirements. Corepack is needed to manage and use the latest version of Yarn (v3), ensuring compatibility and providing a consistent way to handle package managers across different Node.js versions.

Because the tutorial also states: The yarn version should be at least v3 to run the front-end template.

To resolve this, I upgraded Node.js to a compatible version. Here are the steps:

  1. Upgrade Node.js to a Compatible Version: Install Node.js v18.17.1 or later using nvm:
nvm install 18
nvm use 18

Verify the Node.js version:

node -v

Ensure it outputs v18.17.1 or higher.

  1. Reinstall Corepack: Reinstall Corepack with the new Node.js version:
npm uninstall -g corepack
npm install -g corepack
  1. Enable Corepack: Enable Corepack again to manage Yarn and other package managers:
corepack enable
  1. Prepare Yarn v3: Prepare and activate the specific version of Yarn you need (v3.0.0):
corepack prepare [email protected] --activate

Missing Peer Dependencies

  1. Install Missing Peer Dependencies To resolve the peer dependency warnings, I manually added the following dependencies to the project:
yarn add @babel/[email protected] @babel/[email protected] @babel/[email protected] [email protected] [email protected] [email protected] [email protected] --dev
  1. Fix Checksum Mismatch To address the checksum mismatch with semantic-ui-css, I reinstalled the package from a different source:
yarn add semantic-ui-css@latest
  1. Reinstall Project Dependencies

After addressing the above issues, I successfully installed the project dependencies and start the project.

yarn install

My setup is as following :

Node.js Version: v18.17.1 Yarn Version v3.0.0

OS:

ProductName:		macOS
ProductVersion:		14.5
BuildVersion:		23F79

System Information:

Software:

    System Software Overview:

      System Version: macOS 14.5 (23F79)
      Kernel Version: Darwin 23.5.0
      Boot Volume: Macintosh HD

Processor:

Intel(R) Core(TM) i5 CPU @ 2.30GHz

rbbozkurt avatar Jun 08 '24 15:06 rbbozkurt