I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}
Related
I created a sample project to reproduce this issue: https://github.com/splanard/vue3-vite-web-components
I initialized a vue3 project using npm init vue#latest, as recommanded in the official documentation.
Then I installed Scale, a stencil-built web components library. (I have the exact same issue with the internal design system of my company, so I searched for public stencil-built libraries to reproduce the issue.)
I configured the following in main.ts:
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-')
applyPolyfills().then(() => {
defineCustomElements(window);
});
And the same isCustomElement function in vite.config.js:
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I inserted a simple button in my view (TestView.vue), then run npm run dev.
When opening my test page (/test) containing the web component, I have an error in my web browser's console:
failed to load module "http://localhost:3000/node_modules/.vite/deps/scale-button_14.entry.js?import" because of disallowed MIME type " "
As it's the case with both Scale and my company's design system, I'm pretty sure it's reproducible with any stencil-based components library.
Edit
It appears that node_modules/.vite is the directory where Vite's dependency pre-bundling feature caches things. And the script scale-button_14.entry.js the browser fails to load doesn't exist at all in node_modules/.vite/deps. So the issue might be linked to this "dependency pre-bundling" feature: somehow, could it not detect the components from the library loader?
Edit 2
I just found out there is an issue in Stencil repository mentioning that dynamic imports do not work with modern built tools like Vite. This issue has been closed 7 days ago (lucky me!), and version 2.16.0 of Stencil is supposed to fix this. We shall see.
For the time being, dropping the lazy loading and loading all the components at once through a plain old script tag in the HTML template seems to be an acceptable workaround.
<link rel="stylesheet" href="node_modules/#telekom/scale-components/dist/scale-components/scale-components.css">
<script type="module" src="node_modules/#telekom/scale-components/dist/scale-components/scale-components.esm.js"></script>
However, I can't get vite pre-bundling feature to ignore these imports. I configured optimizeDeps.exclude in vite.config.js but I still get massive warnings from vite when I run npm run dev:
export default defineConfig({
optimizeDeps: {
exclude: [
// I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
'scale-components-neutral'
'#telekom/scale-components-neutral'
'#telekom/scale-components-neutral/**/*'
'#telekom/scale-components-neutral/**/*.js'
'node_modules/#telekom/scale-components-neutral/**/*.js'
],
},
// ...
});
This issue has been fixed by Stencil in version 2.16.
Upgrading Stencil to 2.16.1 in the components library dependency and rebuilding it with the experimentalImportInjection flag solved the problem.
Then, I can import it following the official documentation:
main.ts
import '#telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '#telekom/scale-components-neutral/loader';
const app = createApp(App);
applyPolyfills().then(() => {
defineCustomElements(window);
});
And configure the custom elements in vite config:
vite.config.js
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})]
// ...
})
I did not configure main.ts
stencil.js version is 2.12.1，tsconfig.json add new config option in stencil:
{
"compilerOptions": {
...
"skipLibCheck": true,
...
}
}
add new config option in webpack.config.js :
vue 3 document
...
module: {
rules:[
...
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
compilerOptions: {
isCustomElement: tag => tag.includes("-")
}
}
}
}
...
]
}
...
I tried to use the process.env.process.env.VUE_APP_SERVER_URL in my vue project. But I got the error like the following.
Uncaught ReferenceError: process is not defined
It's using the webpack and run by npm start command.
Once you know the solution, please feel free to contact me.
You can add the following code in webpack.config.js.
const webpack = require('webpack');
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
]
...
}
I try to create some Vue libraries for internal use in our company.
As all of our projects use Vuetify, and our libraries expose some components that use it too, i don't want to bundle Vuetify in the libraries, but use the one installed with the "final" project.
I've look in the Webpack and Vue-cli documentation, and found the externals configuration key in webpack. But this vue.config.js file :
module.exports = {
configureWebpack: {
externals: {
vuetify: "commonjs2 vuetify",
},
},
chainWebpack: config => {
// These are some necessary steps changing the default webpack config of the Vue CLI
// that need to be changed in order for Typescript based components to generate their
// declaration (.d.ts) files.
//
// Discussed here https://github.com/vuejs/vue-cli/issues/1081
if (process.env.NODE_ENV === "production") {
config.module.rule("ts").uses.delete("cache-loader");
config.module
.rule("ts")
.use("ts-loader")
.loader("ts-loader")
.tap(opts => {
opts.onlyCompileBundledFiles = true;
opts.transpileOnly = false;
opts.happyPackMode = false;
return opts;
});
}
},
parallel: false,
};
Does'nt seems to works, as Vuetify is still in the bundle (And so, the weight of the output is BIG).
Since I don't want to load Vuetify multiple times... How can i achieve this ?
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});