Comments (10)
I'm also seeing this happen, and it definitely wasn't happening before. Using that weird !!ejs-compiled-loader?{}!
prefix syntax fixed it for me, but that's just awful. My loader is pretty basic, and I'm not using this alongside HtmlWebpackPlugin
, just a Webpacker app with Rails.
from ejs-compiled-loader.
I also had this issue, I resolved it by changing my webpack rule from:
rules: [
{
test: /\.ejs$/,
use: 'ejs-compiled-loader'
}]
to:
rules: [
{
test: /\.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}]
It seems ejs-compiled-loader does not like options
being undefined.
from ejs-compiled-loader.
I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
Can you share your ejs webpack config rule?
webpack.config.jsconst path = require('path'); const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin'); const MinCssExtractPlugin = require("mini-css-extract-plugin"); // 将css代码提取为独立文件的插件 const MediaQueryPlugin = require('media-query-plugin'); module.exports = { mode: 'production', entry: [ './src/index.js' ], output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js' }, module: { rules: [{ test: /\.s[ac]ss$/i, use: [ { loader: MinCssExtractPlugin.loader, // 将处理后的CSS代码提取为独立的CSS文件,可以只在生产环境中配置,但我喜欢保持开发环境与生产环境尽量一致 options: { publicPath: '/assets/', // only enable hot in development hmr: true, // if hmr does not work, this is a forceful method. reloadAll: true, }, }, 'css-loader', // CSS加载器,使webpack可以识别css文件 MediaQueryPlugin.loader, 'postcss-loader', // 承载autoprefixer功能,为css添加前缀 'sass-loader', // Compiles Sass to CSS ], }, { test: /\.css$/, use: [{ loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'assets/', publicPath: './assets/' } }, 'extract-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(jpg|png|gif|svg)$/, use: { loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'assets/', publicPath: './assets/' } } }, { test: /\.ejs$/, use: { loader: 'ejs-compiled-loader', options: { htmlmin: true, htmlminOptions: { removeComments: true } } } } ] }, plugins: [new HtmlWebpackPlugin({ template: 'src/index.ejs', inject: true, minify: { collapseWhitespace: true } }), new webpack.HotModuleReplacementPlugin(), new MinCssExtractPlugin(), new MediaQueryPlugin({ include: [ 'style', ], queries: { 'print': 'print', 'not print': 'not-print' } }) ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, overlay: true, port: 4550, open: true, hot: true } };package.json
{ "name": "resume", "version": "1.0.0", "description": "个人简历", "main": "index.js", "repository": "", "author": "", "license": "MIT", "scripts": { "start": "webpack-dev-server --mode=development", "build": "webpack --mode=production" }, "devDependencies": { "@babel/core": "^7.10.2", "@babel/preset-env": "^7.10.2", "autoprefixer": "^9.1.5", "babel-loader": "^8.1.0", "css-loader": "^1.0.0", "cssnano": "^4.1.0", "ejs-compiled-loader": "^3.0.0", "ejs-loader": "^0.5.0", "extract-loader": "^2.0.1", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "media-query-plugin": "^1.3.1", "mini-css-extract-plugin": "^0.9.0", "node-sass": "^4.14.1", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-px2rem-exclude": "0.0.6", "postcss-url": "^8.0.0", "px2rem-loader": "^0.1.9", "raw-loader": "^0.5.1", "sass-loader": "^8.0.2", "style-loader": "^1.2.1", "webpack": "^4.43.0", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.11.0" }, "dependencies": { "fs": "0.0.1-security", "lib-flexible": "^0.3.2" } }
I solved this problem in other ways, This link
index.ejs:
<h1><%- require('./header.ejs')({ title: 'page name' }) -%></h1>
header.ejs:
<title><%= title %></title>
from ejs-compiled-loader.
It's a bug, this.query is blindly passed to utils.parseQuery() which throws the error "A valid query string passed to parseQuery should begin with '?'" if the string representation of that object does not start with a '?'. See https://github.com/bazilio91/ejs-compiled-loader/blob/3.x/index.js#L15
Steps to reproduce:
Import without options object or query:
'!!ejs-compiled-loader!./path/to/template'
yields this error. Import with an undefined query:
'!!ejs-compiled-loader?!./path/to/template'
yields this error. Import with an empty object:
'!!ejs-compiled-loader?{}!./path/to/template'
yields no errors.
Debugging:
I used this code inserted before https://github.com/bazilio91/ejs-compiled-loader/blob/3.x/index.js#L15
console.log("this.query is set");
console.log("this.query is of type " + typeof this.query);
if(typeof this.query === 'object') console.log("query is an 'object'");
else console.log("query is not an 'object'");
}
else {
console.log("no query");
}
The output of that is
for !!ejs-compiled-loader!./path/to/tpl
as well as !!ejs-compiled-loader?!./path/to/tpl
this.query is set
this.query is of type string
and for !!ejs-compiled-loader?{}!./path/to/tpl
:
this.query is set
this.query is of type string
?{}
As such, loader-utils.parseQuery
will throw that error if neither options nor a query is supplied. See https://github.com/webpack/loader-utils/blob/c937e8c77231b42018be616b784a6b45eac86f8a/lib/parseQuery.js#L11 for the parseQuery() code.
Note that the webpack loaders API documentation omits that this.query
is set to an empty string if the query is "undefined". If that didn't happen, at least !!loader?!./path/to/tpl
would work correctly.
However, there is a shorthand to checking for an options object or passing the query to loader-utils.parseQuery()
documented right below: https://webpack.js.org/api/loaders/#thisgetoptionsschema
Using this getOptions()
would replace both Lines 12 and 15 in index.js, I assume.
OffTopic:
To be honest, webpack is already at version 5 (beta) and this loader does some v4 stuff incorrectly in a branch called 3.x... I'm ditching this loader and giving that whole "do everything through webpack" a thorough reconsideration. There's an awful lot of dependencies that could break at any given moment (like this one). It was fun to learn this new-fangled webdev stuff, but I don't think I need that for my personal projects.
Thanks for playing.
from ejs-compiled-loader.
Can you provide your loader rule from webpack config?
from ejs-compiled-loader.
I also have this issue, I can resolve it by setting var query = {};
My loader rule is below.
{
test: /\.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}
Here are my dev dependencies
"@types/node": "^13.13.4",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.5.3",
"ejs-compiled-loader": "^3.0.0",
"eslint": "^6.8.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.0",
"ts-loader": "^7.0.1",
"typescript": "^3.8.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
from ejs-compiled-loader.
@beeryukov, I believe I resolved this for myself.
I was using the HtmlWebpackPlugin like this:
new HtmlWebpackPlugin({
template: "!!ejs-compiled-loader!./public/index.ejs",
templateParameters: {
posts: postTemplates,
post: false
}
}),
However, you can also just set the loader as a rule in your loader, HtmlWebpackPlugin will pick up this rule. So you can change the Html Webpack Plugin to not use the !!ejs-compiled-loader!
syntax
{
test: /\.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}
&
new HtmlWebpackPlugin({
template: "./public/index.ejs",
templateParameters: {
posts: postTemplates,
post: false
}
}),
Kind of confusing between the READMEs, but solved my issue.
from ejs-compiled-loader.
I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
from ejs-compiled-loader.
I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
Can you share your ejs webpack config rule?
from ejs-compiled-loader.
I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
Can you share your ejs webpack config rule?
webpack.config.js
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinCssExtractPlugin = require("mini-css-extract-plugin"); // 将css代码提取为独立文件的插件
const MediaQueryPlugin = require('media-query-plugin');
module.exports = {
mode: 'production',
entry: [
'./src/index.js'
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
{
loader: MinCssExtractPlugin.loader, // 将处理后的CSS代码提取为独立的CSS文件,可以只在生产环境中配置,但我喜欢保持开发环境与生产环境尽量一致
options: {
publicPath: '/assets/',
// only enable hot in development
hmr: true,
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader', // CSS加载器,使webpack可以识别css文件
MediaQueryPlugin.loader,
'postcss-loader', // 承载autoprefixer功能,为css添加前缀
'sass-loader', // Compiles Sass to CSS
],
},
{
test: /\.css$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
},
'extract-loader',
'css-loader',
'postcss-loader']
},
{
test: /\.(jpg|png|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:8].[ext]',
outputPath: 'assets/',
publicPath: './assets/'
}
}
},
{
test: /\.ejs$/,
use: {
loader: 'ejs-compiled-loader',
options: {
htmlmin: true,
htmlminOptions: {
removeComments: true
}
}
}
}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.ejs',
inject: true,
minify: {
collapseWhitespace: true
}
}),
new webpack.HotModuleReplacementPlugin(),
new MinCssExtractPlugin(),
new MediaQueryPlugin({
include: [
'style',
],
queries: {
'print': 'print',
'not print': 'not-print'
}
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
overlay: true,
port: 4550,
open: true,
hot: true
}
};
package.json
{
"name": "resume",
"version": "1.0.0",
"description": "个人简历",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode=development",
"build": "webpack --mode=production"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ejs-compiled-loader": "^3.0.0",
"ejs-loader": "^0.5.0",
"extract-loader": "^2.0.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"media-query-plugin": "^1.3.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-px2rem-exclude": "0.0.6",
"postcss-url": "^8.0.0",
"px2rem-loader": "^0.1.9",
"raw-loader": "^0.5.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"fs": "0.0.1-security",
"lib-flexible": "^0.3.2"
}
}
from ejs-compiled-loader.
Related Issues (20)
- Partials not found HOT 9
- "compileDebug" option causing utils is not defined" HOT 1
- In search of collaborator HOT 8
- How to set ‘open’ and 'close' HOT 1
- Replace loaderUtils.parseQuery() with loaderUtils.getOptions() HOT 3
- why using git to download the ejs dependency? HOT 1
- Checking optional parameter with ternary expression HOT 3
- Recompile child partial not working HOT 2
- ENOENT: no such file or directory when passing local data using include HOT 3
- could not support weapack4 HOT 5
- does not use npm package for ejs. uses git contributer. HOT 1
- Please update ejs to the latest version
- Readme install directs to other resources
- Drop-In-Replacement for this HOT 6
- npm audit warnings HOT 3
- Upgrade to ejs ^3.0 or dynamic includes HOT 2
- > I also had this issue, but It can't be solved by the above method, So someone can help me, thank you.
- Depends on vulnerable versions of merge HOT 1
- Critical security vulnerability
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ejs-compiled-loader.