fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.07k stars 3.51k forks source link

Uncaught TypeError: Cannot create property 'textBaseline' #4832

Closed danieldocki closed 6 years ago

danieldocki commented 6 years ago

Version

2.2.1

Error

 Uncaught TypeError: Cannot create property 'textBaseline' on string 'Hello Baby...'
    at o._setTextStyles (app-836e59e81b709fc1454f.js:1)
    at o._render (app-836e59e81b709fc1454f.js:1)
    at o.s (app-836e59e81b709fc1454f.js:1)
    at o._render (app-836e59e81b709fc1454f.js:1)
    at o.t.function.t.(anonymous function).indexOf.t.(anonymous function) [as initialize] (app-836e59e81b709fc1454f.js:1:812823)
    at new o (app-836e59e81b709fc1454f.js:1)
    at s.addTextBox (app-836e59e81b709fc1454f.js:1)
    at n (app-836e59e81b709fc1454f.js:1)
    at e (app-836e59e81b709fc1454f.js:1)
    at HTMLAnchorElement.Ai.e._withTask.a._withTask (app-836e59e81b709fc1454f.js:1)

Actual Behavior

import { fabric } from 'fabric'

const textbox = new fabric.Textbox("Hello Baby...", {
  left: 50,
  top: 50,
  width: 200,
  fontSize: 20,
  textAlign: 'center',
})

textbox.setControlsVisibility({
  mb: false,
  mt: false,
})

canvas.sketch.add(textbox)

this code in production is not working, but in development is working, can anyone help me?

package.json

{
  "name": "hello-baby",
  "private": true,
  "engines": {
    "node": "9.5.0",
    "npm": "5.6.0",
    "yarn": "1.5.1"
  },
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "autoprefixer": "^7.1.2",
    "axios": "^0.17.0",
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-preset-env": "^1.4.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "chart.js": "^2.6.0",
    "coffee-loader": "^0.9.0",
    "coffee-script": "^1.12.5",
    "coffeescript": "2.1.0",
    "compression-webpack-plugin": "^1.0.0",
    "cpf_cnpj": "^0.2.0",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "fabric": "^2.2.1",
    "file-loader": "^1.1.5",
    "flatpickr": "^4.0.7",
    "glob": "^7.1.1",
    "js-yaml": "^3.8.3",
    "jspdf": "^1.3.5",
    "liquidjs": "^3.1.1",
    "localforage": "^1.5.3",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "numeral": "^2.0.6",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.5",
    "precss": "^2.0.0",
    "print-any-html": "^0.1.0",
    "rails-erb-loader": "^5.0.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.19.0",
    "stylelint": "^8.0.0",
    "stylelint-rscss": "^0.4.0",
    "uglifyjs-webpack-plugin": "^1.0.0-rc.0",
    "url-loader": "^0.6.2",
    "uuid": "^3.1.0",
    "vue": "^2.5.13",
    "vue-chartjs": "^3.0.1",
    "vue-clipboard2": "^0.0.8",
    "vue-flatpickr-component": "^6.0.0",
    "vue-lazyload": "^1.1.4",
    "vue-loader": "^13.6.1",
    "vue-quill-editor": "^3.0.4",
    "vue-scrollto": "^2.7.9",
    "vue-social-sharing": "^2.2.10",
    "vue-template-compiler": "^2.5.13",
    "vue-the-mask": "^0.11.1",
    "vue-turbolinks": "^2.0.0",
    "vuelidate": "^0.6.1",
    "vuex": "^3.0.1",
    "webpack": "^3.5.5",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.7"
  }
}
danieldocki commented 6 years ago

sorry, as I use heroku I had to give update in cedar to work.

songjingwei commented 1 month ago

same