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.

Sign up for GitHub

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

Jump to bottom

fn.bind is not a function Error after updating v5.1 to v6.1 (Angular) #13702

Closed
ChazUK opened this issue Jan 22, 2021 · 1 comment
Closed

fn.bind is not a function Error after updating v5.1 to v6.1 (Angular) #13702

ChazUK opened this issue Jan 22, 2021 · 1 comment

Comments

@ChazUK
Copy link

ChazUK commented Jan 22, 2021

After updating Storybook from v5.1 to v6.1 in steps I've got an error that keeps popping up when I run Storybook.

fn.bind is not a function
TypeError: fn.bind is not a function
    at newTrustedFunctionForJIT (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:136300:15)
    at JitEvaluator.evaluateCode (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:136364:29)
    at JitEvaluator.evaluateStatements (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:136338:21)
    at JitCompiler._interpretOrJit (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:158465:39)
    at JitCompiler._compileTemplate (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:158437:33)
    at http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:158379:46
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:158379:19)
    at http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:158292:18
    at Object.then (http://localhost:4400/vendors~main.45a56b89cb8455e81f74.bundle.js:131957:52)

The update was a process of updating Angular v9 to v11 in an Nx managed repository.

.storybook/main.js

module.exports = {
  stories: ['../**/*.stories.js',],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-backgrounds',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    'storybook-addon-paddings',
  ],
};

lib/ui/.storybook/main.js

const lib_main_module = require('../../../.storybook/main');

lib_main_module.stories.push('../src/lib/**/*.stories.@(js|jsx|ts|tsx)');
module.exports = lib_main_module;

test story

import { text } from '@storybook/addon-knobs';
import { TagLinkComponent } from './tag-link.component';

export default {
  title: 'Atoms/Tag Link',
};

export const Default = () => ({
  component: TagLinkComponent,
  template: `<a tag-link href="#">{{ title }}</a>`,
  props: {
    title: text('Title', 'Markets and Economy'),
  },
});

package.json

