v0.28.8 regression: Relative urls in @font-face throw exception TypeError: url.replace is not a function
#659
Comments
|
I have a related error, and reverting to 0.28.7 also fixes the problem. @kgram, perhaps you have some ideas how to fix this? |
|
Yup, seeing exactly this when upgrading v0.28.7 to v0.28.8. |
|
ERROR in ./node_modules/file-loader/dist/cjs.js?{"outputPath":"css/"}!./n "bootstrap": "3.3.2" is used |
|
@DawnWright, could you expand on this part:
If that is the case, I made the escape-functionality in complete ignorance of it. What happens in 0.28.7? Wouldn't it just output @kenashcraft, @jeysty: I believe you are seeing a different issue, although I don't get how it could occur. It seems like something goes wrong when requiring the escape-function. Could you have somehow effected Would one of you mind trying to insert this log statement and posting the result? It should replace line 91 in the file
For me it logs something like |
|
For me, this is caused by an incompatibility with extract-loader and they just released a new patch version: peerigon/extract-loader#27 |
|
after uptade to 0.28.8 Rollback to version 0.28.7. Everything is working. |
|
@DawnWright, @franklin-ross, @gewisser: could any of you expand on what exactly in your build process results in this error? If @DawnWright is correct that the url is an empty object, a check could easily be added. I'd just like to understand why you'd ever need this functionality and how exactly it works first. Which loaders produce objects for what kind of files? Is it a special build-step? I couldn't reproduce with the gepetto-repo mentioned above, but it seems the CI only fails when starting testing in phantomjs, so maybe I'm just missing info about how this loader is used with others in more complicated builds. |
|
@kenashcraft, @jeysty: can you confirm that you are using extract-loader and does an upgrade to [email protected] fix your problem with [email protected] as @ngyikp suggests? |
|
package.json: {
"name": "test_main",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "gewisser <[email protected]>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --watch",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"ace-code-editor": "^1.2.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.1",
"brace": "^0.11.0",
"compression-webpack-plugin": "^1.1.3",
"copy-webpack-plugin": "^4.3.1",
"cross-env": "^5.1.3",
"css-loader": "0.28.7",
"deep-rename-keys": "^0.2.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.2.1",
"materialize-css": "^0.100.2",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"null-loader": "^0.1.1",
"portal-vue": "^1.2.2",
"pug": "^2.0.0-rc.4",
"pug-loader": "^2.3.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"vue": "^2.5.13",
"vue-loader": "^13.7.0",
"vue-resource": "^1.3.5",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1",
"webpack": "^3.10.0"
},
"need": {
"materializecss-vuejs-component": "*"
},
"devDependencies": {
"webpack-runtime-analyzer": "^1.5.0"
}
}webpack.config.js: const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const RuntimeAnalyzerPlugin = require('webpack-runtime-analyzer');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
build: './main.js',
framegantt: './gantt/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
//publicPath: '/dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader' // <- это внутренняя часть vue-loader, поэтому нет необходимости его устанавливать через NPM
})
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
plugins: ["syntax-dynamic-import"]
}
},
{
test: /\.pug$/,
loader: "pug-loader",
options: {
pretty: true
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'null-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src/'),
'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js'),
'utils': path.resolve(__dirname, 'src/utils.js')
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
// new RuntimeAnalyzerPlugin({
// // Can be `standalone` or `publisher`.
// // In `standalone` mode analyzer will start rempl server in exclusive publisher mode.
// // In `publisher` mode you should start rempl on your own.
// mode: 'standalone',
// // Port that will be used in `standalone` mode to start rempl server.
// // When set to `0` a random port will be chosen.
// port: 0,
// // Automatically open analyzer in the default browser. Works for `standalone` mode only.
// open: true,
// // Use analyzer only when Webpack run in a watch mode. Set it to `false` to use plugin
// // in any Webpack mode. Take into account that a building process will not be terminated
// // when done since the plugin holds a connection to the rempl server. The only way
// // to terminate building process is using `ctrl+c` like in a watch mode.
// watchModeOnly: false
// }),
new ExtractTextPlugin("[name].style.css"),
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['index'],
template: 'index.pug'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
'utils': 'utils'
}),
new CopyWebpackPlugin([
{from: 'include', to: 'include'},
{from: 'config.php'},
{from: 'db_config.php'},
{from: 'index.php'},
{from: '.htaccess'},
{from: 'gantt/iframeGantt.html'},
{from: 'aceeditor/ace', to: 'ace'},
{from: 'aceeditor/aceeditor.html'},
{from: 'vendor', to: 'vendor'}
], {
copyUnmodified: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/)
]
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
//module.exports.output.path = path.resolve(__dirname, './prod');
module.exports.module.rules[2].options.pretty = false;
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})/*,
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(css|js)$/,
threshold: 10240,
minRatio: 0.8
})*/
]);
}materialize.css: |
|
@gewisser: Perfect, everything's becoming clear after playing around with that for a bit. The You are effectively getting that with 0.28.7, although you should be aware that this is only because the url is transformed into It's possible the invalid property is the best solution, since there is no good way to avoid a request without removing I'll look into making a pull-request. |
|
I'm no longer seeing this, but I don't remember the exact set of package updates that got me in trouble in the first place. I've tried just updating all my Webpack loaders and whatnot to their latest and it seems fine. There's no extract-loader in my project at all though, so that's unrelated for me. |
|
Released in v0.28.9 🎉 Please try it out and report back if still regressions :) |
|
v0.28.9 now works with null-loader. There are no errors. @font-face {
font-family: "Roboto";
src: local(Roboto Regular), url([object Object]) format("woff2"), url([object Object]) format("woff");
font-weight: 400;
}Thanks to this problem, I now know where it comes from: url([object Object]) |
This bug was introduced in v0.28.8, and does not occur in v0.28.7 - it was introduced last week by #627
Repro:
Use a relative url inside a css
@font-face, e.g.RESULT:
css-loaderthrows exceptionTypeError: url.replace is not a function:Note, the URL is indeed a valid path, and I've confirmed that I get the appropriate
ModuleNotFoundErrorwith invalid relative paths. This bug only occurs when the relative path points to a valid file location.Also note, the bug does not occur with an absolute path to the same file. Unfortunately, using absolute path is not a feasible workaround since the css in question is an external file we have no control over.
My understanding is that a relative url tells the css-loader to ignore the url.
resolvetherefore returns{}as the URL, which is passed to the newescapefunction and thus throws an exception callingreplace:We have reverted to v0.28.7 temporarily to avoid this bug.
The text was updated successfully, but these errors were encountered: