While the :line-nums is on it will cause this

[gordenfl]

ERROR Cannot read properties of undefined (reading 'firstChild') TypeError: Cannot read properties of undefined (reading 'firstChild') at Proxy.getLineNum (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/simple-code-editor/CodeEditor.vue?vue&type=script&lang=js:231:52) at Proxy.updated (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/simple-code-editor/CodeEditor.vue?vue&type=script&lang=js:252:14) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6651:18) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6659:17) at hook.weh.hook.weh (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2120:19) at flushPostFlushCbs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6838:41) at flushJobs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6880:5)

[GiusWhite]

I have the same problem when I set wrap to true

Here is the line that cause the error: const singleLineHeight = this.$refs.lineNums.firstChild.offsetHeight;

[cyrilf]

Same issue here..

In the method getLineNum

If the height is not set to auto then:

const singleLineHeight = this.$refs.lineNums.firstChild.offsetHeight;
const heightNum = parseInt(this.textareaHeight / singleLineHeight) - 1;`

will fail and result in NaN. For me, this happen, when my v-model changes.

---

For now, my workaround is to remove my height property and use max-height instead. But by default, the max-height doesn't work either.. I had to add overflowY: auto manually. Luckily there is already a PR #32 to fix this! :raised_hands:

[coofercat]

I also have a problem with :line-nums being on, but with mine, I get an error in the (dev) browser window:

ResizeObserver loop completed with undelivered notifications.
handleError@webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58
createOverlay/<@webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:18
EventListener.handleEvent*listenToRuntimeError@webpack-internal:///./node_modules/webpack-dev-server/client/overlay/runtime-error.js:32:10
createOverlay@webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:311:84
@webpack-internal:///./node_modules/webpack-dev-server/client/index.js?protocol=ws&hostname=localhost&port=5005&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true:195:105
./node_modules/webpack-dev-server/client/index.js?protocol=ws&hostname=localhost&port=5005&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true@http://localhost:5005/admin/js/chunk-vendors.js:1304:1
__webpack_require__@http://localhost:5005/admin/js/app.js:1068:32
@http://localhost:5005/admin/js/app.js:2264:83
__webpack_require__.O@http://localhost:5005/admin/js/app.js:1118:23
@http://localhost:5005/admin/js/app.js:2267:53
@http://localhost:5005/admin/js/app.js:2269:12

My browser console also has an additional warning:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

If I set :line-nums="false" then none of this happens.

I haven't yet done anything else, so no custom CSS or other props being passed (which reminds me that the content is 'undefined' - makes no difference to this problem if I define it or not though)

I'm using Firefox 123.0.1, on a Mac, with the Vue app running in an NPM server in development mode.