Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Preload plugin is marking css preload as "script" instead of "style" when using special public path #5672

Closed
Tofandel opened this issue Jul 11, 2020 · 0 comments · Fixed by vuejs/preload-webpack-plugin#11
Closed

Preload plugin is marking css preload as "script" instead of "style" when using special public path #5672

Tofandel opened this issue Jul 11, 2020 · 0 comments · Fixed by vuejs/preload-webpack-plugin#11

Comments

@Tofandel
Copy link

Tofandel commented Jul 11, 2020 •
edited
Loading

Version

4.4.6

Reproduction link

https://github.com/Tofandel/preload-bug

Environment info

Environment Info:

  System:
    OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
    CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
  Binaries:
    Node: 13.13.0 - /usr/local/bin/node
    Yarn: 1.21.0 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 78.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-eslint: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-router:  4.4.6 
    @vue/cli-plugin-vuex:  4.4.6 
    @vue/cli-service: ~4.4.0 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.1.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

Create a vue cli project, change the public path to <?php echo $publicPath ?> build for production, check the output of the index.html

What is expected?

The css files to be preloaded as a style

What is actually happening?

The css files are preloaded as script

<!DOCTYPE html>
<html lang=en>
<head>
    <link href="<?php echo $publicPath ?>/css/app.fb0c6e1c.css" rel=preload as=script>
    <link href="<?php echo $publicPath ?>/js/app.691ca841.js" rel=preload as=script>
    <link href="<?php echo $publicPath ?>/js/chunk-vendors.b0f460c7.js" rel=preload as=script>
    <link href="<?php echo $publicPath ?>/css/app.fb0c6e1c.css" rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but preload-bug doesn't work properly without JavaScript enabled. Please enable it to
    continue.</strong></noscript>
<div id=app></div>
<script src="<?php echo $publicPath ?>/js/chunk-vendors.b0f460c7.js"></script>
<script src="<?php echo $publicPath ?>/js/app.691ca841.js"></script>
</body>
</html>

Resulting in this warning:

The resource xxx.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Additional info

The bug happens only when there is a '?' present in the public path probably because it thinks what's following is a query string, but it should probably only use the base name and not parse all the file name
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@Tofandel