[plugin-webpack] Not compatible with [app-template-vue]

[fralonra]

Hi all, I created a demo project using app-template-vue, and added a plugin @snowpack/plugin-webpack. But when I ran snowpack build, there was errors and failed the bundle.

The following are what I has done in detail:

1. Create the project:

   npx create-snowpack-app project --use-yarn --template @snowpack/app-template-vue

2. Add plugin @snowpack/plugin-webpack, and edit the snowpack.config.json:

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

3. Run yarn build, and output the errors below:

Errors, click to expand

``` ▼ Console [error] ./_dist_/App.js 33:23-35 "export 'createBlock' (imported as '_createBlock') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 24:70-86 "export 'createTextVNode' (imported as '_createTextVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 24:167-183 "export 'createTextVNode' (imported as '_createTextVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 18:32-44 "export 'createVNode' (imported as '_createVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 24:32-44 "export 'createVNode' (imported as '_createVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 24:111-123 "export 'createVNode' (imported as '_createVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 33:56-68 "export 'createVNode' (imported as '_createVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 33:116-128 "export 'createVNode' (imported as '_createVNode') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 33:9-19 "export 'openBlock' (imported as '_openBlock') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js ----- ./_dist_/App.js 33:146-162 "export 'toDisplayString' (imported as '_toDisplayString') was not found in '/web_modules/vue.js' at HarmonyImportSpecifierDependency._getErrors (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11) at HarmonyImportSpecifierDependency.getWarnings (/Users/user/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:60:15) at Compilation.reportDependencyErrorsAndWarnings (/Users/user/project/node_modules/webpack/lib/Compilation.js:1454:24) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1258:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) at AsyncSeriesHook.lazyCompileHook (/Users/user/project/node_modules/tapable/lib/Hook.js:154:20) at Compilation.finish (/Users/user/project/node_modules/webpack/lib/Compilation.js:1253:28) at /Users/user/project/node_modules/webpack/lib/Compiler.js:672:17 at eval (eval at create (/Users/user/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at /Users/user/project/node_modules/webpack/lib/Compilation.js:1185:12 at /Users/user/project/node_modules/webpack/lib/Compilation.js:1097:9 at processTicksAndRejections (internal/process/task_queues.js:79:11) @ ./_dist_/index.js [error] ./_dist_/App.js Module not found: Error: Can't resolve './App.css.js' in '/Users/user/project/.build/_dist_' resolve './App.css.js' in '/Users/user/project/.build/_dist_' using description file: /Users/user/project/package.json (relative path: ./.build/_dist_) Field 'browser' doesn't contain a valid alias configuration using description file: /Users/user/project/package.json (relative path: ./.build/_dist_/App.css.js) no extension Field 'browser' doesn't contain a valid alias configuration /Users/user/project/.build/_dist_/App.css.js doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration /Users/user/project/.build/_dist_/App.css.js.wasm doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration /Users/user/project/.build/_dist_/App.css.js.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/user/project/.build/_dist_/App.css.js.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/user/project/.build/_dist_/App.css.js.json doesn't exist as directory /Users/user/project/.build/_dist_/App.css.js doesn't exist [/Users/user/project/.build/_dist_/App.css.js] [/Users/user/project/.build/_dist_/App.css.js.wasm] [/Users/user/project/.build/_dist_/App.css.js.mjs] [/Users/user/project/.build/_dist_/App.css.js.js] [/Users/user/project/.build/_dist_/App.css.js.json] @ ./_dist_/App.js 1:0-22 @ ./_dist_/index.js ```

Here are my environment:

OS: macOS v10.12.1 Sierra
node: v12.17.0
npm: v6.14.4
@snowpack/app-scripts-vue: v1.1.4
@snowpack/plugin-vue: v1.1.0
@snowpack/plugin-webpack: v1.3.0

Is there a bug or am I doing something wrong? Thanks for reply!

[FredKSchott]

Thanks for the info! We were working on this class of issue all last week, and released a new version on Friday that should have fixed this. Please update your deps and try again, and let us know if you're still seeing issues.