Description
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
Metadata
Metadata
Assignees
Labels
No labels