search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.93k stars 1.09k forks source link

Unable to start example in Windows 10 #531

Closed jippy89 closed 2 years ago

jippy89 commented 2 years ago

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

bug

2. Describe the bug or feature

I tried running the example, I tried running yarn install and yarn start in both root folder and examples. Here's result of running yarn; yarn start; in root:

PS C:\Users\<User>\Documents\Projects\oss\draggable> yarn; yarn start;
yarn install v1.22.17
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "babel-preset-shopify > react-hot-loader > redbox-react@1.6.0" has unmet peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0".
warning "babel-preset-shopify > react-hot-loader > redbox-react@1.6.0" has unmet peer dependency "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0".
warning "eslint-plugin-shopify > typescript-eslint-parser@15.0.0" has unmet peer dependency "typescript@*".
[4/4] Building fresh packages...
$ yarn build:development
yarn run v1.22.17
$ node scripts/build.js
Hash: d7f95c13f49128796bbb
Version: webpack 4.12.0
Time: 1657ms
Built at: 07/20/2022 3:40:07 PM
   Asset     Size  Chunks             Chunk Names
index.js  246 KiB    main  [emitted]  main
Entrypoint main = index.js
[./src/Draggable/DragEvent/index.js] 359 bytes {main} [built]
[./src/Draggable/Draggable.js] 20.2 KiB {main} [built]
[./src/Draggable/DraggableEvent/index.js] 379 bytes {main} [built]
[./src/Draggable/Plugins/index.js] 1.36 KiB {main} [built]
[./src/Draggable/Sensors/DragSensor/index.js] 318 bytes {main} [built]
[./src/Draggable/Sensors/ForceTouchSensor/index.js] 348 bytes {main} [built]
[./src/Draggable/Sensors/index.js] 1.43 KiB {main} [built]
[./src/Draggable/index.js] 1.4 KiB {main} [built]
[./src/Droppable/index.js] 613 bytes {main} [built]
[./src/Plugins/index.js] 1.61 KiB {main} [built]
[./src/Sortable/index.js] 604 bytes {main} [built]
[./src/Swappable/index.js] 613 bytes {main} [built]
[./src/index.js] 1.91 KiB {main} [built]
[./src/shared/AbstractEvent/index.js] 333 bytes {main} [built]
[./src/shared/AbstractPlugin/index.js] 338 bytes {main} [built]
    + 58 hidden modules
Done in 5.00s.
Done in 14.49s.
yarn run v1.22.17
$ concurrently "yarn watch" "cd examples && yarn && yarn start"
$ node scripts/watch.js
[1/4] Resolving packages...
success Already up-to-date.
$ yarn run build
$ yarn run clean && gulp build $npm_package_config_tools
$ rimraf dist bundle-report.html
[0] Hash: d7f95c13f49128796bbb
[0] Version: webpack 4.12.0
[0] Time: 1782ms
[0] Built at: 07/20/2022 3:40:12 PM
[0]    Asset     Size  Chunks             Chunk Names
[0] index.js  246 KiB    main  [emitted]  main
[0] Entrypoint main = index.js
[0] [./src/Draggable/DragEvent/index.js] 359 bytes {main} [built]
[0] [./src/Draggable/Draggable.js] 20.2 KiB {main} [built]
[0] [./src/Draggable/DraggableEvent/index.js] 379 bytes {main} [built]
[0] [./src/Draggable/Plugins/index.js] 1.36 KiB {main} [built]
[0] [./src/Draggable/Sensors/DragSensor/index.js] 318 bytes {main} [built]
[0] [./src/Draggable/Sensors/ForceTouchSensor/index.js] 348 bytes {main} [built]
[0] [./src/Draggable/Sensors/index.js] 1.43 KiB {main} [built]
[0] [./src/Draggable/index.js] 1.4 KiB {main} [built]
[0] [./src/Droppable/index.js] 613 bytes {main} [built]
[0] [./src/Plugins/index.js] 1.61 KiB {main} [built]
[0] [./src/Sortable/index.js] 604 bytes {main} [built]
[0] [./src/Swappable/index.js] 613 bytes {main} [built]
[0] [./src/index.js] 1.91 KiB {main} [built]
[0] [./src/shared/AbstractEvent/index.js] 333 bytes {main} [built]
[0] [./src/shared/AbstractPlugin/index.js] 338 bytes {main} [built]
[0]     + 58 hidden modules
[1] [15:40:15] No gulpfile found
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
[1] cd examples && yarn && yarn start exited with code 1

3. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

  1. Clone the repository
  2. Run yarn; yarn start; in Windows

4. Please tell us about your environment:

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i7-11600H @ 2.90GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.10 - /c/Users/Jip Irfandy/AppData/Local/Programs/Python/Python39/python
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.39)
  npmGlobalPackages:
    gatsby-cli: 4.16.0
