[BUG] [3.2.2] Vue w/ External Server w/ Build + Watch Fails

seangwright commented 3 years ago

Bug Report Quick Checklist

[x] I am on the latest version of Snowpack & all plugins.
- snowpack - 3.2.2 (or 3.3.5)
- @snowpack/plugin-vue - 2.3.0
[x] I use package manager npm (Fill in: npm, yarn, pnpm, etc).
[x] I run Snowpack on OS Windows (Fill in: Windows, Mac, Linux, etc).
[x] I run Snowpack on Node.js v12+

Describe the bug

Update: rolling back to "snowpack": "3.0.13" resolves this issue and populates _snowpack\pkg\vue.js with something that lets my app run.

This is the only way I've found to resolve this issue. Using more recent versions, like "snowpack": "3.3.5" still fail to run.

I use Snowpack with an external server (.NET). My setup worked fine with Snowpack 2.x, but broke when upgrading to 3.x.

I am using @snowpack/plugin-vue and Vue 3.0.10.

I have the Snowpack config setup to turn on watch mode when not doing a 'production' build.

When I run snowpack build, watch mode is correctly enabled, but the files created in the buildOptions.out directory are missing core Vue modules.

My directory structure in my external server:

wwwroot/
├─ _dist_/
├─ _snowpack/
│  ├─ pkg/
│  │  ├─ vue-router.v4.0.5.js
│  │  ├─ vue.v3.0.10.js
│  ├─ env.js

The contents of vue-router.v4.0.5.js look correct, however the contents of vue.v3.0.10.js reference files that just don't exist:

import { warn, initCustomFormatter } from '/_snowpack/pkg/@vue.runtime-dom.v3.0.10.js';
export * from '/_snowpack/pkg/@vue.runtime-dom.v3.0.10.js';

function initDev() {
    {
        initCustomFormatter();
    }
}

// ... more stuff

/_snowpack/pkg/@vue.runtime-dom.v3.0.10.js is nowhere to be found in wwwroot/_snowpack/pkg/.

To Reproduce

We can't fix bugs that we can't see for ourselves. Issues often need to be closed if this section is skipped.

npm init snowpack-app --template @snowpack/app-template-vue

Set snowpack.config.js

const NODE_ENV = process.env.NODE_ENV;

const isProduction = NODE_ENV === 'production';

const devPlugins = ['@snowpack/plugin-vue', '@snowpack/plugin-dotenv'];

const plugins = isProduction
  ? [...devPlugins, '@snowpack/plugin-optimize']
  : devPlugins;

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/_dist_' },
  },
  plugins,
  buildOptions: {
    clean: true,
    out: '../my-server-app/wwwroot',
    watch: !isProduction,
  },
  packageOptions: {
    source: 'local',
    stats: true,
  },
};

Run cross-env NODE_ENV=development snowpack build

Expected behavior

The required vendor modules (for Vue) are in the path that Snowpack is expecting them in my buildOptions.out directory.

Anything else?

When I do a non-watch build, everything works correctly and the contents of wwwroot/_snowpack resolve correctly, but the benefits of Snowpack completely vanish if I have to run a build manually every time I make a code change.

Related to #2931

grommett commented 3 years ago

Having this exact same issue. Tried several different config settings to no avail.

seangwright commented 3 years ago

Looks like this is related to #2931 as well

seangwright commented 3 years ago

I assume this is still an issue 🤷‍♂️, but I switched to the Vue CLI since I felt like I was blocked on upgrading Snowpack indefinitely.

notken12 commented 2 years ago

Still having this same issue. The modules can be found when I use the Snowpack dev server but they aren't added to the build folder when I use snowpack build --watch.

seangwright commented 2 years ago

I think the focus around this project has switched to Astro. I'm still using the Vue CLI (5 beta even!) and getting work done...

FredKSchott / snowpack