vue,undefined "parse" when I want to use "acorn" and its parse to make AST

Question

My English is not good,sorry...
the code is formed by AI(I almost know nothing about vue)
I'm not sure whether I downloaded the "acorn" successfully
I use pnpm install acorn to download
I'm stuck in the problems for days
Each piece of code formed by AI will not run successfully

the codemirror box is correctly formed while when I type code in the box,the page will throw errors and "acorn""esprima""espree" cannot work

<template>
  <div class="ast-explorer">
    <div class="editor-pane">
      <textarea ref="codeEditor"></textarea>
    </div>
    <div class="ast-pane">
      <pre>{{ astTree }}</pre>
    </div>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import acorn from 'acorn'

export default {
  data() {
    return {
      astTree: null
    }
  },
  mounted() {
    this.initializeCodeMirror()
  },
  methods: {
    initializeCodeMirror() {
      this.codeEditor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
        mode: 'javascript',
        lineNumbers: true
      })
      this.codeEditor.on('change', this.updateAST)
    },
    updateAST() {
      const code = this.codeEditor.getValue()
      this.astTree = JSON.stringify(acorn.parse(code), null, 2)
    }
  }
}
</script>

<style>
.ast-explorer {
  display: flex;
  height: 100vh;
}

.editor-pane {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.ast-pane {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

there is error information

Uncaught runtime errors:
ERROR
Cannot read properties of undefined (reading 'parse')
TypeError: Cannot read properties of undefined (reading 'parse')
    at Proxy.updateAST (webpack-internal:///./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js:32:83)
    at eval (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:2679:23)
    at fireCallbacksForOps (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:2629:22)
    at finishOperation (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:2647:7)
    at endOperation (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:4874:7)
    at runInOp (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:5045:7)
    at TextareaInput.poll (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:12280:5)
    at HTMLTextAreaElement.eval (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/codemirror/lib/codemirror.js:12023:13)

I doubt whether my pnpm has some problems Thanks everyone help my problems