vuejs / component-compiler-utils Goto Github PK
View Code? Open in Web Editor NEWLower level utilities for compiling Vue single file components
Lower level utilities for compiling Vue single file components
Specifying a different transpiler than the current vue-template-es2015-compiler
would add the ability for code inside the templates to be processed the same (or a similar) way to the code from <script>
.
For example there are outstanding proposals to the ecmascript that currently can be used through babel plugins[1] but they won't work inside the template expressions since they don't follow the same compilation path.
[1] https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
I want to write a custom loader to process markdown format files,
web.config.js
module.exports = {
configureWebpack: config => {
config.module.rules.push({
test: /\.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: require.resolve('./src/testLoader')
}
]
})
}
}
testLoader.js
module.exports = function (value) {
console.log(value)
return "<template>" + value + "</template>"
}
HelloComponent.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import md from "./cx.md";
export default {
name: "HelloWorld",
components: {
md,
},
props: {
msg: String,
},
};
</script>
The solution the search engine found was to keep the vue version and the version of the Ue-template-compiler consistent, but the vue version was 3.0 and the version of the Ue-template-compiler was the latest version 2.6.12.
ERROR Failed to compile with 3 errors 9:58:20
error in ./src/components/HelloWorld.vue
Module Error (from ./node_modules/eslint-loader/index.js):
C:\Users\cx\Desktop\bao\demo3\src\components\HelloWorld.vue
12:5 error The "md" component has been registered but not used vue/no-unused-components
✖ 1 problem (1 error, 0 warnings)
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 1:0-53 5:16-26
@ ./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/components/cx.md
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- vue@3.0.0 (C:\Users\cx\Desktop\bao\demo3\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\Users\cx\Desktop\bao\demo3\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-25 5:8-10
@ ./src/components/HelloWorld.vue?vue&type=script&lang=js
@ ./src/components/HelloWorld.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/components/cx.md
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\cx\Desktop\bao\demo3\node_modules\@vue\component-compiler-utils\dist\parse.js:14:23)
at Object.module.exports (C:\Users\cx\Desktop\bao\demo3\node_modules\vue-loader\lib\index.js:67:22)
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=script&lang=js 1:0-25 5:8-10
@ ./src/components/HelloWorld.vue?vue&type=script&lang=js
@ ./src/components/HelloWorld.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue?vue&type=script&lang=js
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.13.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I saw a person raise this problem before, but according to the solution below, it cannot be solved
#82
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=8.2.10 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-loader │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ vue-loader > @vue/component-compiler-utils > postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1693 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=8.2.10 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nuxt │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ nuxt > @nuxt/builder > @nuxt/webpack > vue-loader > │
│ │ @vue/component-compiler-utils > postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1693 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=8.2.10 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nuxt │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ nuxt > @nuxt/webpack > vue-loader > │
│ │ @vue/component-compiler-utils > postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1693 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=8.2.10 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-jest │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ vue-jest > @vue/component-compiler-utils > postcss │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1693 │
└───────────────┴──────────────────────────────────────────────────────────────┘
SFCDescriptor in component-compiler-utils:
SFCDescriptor in vue-template-compiler:
result:
Type 'typeof import("c:/code/vscode-fe-helper/node_modules/vue-template-compiler/types/index")' is not assignable to type 'VueTemplateCompiler'.
The types of 'parseComponent(...).template' are incompatible between these types.
Type 'SFCBlock | undefined' is not assignable to type 'SFCBlock | null'.
Type 'undefined' is not assignable to type 'SFCBlock | null'
#!/bin/bash -eo pipefail
yarn test
yarn run v1.6.0
$ prettier --list-different "{lib,test}/**/*.ts" && jest --coverage
FAIL test/compileStyle.spec.ts
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (native)
FAIL test/stylePluginScoped.spec.ts
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (native)
FAIL test/compileTemplate.spec.ts
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (native)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | Unknown | Unknown | Unknown | Unknown | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 3 failed, 3 total
Tests: 0 total
Snapshots: 0 total
Time: 1.225s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Exited with code 1
Error when trying to install the package?
Hi, I can use parse
function to parse raw SFC source into SFCDescriptor, but how can I parse descriptr into SFC source, Is there any api to do that ?
Please consider updating postcss to a version >= 8.2.13 since versions below are affected by Regular Expression Denial of Service.
See GHSA-566m-qj78-rww5 for more information.
With LRUCache updated to version 5.1.1, the vue component compiler utils throw the error
TypeError: Class constructor LRUCache cannot be invoked without 'new'
I think this is due to line 9 in lib/parse.ts:
const cache = require('lru-cache')(100)`;
If this would be changed to
const LRUCache = require('lru-cache');
const cache = LRUCache(100);
I think this would fix the problem.
Does it make sense?
First, mozilla/source-map doesn't support \
as separator at all, because it's designed to be consumed in browser.
file
and sourceRoot
has to be normalized.component-compiler-utils/lib/parse.ts
Lines 91 to 93 in 8de35e6
{
file: filename.replace(/\\/g, '/'),
sourceRoot: sourceRoot.replace(/\\/g, '/')
}
There is one more to be fixed in @vue/component-compiler
.
https://github.com/vuejs/vue-component-compiler/blob/afa1cd440123e2e0c195908c1e15935273ac64a9/src/assembler.ts#L77
sourceRoot
doesn't make much sense, because when serving the source-map to browser, process.cwd()
is irrelevant.component-compiler-utils/lib/parse.ts
Line 52 in 8de35e6
Change to
sourceRoot = '',
With the above two fixes, it can fix https://travis-ci.org/dumberjs/gulp-vue-file/builds/477568946
Update: I managed to fix the gulp-vue-file bug within gulp-vue-file by rewriting sourcemaps (normalize sources and file path). But the incoming sourcemaps should also be fixed in vue compiler.
Let me know what you think, I can make some PRs for this.
As you can do in vue-loader
allow using data
options to avoid write in each component a set of sass variables https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables
In this moment data
options don't work because is used by scss.render
function to provide to compiler the scss
code https://github.com/vuejs/component-compiler-utils/blob/master/lib/styleProcessors/index.ts#L26
I come about this issue where I stated my grasp of the situation: Morgul/snowpack-plugin-vue2#2
So briefly, is it normal that I don't see a scoped
property into TemplateCompileOptions
related to the one from StyleCompileOptions
? I anticipated something like what is done here: https://github.com/vuejs/vue-next/blob/master/packages/compiler-sfc/src/compileTemplate.ts#L47
version v3.0.1
is missing the lib folder, which causes:
node_modules/vue-loader/lib/index.d.ts:2:37 - error TS2307: Cannot find module '@vue/component-compiler-utils/lib/types'.
2 import { VueTemplateCompiler } from '@vue/component-compiler-utils/lib/types'
I'm using SFC (single file component) hybrid where my js and sass file are linked from my vue file. The sass file itself imports files located in installed packages in node_modules/. With webpack vue plugin these easily get resolved by prefix an npm sass dependency with ~
I just get these errors regardless of the file I am trying to load from node modules (example package named mymodule with file.scss sitting in root of it):
(VuePlugin plugin) Error: Error: File to import not found or unreadable: ~mymodule/file.scss.
Create an SFC file and change the SASS to be import from external SASS file:
<style lang="scss" src="./styles.scss"></style>
Import a sass file from the top of the SFC sass file:
import '~mymodule/file.scss'
Would massively appreciate a fix for this, spent hours finding dead ends and broken code for what seems like a very common use case.
The component-compiler-utils module requires vue-template-compiler, but it's not listed as a dependency (only a dev dependency). When I use vue-loader with a custom template compiler, and I don't install vue-template-compiler, I get an error.
Of course as a workaround I can install vue-template-compiler manually. But in that case I end up having three template compilers installed: vue-template-compiler, vue-template-es2015-compiler and my custom template compiler. Is that intentional?
3.2.0
https://github.com/crixusshen/vuecli-debug-reproduction
Environment Info:
System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: Not Found
npm: 6.14.5 - ~/.nvm/versions/node/v12.16.3/bin/npm
Browsers:
Chrome: 87.0.4280.88
Edge: Not Found
Firefox: Not Found
Safari: 14.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 3.12.1
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 3.12.1
@vue/cli-plugin-babel: ^3.11.0 => 3.12.1
@vue/cli-plugin-eslint: ^3.11.0 => 3.12.1
@vue/cli-service: ^3.11.0 => 3.12.1
@vue/cli-shared-utils: 3.12.1
@vue/component-compiler-utils: 3.2.0
@vue/preload-webpack-plugin: 1.1.2
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
vue: ^2.6.10 => 2.6.12
vue-eslint-parser: 2.0.3 (5.0.0)
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.5
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.10 => 2.6.12
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.4.6
I currently have two subcomponents with the same file name, although their implementations are different. Component A is located in 'src/components/A/HelloWorld.vue', Component B is located in 'src/components/B/HelloWorld.vue', although they are in A and B directories respectively, but their file names are called HelloWorld.vue.
Then use them separately in the main component:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<HelloWorld2 msg="Welcome to Your React.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/A/HelloWorld.vue'
import HelloWorld2 from './components/B/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld,
HelloWorld2
}
}
</script>
And then the view rendering is really expected.But I had trouble debugging in chrome.During debugging, I tried to debug A component, but I could only call out the implementation script of B component.At this point its debug path is located at “webpack:///HelloWorld.vue?hash”.
At this point I infer that as long as the component has the same name as the file name, the one after will override the one before when debugging.At that moment, on this basis and I create the src/components/C/HelloWorld.vue,It really confirmed my hypothesis.
This can cause a lot of trouble during debugging or problems where the debug file is not found.
Able to debug different files with the same name in debugging
currently only debug the last component in the same file name
// styleProcessors/index.ts
const less = {
render(
source: string,
map: any | null,
options: any
): StylePreprocessorResults {
const nodeLess = require('less')
let result: any
let error: Error | null = null
nodeLess.render(
source,
{ syncImport: true },
(err: Error | null, output: any) => {
error = err
result = output
}
)
if (error) return { code: '', errors: [error] }
if (map) {
return {
code: result.css.toString(),
map: merge(map, result.map),
errors: []
}
}
return { code: result.css.toString(), errors: [] }
}
}
Here, this options
is not used in nodeLess.render
, when i want to assign the paths
param in render
function.
Allow transformAssetUrls
to be used like this:
transformAssetUrls: {
'optimize-img': {
src: value => `require('!optimize-img-loader!${value}')`
}
}
<template>
<optimize-img src="./foo.png" />
</template>
I can create a PR if you think it's useful.
if (firstChar === '.' || firstChar === '~') {
// when packaged in the browser, path will be using the posix-
// only version provided by rollup-plugin-node-builtins.
return `"${(path_1.default.posix || path_1.default).join(transformAssetUrlsOption.base, uriParts.path + (uriParts.hash || ''))}"`;
}
In the code above, can you add the ( firstChar === '@' ) ?
The current API surface is the minimal amount of methods needed in vue-loader
. There are a few features that are good to have here but not currently present:
compileStyle
This is currently not included because in vue-loader
CSS preprocessing is delegated to other webpack loaders. However for some other systems that do not support that kind of usage, directly handling preprocessors here will make more sense.
We will need to add the same preprocessLang
and preprocessOptions
fields to StyleCompileOptions
. The implementation should look like the preprocess step in compileTemplate
and be synchronous. It will require whatever preprocessor is specified in lang
to be separately installed.
const { code, map } = compileStyle({
source: `...`,
filename: `...`,
map: {},
preprocessLang: styleDescriptor.lang,
// optional extra options to be passed to the preprocessor
preprocessOptions: {
indentedSyntax: true
}
})
compileScript
for JavaScript pre-processor handlingThis is left out because again vue-loader
delegates script processing to webpack loaders. Same idea:
const { code, map } = compileScript({
source: `...`,
filename: `...`,
map: {},
preprocessLang: scriptDescriptor.lang,
preprocessOptions: {
// ...
}
})
Actual compilation for babel, ts and coffee can probably be reused from vue-jest
.
genId
Probably a good idea to put in this package as well.
assemble
This is intentionally left out because in actual implementations, the assemble step is highly dependent on the targeted system. Behaviors like hot reload and style injection have to be handled differently in different environments.
Currently this package has no tests for itself yet because most of the logic was tested during the development of vue-loader
15 and later simply moved into this package with minimal modifications.
But we surely need to write the tests :)
The current vue-component-compiler
package can be built on top of this package and expose an API that looks like this:
const templateCompiler = require('vue-template-compiler')
const { createCompiler } = require('vue-component-compiler')
const compiler = createCompiler({
templateCompiler,
templateCompilerOptions: {}, // optional
transpileOptions: {}, // optional, for vue-template-es2015-compiler
transformAssetUrls: true // optional, defaults to false
})
const compiledDescriptor = compiler.compile({
source,
filename,
isProduction: true // optional, defaults to process.env.NODE_ENV === 'production'
})
Note the compile
method returns a descriptor instead of code. The descriptor has the same template
, script
and style
parts but contains compiled code and source maps. It is then up to the user to decide how to assemble these compiled descriptors into final code.
This API may or may not be flexible enough - but ideally tools like vue-jest
should be able to use this API instead of the lower level ones.
/cc @znck @eddyerburgh
compiler undefined in parse.ts. when I want to compile single vue component as normal.
[ Can't read parseComponent of undefined... ]
Introducing by 5b299ed
<style scoped>
>>> .foo {
color: red;
}
</style>
Before:
[data-v-*] .foo { color: red; }
After:
.foo { color: red; }
Because of this line, if I have a template which includes something like {{render(data)}}
I get weird errors in the console.
[Vue warn]: Error in render: "TypeError: _vm is undefined"
found in
---> <App>
<Root> vue.runtime.esm.js:56:2
TypeError: "_vm is undefined"
render http://localhost:1234/main.a1fcaaae.js:11645:7
render http://localhost:1234/main.a1fcaaae.js:11659:24
Relevant lines in the generated JS source:
/* template */
Object.assign($ec0164, (function () {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { attrs: { id: "app" } }, [
_vm._v("\n" + _vm._s(render(_vm.data)) + "\n")
])
}
var staticRenderFns = []
render._withStripped = true
return {
render: render,
staticRenderFns: staticRenderFns,
_compiled: true,
_scopeId: null,
functional: undefined
};
})());
As you can see, it is calling render(_vm.data)
instead of _vm.render(_vm.data)
.
I was searching in my own codebase and forgot to exclude the node_modules
folder on that search. With that I found two typos in your README file... ¯\(ツ)/¯
On Why isn't vue-template-compiler a peerDependency?, you have:
"Not listing it as a peer depedency also allows"
and
"it just to fullfil the peer"
Version: 1.2.0
Recently many users reported an error at vuejs/vuepress#268, and I reproduced it at my local.
After the investigation, I found:
It's will be compiled into:
result = postcss_1.default(plugins).process(source, postCSSOptions);
But in postcss's dist code, the module was exported as:
exports.default = postcss;
module.exports = exports['default'];
So the module should be used as postcss_1
instead of postcss_1.default
.
And I don't know if this is a problem of TSC. but it's truly a issue introduced by upgrade of vue-loader
/@vuejs/component-compiler-utils
component-compiler-utils/lib/parse.ts
Line 111 in 8de35e6
{ version: 3,
sources:
[ '/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue/src/App.vue' ],
names: [],
mappings:
[ [],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[ Int32Array [ 0, 0, 11, 0 ] ],
[ Int32Array [ 0, 0, 12, 0 ] ],
[ Int32Array [ 0, 0, 13, 0 ] ] ],
file:
'/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue/src/App.vue',
sourceRoot: '/Users/znck/Workspace/Experiments/repro-rollup-plugin-vue',
sourcesContent:
[ '<script>\nexport default {\n \n}\n</script>\n\n<template>\n <div class="foo">foo</div>\n</template>\n\n<style>\n.foo { \n color: red;\n}\n</style>' ] }
mappings
should be string.
Related: vuejs/rollup-plugin-vue#251
I made this same issue on the require-extension-hooks-vue repo. Since I don't know quite where this falls under.
It seems like maybe prettier but I am unsure since it may also be related to Vue?
I am using the hooks repo to setup and run unit tests, however I keep getting this same type error of Super Expression must either be null or a function
I'm not sure why this started happening. You can reproduce it if you simply clone the require-extension-hooks-vue repo here: https://github.com/jackmellis/require-extension-hooks-vue
Any pointers or a possible work around would be greatly appreciated! Maybe I'm just being dumb even I dunno.
If a template is using pug
syntax and pug
package is not installed, it fails. There should be graceful warning explaining what failed and how to resolve it.
For example:
Component
Example.vue
uses langpug
for template. Please install the language preprocessor.$ npm add -D pug
I just made a tool to make prettier works better with Vue SFC, which depends on @vue/component-compiler-utils
.
I encountered an error when trying to resolve prettier's sharable config. I noticed that this feature was released in prettier v1.17.0, and my prettier is v1.18.x.
But when I inspected the lock file, I found that @vue/component-compiler-utils
is using prettier
as a denpendency, too, and locks the version to 1.16.3
, which caused this error.
component-compiler-utils/package.json
Line 61 in 37b4a6a
Is the version of prettier necessary to be locked to 1.16.3?
like this
const defaultOptions: AssetURLOptions = {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href']
}
xlink:href
was deprecated since SVG 2 (MDN), also keep xlink:href
for compatibility.
The :root
CSS pseudo-class matches the root element of a tree representing the document, it identical to the selector html
usually.
But a scoped :root
selector dose not match any Element.
With a demonstration which created by @vue/cli 4.0.5:
<!--HelloWorld.vue-->
<style scoped>
:root {
--font-color: red;
}
h3 {
color: var(--font-color);
}
</style>
And we got:
<style type="text/css">
[data-v-469af010]:root {
--font-color: red;
}
h3[data-v-469af010] {
color: var(--font-color);
}
</style>
h3
's font-color wont change, it still inherits from parent element rather than red
.
Scoped :root
does not match any element, but a attribute
selector with :root
do. So, we can get the expected result if changing:
[data-v-469af010]:root { /*balabala*/ }
to
/* proposal A: */
:root { /*balabala*/ }
/* or */
/* proposal B: */
:root [data-v-469af010] { /*balabala*/ }
I prefer proposal B that will make sure the scoped style rendered as wished. Such as:
<!-- HelloWorld.vue -->
<template>
<h3>Hello</h3>
</template>
<style scoped>
:root {
--font-color: red;
}
h3 {
color: var(--font-color);
}
</style>
<!-- another unscoped style in HelloWorld.vue-->
<style>
:root {
--font-color: blue;
}
</style>
We will get some css code like this:
<style type="text/css">
:root [data-v-469af010] {
--font-color: red;
}
h3[data-v-469af010] {
color: var(--font-color);
}
</style>
<style type="text/css">
:root {
--font-color: blue;
}
</style>
h3
will rendered with red font color as expected.
I'll create a PR if this issue is logical.
With the release of Prettier v2.x, projects wishing to update to the latest version will download both versions of Prettier due to this module having a hard dependency on v1.x.
Since Prettier is only require
'd when prettify == true
and NODE_ENV != "production"
, can this dependency be switched to an optionalDependency or peerDependency? Or perhaps its version requirement relaxed to include v2.x?
I am using rollup-plugin-vue
, and found it has its own postcss configuration item, and my postcss.config.js
is not being read. After some investigation, I figured it out that styleCompiler
this package requires it.
Is this intended? Or is it a better idea if compiler only extract css, and leave postcss processes to be handled by tools like postcss
?
Support for node-sass
seems to be hardcoded into this plugin via @vue/component-compiler-utils
. It would be great if node-sass
could be switched out with dart-sass
.
Maybe this is already possible and I'm just overlooking an option?
A compiler shouldn't depend on code formatting / beautifier utilities. That's the job of the IDE. vscode already handles this very well, for example.
Would you please remove prettier dependency?
In prettier 1.13.0, default parser was removed with a minor version(used to be babylon), this breaks the formatter here.
Issue has been created in prettier repo as well, attached here for tracking purpose.
prettier/prettier#4567
Adding error stack info below for our friend Google to route new comers to:
ERROR in ./src/client/components/Com1.vue?vue&type=template&id=22d07c36 (../happy-cli/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../happy-cli/node_modules/vue-loader/lib??vue-loader-options!./src/client/components/Com1.vue?vue&type=template&id=22d07c36)
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize ({project_dir}/node_modules/prettier/index.js:7051:13)
at formatWithCursor ({project_dir}/node_modules/prettier/index.js:10370:12)
at {project_dir}/node_modules/prettier/index.js:31115:15
at Object.format ({project_dir}/node_modules/prettier/index.js:31134:12)
at actuallyCompile ({project_dir}/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:29)
at compileTemplate ({project_dir}/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:26:16)
at Object.module.exports ({project_dir}/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)
PR: #15
Trying to use @vue/component-compiler-utils but I can't figure it out. So if you can point me to a contact or a forum or a wiki, that would be great. Thanks in advance.
Pug's doctype
option is set to html
by default in pug-plain-loader.
The reasoning is also explained there:
The doctype option is set to html by default, since most Vue templates are HTML fragments without explicit doctype.
The same we should do here in component-compiler-utils
(otherwise developers should figure it out and set it by themesevles vuejs/vue-jest#170)
I can create a PR if we agree to do it
We have issue with vue-jest, that uses this package. (vuejs/vue-jest#137 (comment)).
It would be nice to borrow experience on sass-loader and provide a choice of what to use: node-sass or sass (https://github.com/webpack-contrib/sass-loader/blob/master/src/getDefaultSassImplementation.js)
sass-loader requires you to install either Node Sass or Dart Sass on your own (more documentation can be found below). This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
Our corporate compliance people have objections to us using projects without a full license text. It would be helpful if a license file could get added to this repo.
This package declares prettier
in optionalDependencies
:
component-compiler-utils/package.json
Lines 68 to 70 in 8b0da74
I'm not sure if that was the intention, but when this @vue/component-compiler-utils
is a dependency (or sub-dependency) in a given project, that optionalDependencies
will be installed. And it's kinda pointless and unwanted to install prettier
in my projects where I don't use it, I feel.
I know that I can use npm i --no-optional
but that's a poor solution as nobody remembers to use it.
Also, I understand that it might not be desired to have prettier
in peerDependencies
as then it will trigger a warning when not installed.
Maybe just mention in the documentation that if you want to use prettier you have to add it manually?
npm run serve
ERROR Failed to compile with 1 error 上午8:46:30
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined
Expect to locate the .styl
file from node_modules
with ~
(which works well when bundled with Webpack)
<style lang="stylus" scoped>
@import '~@my-pkg/style.styl'
</style>
Get the error:
failed to locate @import file ~@my-pkg/style.styl
at Evaluator.visitImport (C:\Users\dev\node_modules\stylus\lib\visitor\evaluator.js:915:21)
...
...
...
However, when I import the .styl
file with relative path:
<style lang="stylus">
@import '../node_modules/@my-pkg/style.styl'
</style>
It works fine.
My rollup config:
import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import json from 'rollup-plugin-json'
export default {
input: 'src/index.vue',
output: {
format: 'esm',
file: 'dist/bundle.esm.js'
},
plugins: [
nodeResolve({
jsnext: true,
main: true
}),
commonjs(),
json(),
typescript({
rollupCommonJSResolveHack: true,
useTsconfigDeclarationDir: true
}),
vue()
]
}
When using vue-loader with thread-loader, you can't pass the compiler module directly since the options will be serialized by JSON.stringify
.
After doing npm update
, my npm run dev is throwing a bunch of instances of one error:
TypeError: Cannot read property 'parseComponent' of undefined
at parse (node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
at Object.module.exports (node_modules/vue-loader/lib/index.js:67:22)
@ ./resources/js/routes/index.js 18:11-28
@ ./resources/js/sp.js
@ multi ./resources/js/sp.js
The errors are all the same except for one difference: the reference 18:11-28
for ./resources/js/routes/index.js
is different for each file. It looks like each error corresponds to an () => import()
statement.
I would definitely appreciate some assistance on this since it's crashing my project's entire build.
I have html via AJAX call which contain components. my problem is component-a is not rending, is it possible in jquery ajax load? i tried vm.compile() and vm.$forceUpdate() on .load callback but nothing happens.
In our build we have noticed an inconsistency with dependencies. Namely, we noticed that yarn is pulling in two versions of prettier. Upon investigation, it was because this package asks for a specific version of prettier (while our app asks for another). Other Vue packages (for example, @vue/eslint-config-prettier) require minor versions---^1.16.3
Is this possibly a bug? Should it be ^1.16.3
as well? Or is there a reason for this specific version of prettier?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.