[@snowpack/app-template-vue] - Final prod build throwing error 'Uncaught TypeError: (void 0) is not a function'

[MM]

Hi all,

I am still very new to snowpack, so please bear with me if my issue seems trivial.

My setup:
Ubuntu: 20.04
npm: 6.14.5
node: v13.15.0

I created a Vue project using the following command:
npx create-snowpack-app vue --template @snowpack/app-template-vue

My snowpack.config.json looks like this:

{
  "extends": "@snowpack/app-scripts-vue",
  "scripts": {},
  "plugins": ["@snowpack/plugin-webpack"]
}

My package.json looks like this:

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "echo \"Vue 3.0 test support is still in progress.\" && exit 1"
  },
  "dependencies": {
    "vue": "^3.0.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@snowpack/app-scripts-vue": "^1.1.4",
    "@snowpack/plugin-webpack": "^1.2.0",
    "snowpack": "^2.5.0"
  }
}

The project works as expected when I do 'npm run start', however when I do 'npm run build', everything compiles as expected but when I try to run the bundled 'build' folder (cd build && python3 -m http.server), I get the following error:
Uncaught TypeError: (void 0) is not a function

Any clue as to what could be going wrong?

Thank you

[Fred K. Schott]

Does either of these fix it for you?

• npm run build -- --no-bundle Skips the bundler, if the bug is in the bundler
• npm run build -- --no-treeshake Skips treeshaking, if the bug is in our treeshaking algo

[MM]

Doing npm run build -- --no-bundle gives me a new error:
localhost/:1 Uncaught SyntaxError: The requested module '/web_modules/vue.js' does not provide an export named 'openBlock'

However, doing npm run build -- --no-treeshake works like a charm!

I believe I should keep this issue open until the bug in the treeshaking algorithm has been fixed, is that right?

Thanks Fred.

[Fred K. Schott]

Yes that's correct! This is a current issue in our tree-shake algo, hoping to fix it soon!

[jon lepage]

same here

npm run build crash !

[jon lepage]

npm run build -- --no-bundle work
but no npm run build -- --no-treeshake

[Fred K. Schott]

You can also add this line to your snowpack.config:

{
  "install": ["vue"]
}

This tells Snowpack to install the full package, and will whitelist it for tree-shaking. With that, you should be able to run npm run build without flags.

[MM]

Thanks Fred.

One more issue that I noticed is that if I make changes to 'App.vue' such that it throws a script error, the entire hot loading mechanism ceases to work. Try changing the script code to as follows:

<script>
export default {
  data: {
    message: 'Hello Vue!'
  }
};
</script>

The above would generate an error.

Now, let us revert the code to original:

<script>
export default {
  data() {
    return {
      message: "Learn Vue"
    };
  }
};
</script>

Notice: Hot reloading stops working. You need to manually do a refresh (F5).
Is this expected behaviour?

[jon lepage]

well the test was for react !
Trying bundles Parcel but not work !
I just wanted to test, I will stay on my current config.
Until everything is stable or maybe more good doc ! :)

I wanted to update this configuration to test the speed.
https://github.com/djmisterjon/DDBEV/tree/master/config
https://github.com/djmisterjon/DDBEV/blob/master/package.json
It a mix with Parcel,babel,eslint,nwjs,electron,react,prettier.

[Fred K. Schott]

Re: HMR - it would make sense that HMR stops working, but you should still get livereload AKA an automatic full page reload whenever you make a change. That sounds like a bug in the HMR client, if anyone can take a look.