I am trying to make aliases for the components and sub-directories using jsconfig.json in my Vue.js project. But I am getting this error:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#components/*": [
"./src/components/*"
],
}
},
"exclude": [
"node_modules"
]
}
SomeFile.vue
import GuestLayout from '#components/Layouts/GuestLayout';
Error:
ERROR Failed to compile with 1 error
...
To install it, you can run: npm install --save #components/Layouts/GuestLayout
I tried goggling for the issue but nothing seems to be working. This is the simplest one which found https://www.youtube.com/watch?v=U73TDohXmhQ
What am I doing wrong here..?
✔ Problem solved:
The thing that did the trick for me, was setting up the configurations in vue.config.js instead of using the jsconfig.json or tsconfig.json.
vue.config.js
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#Layouts': path.resolve(__dirname, 'src/components/Layouts/'),
'#Inputs': path.resolve(__dirname, 'src/components/Input/'),
'#': path.resolve(__dirname, 'src/components/'),
}
}
}
}
SomeFile.vue
import GuestLayout from '#Layouts/GuestLayout';
import FormGroup from '#Inputs/FormGroup';
...
Related
I have a simple Typescript project with this code:
import {
parseComponent,
compile as compileTemplate,
ASTElement,
} from "vue-template-compiler";
...
I compile it using tsc with:
"target": "es2020",
"module": "commonjs",
And it gives code like this:
const vue_template_compiler_1 = require("vue-template-compiler");
In my package.json I have this:
"dependencies": {
"vue-template-compiler": "^2.6.12"
But I don't have "vue", because I don't need all of Vue - just the template compiler.
This all works fine, but I'm trying to use Webpack to bundle everyone into a single file. However, when I run webpack I get this error:
ERROR in ./node_modules/vue-template-compiler/index.js 2:19-41
Module not found: Error: Can't resolve 'vue' in '/path/to/myproject/node_modules/vue-template-compiler'
# ./build/analysis.js 8:32-64
# ./build/index.js 8:19-40
This corresponds to the require("vue-template-checker") line. Why do I get this error?
Here's my webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
target: "node",
entry: "./build/index.js",
mode: "production",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
],
};
That module makes Vue version check during import. I guess, you want to skip that check. I would try aliasing. Something like:
module.exports = {
// ...
resolve: {
alias: {
'vue-template-compiler$': 'vue-template-compiler/build.js'
}
}
}
My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4
I am trying with following rollup.config.js file
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import copy from 'rollup-plugin-copy'
import clean from 'rollup-plugin-clean';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
watch: {
skipWrite: false,
clearScreen: false,
include: 'src/**/*',
//exclude: 'node_modules/**',
// chokidar: {
// paths: 'src/**/*',
// usePolling: false
// }
},
plugins: [
clean(),
copy({
targets: [
{ src: 'src/*', dest: 'dist' }
]
}),
typescript({
typescript: require("typescript"),
include: [ "*.ts+(|x)", "**/*.ts+(|x)", "*.d.ts", "**/*.d.ts" ]
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" },
{
file: "example/src/reactComponentLib/index.js",
format: "es",
banner: "/* eslint-disable */"
}
]
}
];
I want to rebuild when anything in src changes. I have couple of files which are not imported in .js and .ts files but I want them to copy in dist folder. copy is working fine but the watch is not picking up changes in those other files. Tried alot of variations on chokidar options but no luck yet.
Anyone have any idea how to resolve this?
watch.include only works on files pertaining to the module graph so if they are not imported they won't be included (https://rollupjs.org/guide/en/#watchinclude).
You can solve this by creating a small plugin that calls this.addWatchFile on those external files when the build starts. Here is an example:
plugins: [
{
name: 'watch-external',
buildStart(){
this.addWatchFile(path.resolve(__dirname, 'foo.js'))
}
}
]
Combine it with some globbing utility such as fast-glob and just call this.addWatchFile for every file you want to copy:
import fg from 'fast-glob';
export default {
// ...
plugins: [
{
name: 'watch-external',
async buildStart(){
const files = await fg('src/**/*');
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
I am unable to build certain PrimeVue UI components with webpack.
I have tried several components, and all the basic ones work fine, but as soon as I try and use a component that requires a sub-component, webpack fails to build. I experienced this so far with the Breadcrumb and PanelMenu components.
The error is:
ERROR in ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './PanelMenuSub' in '/my-application-directory/node_modules/primevue/components/panelmenu'
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&) 27:0-42 86:24-36
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&
# ./node_modules/primevue/components/panelmenu/PanelMenu.vue
# ./node_modules/primevue/panelmenu.js
# ./interface/html5/vue-components/Menu.js
# ./interface/html5/vue-components/App.js
# ./interface/html5/vue-main.js
My webpack config is as follows:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: 'vue-main.js',
output: {
filename: 'vue-main.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// the below will apply to both plain `.js` files AND `<script>` blocks in `.vue` files
// the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
The component is used exactly as described in the documentation.
What could be causing this? The same is happening with the Breadcrumb component, except it can't find the BreadcrumbItem component. I checked the node_modules directory and the files are there.
Is this a webpack config file problem, a PrimeVue bug, or a user (me) error?
is that your full config without babel? I would try to resolve properly.
https://webpack.js.org/configuration/resolve/
resolve: {
alias: {
'#': res('src'),
'vue$': 'vue/dist/vue.esm.js'
},
modules: [res('node_modules')],
extensions: ['.js', '.vue', '.json']
},
resolveLoader: {
modules: [res('node_modules')]
}
My testing-app is compiling fine, except that I get this warning:
" Critical dependency: the request of a dependency is an expression"
(base) marco#pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve
> testproject#0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings
7:22:25 PM
warning in ./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
Note that the development build is not optimized.
To create a production build, run npm run build.
I read around that it might depend of webpack, but didn't find how to put it right.
This is webpack.config.js :
{
"mode": "development",
"output": {
"path": __dirname+'/static',
"filename": "[name].[chunkhash:8].js"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"exclude": /node_modules/,
"use": "vue-loader"
},
{
"test": /\.pem$/,
"use": "file-loader"
}
]
},
node: {
__dirname: false,
__filename: false
},
resolve: {
extension: ['*', '.pem'],
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
https: true,
compress: true,
public: 'ggc.world:8080'
}
}
Any ideas about how to solve it?
The following code works for me. Edit vue.config.js and add webpack config:
configureWebpack: {
module: {
exprContextCritical: false
}
}
const webpack = require('webpack');
module.exports = {
// ... your webpack configuration ...
plugins: [
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
]
}
try this one
For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.
/* config-overrides.js */
const webpack = require('./node_modules/webpack')
module.exports = function override (config, env) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ContextReplacementPlugin(
/\/peerjs\//,
(data) => {
delete data.dependencies[0].critical
return data
}
)
)
return config
}
It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.