hnrq commented 2 years ago

Try using the same node version as in .nvmrc (v10.4.0) or in examples/.nvmrc (12.16.0)

jippy89 commented 2 years ago

Hi @hnrq, thanks for replying! I already did that. I do install node via nvm and am aware of the use of .nvmrc but I can't seem to do it. Do you have any other solution? Or do you need any other info from me about my spec?

hnrq commented 2 years ago

Got it, that's odd... I remember I had a similar error, but it worked once I used the right version, no other solutions from my side :/

jippy89 commented 2 years ago

Haha thanks thought, but I do notice that there's this line

[1] [15:40:15] No gulpfile found

I'm pretty sure it is what it meant. Maybe there's supposed to be a gulpfile somewhere? It's weird that it seems that I'm the only one issueing this. I checked in StackOverflow, that this error literally mean what it is. https://stackoverflow.com/questions/38937095/no-gulpfile-found

hnrq commented 2 years ago

Which version of the lib are you using?

jippy89 commented 2 years ago

Here's a list of my package.json @hnrq 

{
  "name": "@shopify/draggable",
  "version": "1.0.0-beta.13",
  "private": false,
  "license": "MIT",
  "description": "The JavaScript Drag & Drop library your grandparents warned you about.",
  "author": "Shopify <dev@shopify.com>",
  "homepage": "https://github.com/Shopify/draggable#readme",
  "repository": "https://github.com/Shopify/draggable",
  "contributors": [
    {
      "name": "Max Hoffmann",
      "email": "max.hoffmann@shopify.com"
    },
    {
      "name": "Curtis Dulmage",
      "email": "curtis.dulmage@shopify.com"
    }
  ],
  "bugs": {
    "url": "https://github.com/Shopify/draggable/issues"
  },
  "keywords": [
    "shopify",
    "draggable",
    "drag-and-drop",
    "es6"
  ],
  "main": "./lib/draggable.bundle.js",
  "types": "./index.d.ts",
  "scripts": {
    "start": "concurrently \"yarn watch\" \"cd examples && yarn && yarn start\"",
    "build": "yarn build:production",
    "watch": "node scripts/watch.js",
    "prepare": "yarn build:development",
    "prepublishOnly": "yarn build:production",
    "lint": "eslint ./src ./scripts --max-warnings 0",
    "esdoc": "esdoc -c esdoc.json",
    "test": "jest --config config.json",
    "test-ci": "jest --config config.json --coverage && codecov",
    "build:development": "node scripts/build.js",
    "build:production": "node scripts/build.js --production"
  },
  "files": [
    "lib/**/*.js",
    "index.d.ts"
  ],
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "^23.0.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-shopify": "^16.5.0",
    "codecov": "^3.0.2",
    "concurrently": "^3.5.1",
    "core-js": "^2.5.7",
    "esdoc": "^1.1.0",
    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
    "esdoc-standard-plugin": "^1.0.0",
    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-shopify": "^22.1.0",
    "jest": "^23.1.0",
    "webpack": "^4.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.3"
  },
  "eslintConfig": {
    "extends": "plugin:shopify/esnext",
    "env": {}
  },
  "babel": {
    "plugins": [
      "transform-class-properties",
      "transform-object-rest-spread",
      "transform-es2015-modules-commonjs"
    ]
  },
  "publishConfig": {
    "access": "public",
    "@shopify:registry": "https://registry.npmjs.org"
  }
}
jippy89 commented 2 years ago

Oh it seems that it's the same issue as this one #225. That leads me to #259. I tried testing the my current repo, but failed at step 5 of #259.

jippy89 commented 2 years ago

Ah, I looked again. So it's Window's problem after all.. I tried changing the script, instead of using the $npm_package_config_tools, I replaced them with the real value and it worked! 

"scripts": {
    "clean": "rimraf dist bundle-report.html",
    "views": "gulp views --require @babel/register --gulpfile tools",
    "scripts": "gulp scripts --require @babel/register --gulpfile tools",
    "styles": "gulp styles --require @babel/register --gulpfile tools",
    "start": "gulp start --require @babel/register --gulpfile tools",
    "build": "yarn run clean && gulp build --require @babel/register --gulpfile tools",
    "build:prod": "NODE_ENV=production yarn run build",
    "lint:scss": "stylelint './src/**/*.scss'",
    "prettier:scss": "prettier-stylelint './src/**/*.scss' --write -q",
    "lint:js": "eslint './src/**/*.js' './tools/**/*.js' --max-warnings 0",
    "prettier:js": "yarn run lint:js --fix",
    "prepublish": "yarn run build"
  },