运行parcel watch命令遇StaticBlock节点类型错误，求解决方案

问题重现 #

执行命令：

parcel watch ./public/js/index.js --out-dir ./public/js --out-file bundle.js

触发报错：

Error while parcel watch: You gave us a visitor for the node type StaticBlock but it's not a valid type

已尝试：Stack Overflow相关方案、删除node_modules重新安装，均无效。

核心原因 #

这个错误基本是Babel插件/预设版本不兼容导致的：

• StaticBlock是ES2022引入的类静态代码块语法，旧版Parcel或其集成的Babel版本无法识别该节点类型；
• 手动引入的@babel/polyfill已被废弃，和Parcel自带的polyfill处理逻辑冲突；
• 项目中自定义安装的Babel插件与Parcel内置的Babel配置产生冲突。

可行解决方案 #

1. 升级Parcel到最新稳定版

旧版Parcel对新ES语法的支持存在缺陷，直接升级：

npm install parcel@latest --save-dev
# yarn用户执行：yarn add parcel@latest --dev

2. 替换废弃的@babel/polyfill

@babel/polyfill已被官方废弃，改用core-js和regenerator-runtime：

• 修改index.js开头的引入：

// 移除这行：import '@babel/polyfill';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

import { displayMap } from './mapbox';
import { login } from './login';
// ... 其余代码不变

• 安装依赖：

npm install core-js regenerator-runtime --save

3. 彻底清理缓存并重装依赖

只删node_modules不够，还要清理Parcel和包管理器缓存：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 清理npm缓存
npm cache clean --force
# 重新安装依赖
npm install
# 清理Parcel缓存
rm -rf .parcel-cache

4. 排查自定义Babel插件冲突

检查package.json中是否手动安装了@babel/plugin-*类的插件，这类插件可能和Parcel内置的Babel配置冲突。暂时移除这些插件，重新执行打包命令测试。

附用户提供的原始代码 #

index.js

import '@babel/polyfill';
import { displayMap } from './mapbox';
import { login } from './login';

// DOM ELEMENTS
const mapbox = document.getElementById('map');
const loginForm = document.querySelector('.form');

// DELEGATION
if (mapbox) {
  const locations = JSON.parse(mapbox.dataset.locations);
  displayMap(locations);
}

if (loginForm) {
  document.querySelector('.form').addEventListener('submit', (e) => {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    login(email, password);
  });
}

login.js

import axios from 'axios';

export const login = async (email, password) => {
  console.log(email, password);
  try {
    const res = await axios({
      method: 'POST',
      url: 'http://127.0.0.1:3000/api/v1/users/login',
      data: {
        email,
        password,
      },
    });

    if (res.data.status === 'success') {
      alert('Logged in successfully!');
      window.setTimeout(() => {
        location.assign('/');
      }, 1500);
    }

    console.log(res);
  } catch (err) {
    alert(err.response.data.message);
  }
};

内容的提问来源于stack exchange，提问作者heisenburgerler