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

Question

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

fralonra opened this issue 4 years ago · comments

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:

Create the project:

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

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

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

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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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!

Fred K. Schott · Answer 1 · Wed Jul 01 2020 03:22:01 GMT+0800 (China Standard Time)

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.