"dependencies": {
    "@amcharts/amcharts4": "^4.10.2",
    "@angular/animations": "11.1.0",
    "@angular/cdk": "^11.1.0",
    "@angular/common": "11.1.0",
    "@angular/compiler": "11.1.0",
    "@angular/core": "11.1.0",
    "@angular/forms": "11.1.0",
    "@angular/localize": "^11.1.0",
    "@angular/material": "^11.1.0",
    "@angular/platform-browser": "11.1.0",
    "@angular/platform-browser-dynamic": "11.1.0",
    "@angular/platform-server": "^11.1.0",
    "@angular/router": "11.1.0",
    "@nestjs/common": "7.6.5",
    "@nestjs/config": "^0.5.0",
    "@nestjs/core": "7.6.5",
    "@nestjs/graphql": "^7.3.9",
    "@nestjs/ng-universal": "^3.2.0",
    "@nestjs/platform-express": "7.6.5",
    "@ng-toolkit/universal": "^8.1.0",
    "@ngneat/transloco": "^2.20.0",
    "@ngneat/transloco-locale": "^1.4.0",
    "@ngneat/transloco-messageformat": "^1.3.1",
    "@nguniversal/express-engine": "^9.1.1",
    "@ngxs/storage-plugin": "^3.6.2",
    "@ngxs/store": "^3.6.2",
    "@nrwl/angular": "11.1.5",
    "apollo-angular": "^1.9.1",
    "apollo-angular-link-http": "^1.10.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-server-express": "^2.13.1",
    "aws-sdk": "^2.713.0",
    "axios": "^0.19.2",
    "body-scroll-lock": "^3.1.5",
    "class-transformer": "^0.2.3",
    "class-validator": "^0.12.2",
    "commander": "^5.1.0",
    "compression": "^1.1.2",
    "config": "^1.31.0",
    "cookie-parser": "^1.4.5",
    "csurf": "^1.11.0",
    "date-fns": "^2.15.0",
    "express": "^4.15.2",
    "file-saver": "^2.0.5",
    "fingerprintjs2": "^2.1.2",
    "fix-utf8": "^1.1.1",
    "full-icu": "^1.3.1",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.0.0",
    "graphql-type-json": "^0.3.2",
    "gridlex": "^2.7.1",
    "helmet": "^4.1.0",
    "html-entities": "^1.1.2",
    "i18n-iso-countries": "^6.0.0",
    "immer": "^6.0.1",
    "intl": "^1.2.5",
    "lodash-es": "^4.17.15",
    "memo-decorator": "^2.0.1",
    "messageformat": "^2.3.0",
    "moment": "^2.27.0",
    "ng-click-outside": "^7.0.0",
    "ng-dynamic-component": "^6.1.0",
    "ng-lazyload-image": "^7.1.0",
    "node-cache": "^5.1.0",
    "node-html-parser": "^1.3.1",
    "normalize.css": "^8.0.1",
    "pdf-lib": "^1.12.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "6.5.5",
    "sitemap": "^6.3.2",
    "slug": "^0.9.4",
    "tslib": "^2.1.0",
    "uuid": "^8.3.0",
    "widont": "^0.3.3",
    "xlsx": "^0.16.3",
    "xmlbuilder2": "^2.4.0",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1100.7",
    "@angular/cli": "11.0.7",
    "@angular/compiler-cli": "11.1.0",
    "@angular/language-service": "11.1.0",
    "@babel/core": "7.8.3",
    "@nestjs/schematics": "7.2.6",
    "@nestjs/testing": "7.6.5",
    "@nguniversal/builders": "^9.1.1",
    "@ngxs/devtools-plugin": "^3.6.2",
    "@ngxs/logger-plugin": "^3.6.2",
    "@nrwl/cli": "11.1.5",
    "@nrwl/cypress": "11.1.5",
    "@nrwl/jest": "11.1.5",
    "@nrwl/nest": "11.1.5",
    "@nrwl/node": "11.1.5",
    "@nrwl/storybook": "11.1.5",
    "@nrwl/tao": "11.1.5",
    "@nrwl/workspace": "11.1.5",
    "@storybook/addon-a11y": "^6.1.14",
    "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-backgrounds": "^6.1.14",
    "@storybook/addon-jest": "^6.1.14",
    "@storybook/addon-knobs": "6.1.14",
    "@storybook/addon-viewport": "^6.1.14",
    "@storybook/angular": "6.1.14",
    "@storybook/react": "6.1.14",
    "@types/express": "^4.17.0",
    "@types/html-entities": "^1.2.16",
    "@types/jest": "26.0.8",
    "@types/lodash-es": "^4.17.3",
    "@types/node": "12.12.38",
    "babel-jest-amcharts": "0.0.2",
    "babel-loader": "8.0.6",
    "codelyzer": "6.0.1",
    "copy-webpack-plugin": "^5.1.1",
    "core-js": "^3.8.3",
    "cross-env": "^7.0.3",
    "css-loader": "^3.4.2",
    "currency-symbol-map": "^4.0.4",
    "cypress": "^4.9.0",
    "cypress-cucumber-preprocessor": "^2.3.0",
    "diacritics": "^1.3.0",
    "eslint": "7.10.0",
    "eslint-plugin-cypress": "^2.10.3",
    "husky": "^4.3.7",
    "include-media": "^1.4.9",
    "intersection-observer": "^0.4.2",
    "is-relative": "^0.1.3",
    "jest": "26.2.2",
    "jest-junit": "^10.0.0",
    "jest-preset-angular": "8.3.1",
    "jira-prepare-commit-msg": "^1.4.3",
    "js-htmlencode": "^0.3.0",
    "lodash": "^4.17.13",
    "mocha": "^5.2.0",
    "mochawesome": "^4.1.0",
    "mochawesome-merge": "^4.0.3",
    "mochawesome-report-generator": "^4.0.1",
    "ng-mocks": "^11.1.1",
    "ng-packagr": "^10.1.2",
    "node-fetch": "^2.1.2",
    "npm-run-all": "^4.1.2",
    "prettier": "2.2.1",
    "prompts": "^2.3.2",
    "proxy-agent": "^3.1.1",
    "sass-loader": "^8.0.2",
    "storybook-addon-paddings": "^4.0.0",
    "style-loader": "^1.1.3",
    "ts-jest": "26.4.0",
    "ts-node": "9.1.1",
    "tslint": "6.1.3",
    "typescript": "4.0.5",
    "vg-cps-builders": "0.0.18",
    "webpack-bundle-analyzer": "^3.8.0",
    "webpack-filter-warnings-plugin": "^1.2.1"
  },```
@ChazUK ChazUK changed the title fn.bind is not a function Error after updating fn.bind is not a function Error after updating v5.1 to v6.1 (Angular) Jan 22, 2021
@ChazUK
Copy link
Author

ChazUK commented Jan 22, 2021

I can also confirm I'm having the same issue when trying to run Storybook from a fresh plain Angular App

npm install -g @angular/cli
ng new my-app
cd my-app
ng g component card
npx sb init

Then running npm run storybook would result in no output to the terminal. So instead ran npx start-storybook -p 6006 which still had lots of errors in the console. I removed all the addons and cleared preview.js ran npm i -D @storybook/angular@6.2.0-alpha.18 which I saw you posted in another issue to fix an Angular 11 issue. Back to npx start-storybook -p 6006 and Storybook ran with the following error in the console.

Unhandled Promise rejection: fn.bind is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: fn.bind is not a function
    at newTrustedFunctionForJIT (compiler.umd.js:7539)
    at JitEvaluator.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitEvaluator.evaluateCode (compiler.umd.js:7597)
    at JitEvaluator.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitEvaluator.evaluateStatements (compiler.umd.js:7571)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._interpretOrJit (compiler.umd.js:30652)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileTemplate (compiler.umd.js:30622)
    at compiler.umd.js:30563
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileComponents (compiler.umd.js:30563)
    at compiler.umd.js:30473
    at Object.then (compiler.umd.js:3047) TypeError: fn.bind is not a function
    at newTrustedFunctionForJIT (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:13361:19)
    at JitEvaluator.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitEvaluator.evaluateCode (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:13419:56)
    at JitEvaluator.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitEvaluator.evaluateStatements (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:13393:25)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._interpretOrJit (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:36474:43)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileTemplate (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:36444:35)
    at http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:36385:66
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/bundles/compiler.umd.js.JitCompiler._compileComponents (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:36385:23)
    at http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:36295:23
    at Object.then (http://localhost:6006/vendors~main.8e555521f88e1dfdda69.bundle.js:8869:56)

@ChazUK ChazUK closed this as completed Jan 22, 2021
@ChazUK ChazUK reopened this Jan 25, 2021
@ChazUK ChazUK closed this as completed Jan 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ChazUK