search

unplugin / unplugin-vue-ce

🍒 A vue plugin that extends vue's Custom Element capabilities
MIT License
75 stars 3 forks source link

Webpack build fails #65

Closed ThornWalli closed 1 year ago

ThornWalli commented 1 year ago

Hello @baiwusanyu-c ,

Thanks for this nice plugin 😊

Got it running in Vite 🎉

Unfortunately I run into problems with webpack....

An error pops up on WebpackBuild wonder where the problem is 🙃

image

The error only fails when I add webpackVueCESubStyle. I can build without, but without nested styling in the CustomElement.

Use webpack@5 with these plugins:

Built-in Vue-Rule (Here customElement must be set ):

{
    test: /\.vue$/i,
    use: [
      {
        loader: 'vue-loader',
        options: {
          customElement: true
        }
      }
    ]
  }
baiwusanyu-c commented 1 year ago

Sorry, haven't used webpack for a long time, can you provide a minimal repo to reproduce?

baiwusanyu-c commented 1 year ago

I did find some problems when I ran it in vue-cli, but the error I got was different from yours. I'm not sure what the reason is, but I still made some changes based on my error. I don't know if it will solve yours problem

ThornWalli commented 1 year ago

@baiwusanyu-c Have prepared a repo. there you can repoduce it.

Gives an error with the plugin html-webpack-plugin.

https://github.com/ThornWalli/webpack-sub-style-test

assets by status 65.6 KiB [cached] 2 assets
orphan modules 337 KiB [orphan] 15 modules
runtime modules 221 bytes 1 module
cacheable modules 335 KiB
  ./src/entry.js + 12 modules 335 KiB [built] [code generated]
  ./node_modules/vue-loader/dist/exportHelper.js 328 bytes [built] [code generated]

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/unplugin/dist/webpack/loaders/transform.js
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/unplugin/dist/webpack/loaders/load.js
   * ./node_modules/unplugin/dist/webpack/loaders/transform.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html>
  |   <head>
  ModuleParseError: Module parse failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/unplugin/dist/webpack/loaders/transform.js
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/unplugin/dist/webpack/loaders/load.js
   * ./node_modules/unplugin/dist/webpack/loaders/transform.js
  You may need an additional loader to handle the result of these loaders.
  > <!DOCTYPE html>
  | <html>
  |   <head>
      at handleParseError (xxx/webpack-sub-style-test/node_modules/webpack/lib/NormalModule.js:982:19)
      at xxx/webpack-sub-style-test/node_modules/webpack/lib/NormalModule.js:1101:5
      at processResult (xxx/webpack-sub-style-test/node_modules/webpack/lib/NormalModule.js:806:11)
      at xxx/webpack-sub-style-test/node_modules/webpack/lib/NormalModule.js:866:5
      at xxx/webpack-sub-style-test/node_modules/loader-runner/lib/LoaderRunner.js:407:3
      at iterateNormalLoaders (xxx/webpack-sub-style-test/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
      at iterateNormalLoaders (xxx/webpack-sub-style-test/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
      at xxx/webpack-sub-style-test/node_modules/loader-runner/lib/LoaderRunner.js:255:3
      at context.callback (xxx/webpack-sub-style-test/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
      at Object.transform (xxx/webpack-sub-style-test/node_modules/unplugin/dist/webpack/loaders/transform.js:101:5)

  - NormalModule.js:982 handleParseError
    [webpack-sub-style-test]/[webpack]/lib/NormalModule.js:982:19

  - NormalModule.js:1101 
    [webpack-sub-style-test]/[webpack]/lib/NormalModule.js:1101:5

  - NormalModule.js:806 processResult
    [webpack-sub-style-test]/[webpack]/lib/NormalModule.js:806:11

  - NormalModule.js:866 
    [webpack-sub-style-test]/[webpack]/lib/NormalModule.js:866:5

  - LoaderRunner.js:407 
    [webpack-sub-style-test]/[loader-runner]/lib/LoaderRunner.js:407:3

  - LoaderRunner.js:233 iterateNormalLoaders
    [webpack-sub-style-test]/[loader-runner]/lib/LoaderRunner.js:233:10

  - LoaderRunner.js:240 iterateNormalLoaders
    [webpack-sub-style-test]/[loader-runner]/lib/LoaderRunner.js:240:10

  - LoaderRunner.js:255 
    [webpack-sub-style-test]/[loader-runner]/lib/LoaderRunner.js:255:3

  - LoaderRunner.js:124 context.callback
    [webpack-sub-style-test]/[loader-runner]/lib/LoaderRunner.js:124:13

  - transform.js:101 Object.transform
    [webpack-sub-style-test]/[unplugin]/dist/webpack/loaders/transform.js:101:5

  - child-compiler.js:169 
    [webpack-sub-style-test]/[html-webpack-plugin]/lib/child-compiler.js:169:18

  - Compiler.js:551 finalCallback
    [webpack-sub-style-test]/[webpack]/lib/Compiler.js:551:5

  - Compiler.js:577 
    [webpack-sub-style-test]/[webpack]/lib/Compiler.js:577:11

  - Compiler.js:1200 
    [webpack-sub-style-test]/[webpack]/lib/Compiler.js:1200:17

  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [webpack-sub-style-test]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:1196 
    [webpack-sub-style-test]/[webpack]/lib/Compiler.js:1196:33

  - Compilation.js:2795 finalCallback
    [webpack-sub-style-test]/[webpack]/lib/Compilation.js:2795:11

  - Compilation.js:3100 
    [webpack-sub-style-test]/[webpack]/lib/Compilation.js:3100:11

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
client (webpack 5.88.2) compiled with 2 errors in 4766 ms
baiwusanyu-c commented 1 year ago

This bug comes from unplugin. Installing the latest version of unplugin-vue-ce should avoid this bug

ThornWalli commented 1 year ago

Works! Thank you!