How to make code changes show when using yalc

user_11749004 0
Viewed 2717

I learn yalc and do exactly what it say but when I change the library code that I have done yalc publish on, I can't see the code changes in my app.

The library is notistack

Steps:

  • yalc publish in the notistack
  • I then run yalc add notistack in my App or yalc link notistack

When I then change the notistack code and run yalc push then nothing happens but docs say I should get the code change in my app?

I even restart the App server and do the yalc update notistack but the notistack code changes is not visible.

The strange thing is in my app VSCode node_modules I see the notistack code changes. It's like the yalc push is propagating the notistack changes to the app but the app is not using them.

It's even more strange that when I restart VSCode and start the App Server to do debugging the old notistack code is still used.

I test to remove the yalc remove notistack and restart laptop and then do again yalc add notistack. I then see the old code again.

I tried in Chrome Browser to do hard reset empty cashes but no luck getting this to work.

When I go and look in yalc Store: C:\Users\user\AppData\Local\Yalc\packages\notistack\1.0.10\src:

I see the latest code.

In Chrome Inspector Console I see old code but under Inspector source the correct code is there. This is so confusing. I can't set breakpoints either, not in Inspector or in VSCode, breakpoints in the notistack. It's like the JavaScript files are dislocated.

This happens in both Edge and Chrome.

What I do now after two days to be able to continue work I must delete that Yalc store folder,,C:\Users\user\AppData\Local\Yalc\packages\noti............... deleted yalc.lock in app project delete package-lock.json and node_modules

Then start over publishing and adding the notistack. It's time-consuming but works.

How can I make code changes show in Yalc?

package.json for notistack

{
    "name": "notistack",
    "version": "1.0.10",
    "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
    "main": "src/index.js",
    "module": "dist/notistack.esm.js",
    "types": "src/index.d.ts",
    "license": "MIT",
    "author": {
        "name": "Hossein Dehnokhalaji",
        "email": "hossein.dehnavi98@yahoo.com",
        "url": "https://github.com/iamhosseindhv/notistack"
    },
    "homepage": "https://www.iamhosseindhv.com/notistack",
    "repository": {
        "url": "git+https://github.com/iamhosseindhv/notistack.git",
        "type": "git"
    },
    "scripts": {
        "build": "tsdx build --transpileOnly --entry ./src/index.js",
        "prebuild": "npm run docs",
        "prepublishOnly": "npm run build",
        "docs": "rimraf typedoc.json && typedoc --tsconfig",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
    },
    "peerDependencies": {
        "@material-ui/core": "^4.0.0",
        "react": "^16.8.0 || ^17.0.0",
        "react-dom": "^16.8.0 || ^17.0.0"
    },
    "dependencies": {
        "clsx": "^1.1.0",
        "hoist-non-react-statics": "^3.3.0"
    },
    "bugs": {
        "url": "https://github.com/iamhosseindhv/notistack/issues"
    },
    "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/notistack"
    },
    "contributors": [
        "Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
    ],
    "keywords": [
        "notistack",
        "enqueueSnackbar",
        "snackbarprovider",
        "useSnackbar",
        "multiple",
        "react",
        "javascript",
        "material-ui",
        "toast",
        "redux",
        "snackbar",
        "stacked",
        "notification",
        "material design",
        "hossein",
        "dehnokhalaji",
        "iamhosseindhv"
    ],
    "yalcSig": "073ef039ed1e473029c88b6ad9af16d9"
}

UPDATE

Adding App package.json

