我正在做一个udemy课程，'Node.js，Express，MongoDB & More'。在课程中，讲师使用了parcel v1，但此后parcel创建了v2，我无法安装v1。我试图从parcel创建的dist文件中调用该文件，在我的例子中是./public/js/bundle，我一直得到两个错误：
Refused to connect to 'ws://127.0.0.1:1234/' because it violates the following Content Security Policy directive: "default-src 'self' https://\*.mapbox.com". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Uncaught Error: Cannot find module 'axios'
下面是我代码：
base.pug:

doctype html
html 
    head
        block head 
            meta(charset="UTF-8")
            meta(name="viewport" content="width=device-width, initial-scale=1.0")
            title Natours | #{title}
            link(rel="stylesheet", href="/css/style.css")
            link(rel="shortcut icon" type="image/png" href="/img/favicon.png")
            link(href="https://fonts.googleapis.com/css?family=Lato:300,300i,700" rel="stylesheet")

    body 
        // HEADER
        include header
        
        // CONTENT
        block content
            h1 This is a placeholder heading

        // FOOTER
        include footer

    block scripts 
        script(type="module" src="/js/bundle/index.js")

index.js:

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

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

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

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

console.log('Hello from parcel');

login.js:

import axios from 'axios';
import { showAlert } from './alert.js';

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') {
      showAlert('Logged in successfully');
      window.setTimeout(() => {
        location.assign('/');
      }, 1500);
    }
  } catch (err) {
    showAlert(`Error: ${err.response.data.message}`);
  }
};

mapbox.js:

export const displayMap = (locations) => {
  mapboxgl.accessToken = 'MY_TOKEN';

  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/j-cet101/cll7vlp6l00oa01pd3pmu5r8r',
    scrollZoom: false,
  });

  map.addControl(new mapboxgl.NavigationControl());

  const bounds = new mapboxgl.LngLatBounds();

  locations.forEach((loc) => {
    // Create marker
    const el = document.createElement('div');
    el.className = 'marker';

    // Add marker
    new mapboxgl.Marker({
      element: el,
      anchor: 'bottom',
    })
      .setLngLat(loc.coordinates)
      .addTo(map);

    // Add popup
    new mapboxgl.Popup({
      offset: 30,
    })
      .setLngLat(loc.coordinates)
      .setHTML(`<p>Day ${loc.day}: ${loc.description}</p>`)
      .addTo(map),
      // Extend map bounds to include current location
      bounds.extend(loc.coordinates);
  });

  map.fitBounds(bounds, {
    padding: {
      top: 200,
      bottom: 150,
      left: 200,
      right: 200,
    },
  });
};

package.json命令：

"watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js/bundle",
"build:js": "parcel build ./public/js/index.js --dist-dir ./public/js/bundle"

我真的不知道为什么我得到这个错误，或者如果我错过了一些模块，或者如果有其他东西已经添加到包裹v2，这是必要的，我不知道，所以我会很感激，如果有人可以帮助这一个：）
注意：我已经安装了所有必需的软件包