{
  "name": "greta-thunberg-fff",
  "version": "1.2.9",
  "private": true,
  "homepage": "https://greta.portplays.com",
  "main": "index.js",
  "module": "dist/index.js",
  "files": [
    "dist",
    "README.md"
  ],
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.2",
    "change-case": "^4.1.2",
    "classnames": "^2.3.1",
    "clean-tag": "^3.1.1",
    "clsx": "^1.1.1",
    "comma-separated-values": "^3.6.4",
    "crypto-js": "^4.0.0",
    "date-fns": "^2.23.0",
    "faker": "^5.5.3",
    "firebase": "^7.23.0",
    "formik": "^2.2.5",
    "framer-motion": "^2.9.5",
    "gsap": "^3.5.1",
    "history": "^5.0.0",
    "i": "^0.3.6",
    "lodash": "^4.17.19",
    "lodash.debounce": "^4.0.8",
    "mammoth": "^1.4.11",
    "material-table": "^1.69.2",
    "moment": "^2.27.0",
    "my-notistack-fork": "file:.yalc/my-notistack-fork",
    "normalize-wheel": "^1.0.1",
    "npm": "^7.11.2",
    "pdfjs-dist": "^1.8.357",
    "preval.macro": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-activity": "^1.2.2",
    "react-bootstrap": "^1.3.0",
    "react-chartjs-2": "^2.11.1",
    "react-data-grid": "^6.1.0",
    "react-detect-offline": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.4",
    "react-helmet": "^6.1.0",
    "react-motion": "^0.5.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.5",
    "react-resize-detector": "^5.0.7",
    "react-router": "^6.0.0-beta.4",
    "react-router-dom": "^6.0.0-beta.4",
    "react-scripts": "^3.4.0",
    "react-slick": "^0.27.3",
    "react-spring": "^8.0.27",
    "react-transition-group": "^4.4.1",
    "react-visibility-sensor": "^5.1.1",
    "rebass": "^4.0.7",
    "recompose": "^0.30.0",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "sass": "^1.41.1",
    "simplebar-react": "^2.3.5",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.1.1",
    "styled-system": "^5.1.5",
    "three": "^0.85.2",
    "typescript": "^3.9.7",
    "uuid": "^8.3.1",
    "xlsx": "^0.10.1",
    "yup": "^0.32.1"
  },
  "scripts": {
    "start": "set PORT=6545&& react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "axios": "^0.19.2",
    "babel-eslint": "^10.1.0",
    "clean-tag": "^3.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.2",
    "gh-pages": "^2.0.1",
    "prettier": "^2.1.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "^3.4.3",
    "rebass": "^4.0.7",
    "styled-system": "^5.1.5"
  }
}
reactjs
2 Answers

I replicated your setup using yalc add notistack and noticed that yalc push doesn't compile the package. It worked when I added the flag --scripts as described in the docs:

scripts options is false by default, so it won't run pre/post scripts (may change this with passing --scripts flag).

You can also run yalc publish and then yalc push, or yalc publish --push

For the changes to take effect in the app, I had to run npm start again.

This is how the notistack dependency looks in the package.json

"notistack": "file:.yalc/notistack",

UPDATE

As you pointed out, I also tried renaming the package to my-notistack-fork by changing the name in package.json

{
    "name": "my-notistack-fork",
    "version": "2.0.2",
    "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",

then removing the notistack dependency in my app with yalc remove notistack and adding it again with the new name yalc add my-notistack-fork. After that I made changes to the lib code and ran yalc publish --push and I could see them reflected when running again the app. The dependency looks like this

  "my-notistack-fork": "file:.yalc/my-notistack-fork",

Interesting that, for me, in the app node_modules, the lib directory has compiled files, and the error in your screenshot has an src dir which gives the impression that it is uncompiled node_modules

user_18680080

If I understood correctly everything, I see two problems:

  1. forking an npm package
  2. working simultaneously with two packages

First of all I have to admit I do not know yalc but after taking a quick look to it, I would say it seems to work as npm does; I'll provide my answer with npm, I leave up to you to adapt my answer using yalc; but I'm pretty sure it's just matter of running the yalc command rather than the npm one, using the same parameters.

1. forking an npm package

If I understood correctly you are not the author of notistack, you have your own fork of it, but I still not understood its name.

Could it be you forked notistack and you didn't changed its name?

So, when we want to fork a package we need to give it a new name, let's say my-notistak-fork; the package.json file should seems something like:

{
    "name": "my-notistack-fork",
    "version": "new version progression numbers",
    "license": "MIT",
    "author": {
        ... describe yourself
    },
    "homepage": "a new homepage, if you have one",
    "repository": {
        "url": "URL of your fork"
    },
    "bugs": {
        "url": "URL of issues in your fork"
    },
    "funding": {
        ... if you have one, describe it
    },
    "contributors": [
        ... who contribute to your fork
    ],
    ...
}

I wrote only the filed which needs to be changed, the others could be left untouched (but this depends on how much you change the package, anyway this is another topic).

Publish it with npm publish command.

Now you have published my-notistack-fork which is a clone of notistack (at version you forked it).

2. working simultaneously with two packages

With npm this is something trivial and it works very well.

  1. In the root directory of your local cloned my-notistack-fork repository issue the npm link command.
  2. In the root directory of your local app server repository issue the following commands:
    1. npm add my-notistack-fork
    2. npm link my-notistack-fork
    3. npm install

That's all. Now changing files in each of the two repositories should immediately reflect on your debugging/development environment.

Probably cleaning the root directory of your local app server repository before doing that could be a good idea. I mean:

  1. removing the node_modules directory
  2. removing any lock file (package-lock.json and/or the yalc one)
  3. removing any reference to notistack from you package.json file
user_46909460
Related