See EDIT below for steps to reproduce.
I am trying to generate sourcemaps for a production build for the HelloWorld App for Vite+Vue. Unfortunately it does not show all the components (only shows the WelcomeItem component). See snaphot from chrome devtools below:
When you inspect the sourcemap files, you see that it does not add App.vue, Helloworld.vue and TheWelcome.vue to sources:
{
"version": 3,
"file": "index-ecfc4d4f.js",
"sources": [
"../../node_modules/#vue/shared/dist/shared.esm-bundler.js",
"../../node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js",
"../../node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js",
"../../node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js",
"../../src/assets/logo.svg",
"../../src/components/WelcomeItem.vue",
"../../src/components/icons/IconDocumentation.vue",
"../../src/components/icons/IconTooling.vue",
"../../src/components/icons/IconEcosystem.vue",
"../../src/components/icons/IconCommunity.vue",
"../../src/components/icons/IconSupport.vue",
"../../src/main.js"
],
"sourcesContent": [ ...
], ...
}
The dev mode is working OK, I can see my source code.
Here is my config. All I did was add build.sourcemap=true.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
sourcemap: true
}
})
EDIT: Steps to reproduce
npm init vue#latest
// pick No everywhere
cd vue-project
npm install
// add build.sourcemap = true in the vite.config.js file as shown above
npm run build
npm run preview
I have observed that if you add any code to the script tag in the component App.vue (other than components' imports), then it will appear in the sourcemaps.
App.vue file:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
console.log("Test");
</script>
...
I hope it works for you too ^^
Related
I have a nuxt 3 project that is working fine on localhost while developing. I use FormKit and vue-toastification and everything is fine on "npm run dev".
But once I run npm run build to build it for deployment. lots of stylings are missing. Mainly those two plugins. the error messages for the forms by FormKit aren't red and not styled. vue-toastifications display with full height and width of the screen as it has no styling.
would I do any extra steps before running npm run build? like building these plugins or something?
this is my nuxt.config.ts file if it might help!
// #ts-nocheck
import Icons from "unplugin-icons/vite"
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ["~/assets/fonts/droidkufi/droidarabickufi.css", "#formkit/themes/genesis"],
modules: [
"#nuxtjs/tailwindcss",
[
"#pinia/nuxt",
{
autoImports: ["defineStore"],
},
],
"#formkit/nuxt",
],
plugins: ["~/plugins/flowbite.client.ts", "~/plugins/i18n.ts"],
vite: {
plugins: [
Icons({
autoInstall: true,
}),
],
},
runtimeConfig: {
// secret serverside variables
public: {
// baseURL: "http://127.0.0.1:8000/api/",
// apiBase: "http://127.0.0.1:8000/api/",
// homeBase: "http://127.0.0.1:8000",
baseURL: "https://sju.davidlouis.co/api/",
apiBase: "https://sju.davidlouis.co/api/",
homeBase: "https://sju.davidlouis.co",
},
},
vue: {
compilerOptions: {
isCustomElement: (tag) => ["datepicker-hijri"].includes(tag),
},
},
})
I tried to run npm run dev back to test if styles are working. and yes they are working fine. the problem starts when I run npm run build for production and deployment.
Scenario
I'm using Vue2 with Vue CLI as the bundling tool, now I want to migrate Vue CLI to Vite to enhance the development experience, and the migration process is somewhat successful (thanks to this guide).
Problem
Due to a specific reason, I need to keep the production build accessible statically, without any local server required (the web app should run simply by opening up the index.html file on my machine). And with this, I encounter the problem due to the fact that Vite bundles my code in ESM format that has to be served through some server to resolve CORS policy (error screenshot below). And hence the question: Is it possible to configure Vite to build in plain JS rather than ESM?
Any help is appreciated. Thank you.
Attachments
My vite.config.js as below if it helps:
import path from "path";
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
export default defineConfig({
base: "",
css: {
preprocessorOptions: {
scss: {
additionalData: `
#use "sass:math";
#import "#/scss/utils.scss";`,
},
},
},
plugins: [createVuePlugin()],
resolve: {
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.
package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.
What am I missing here?
If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.
But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js#2 --save and added this to the rules in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
Then I added the babel.config.js file to the root of the project.
module.exports = {
presets: [
['#babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-transform-spread',
]
}
A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.
I ended up just removing Vuetify (I was only using one feature from it which was easily replaced) and using the babel polyfill cdn. Probably not the best solution but got it working for now.
All my vue components cannot be rendered in IE11. After searching, it looks like the reason is that IE does not support ES6 and above.
So my attempt at the moment is use babel:
My .babelrc:
{
"presets": [
[
"#babel/preset-env",
{
"debug": true,
"modules": false,
"forceAllTransforms": true,
"useBuiltIns": "usage",
"targets": "last 1 version, > 1%",
"corejs": 3
}
]
]
}
And I am using laravel-mix to compile the asset:
const mix = require("laravel-mix")
mix.js("resources/js/app.js", "public/js/app.js")
.sass("resources/sass/app.scss", "public/css/app.css")
.options({
processCssUrls: false
});
The compilation was running ok, but my vue components are still not rendered.
Any pointers to solve the problem?
Thanks.
// SOLUTION: Convert ES6 to ES2015 using babel and laravel-mix
Try this.
Install babel polyfill
npm install --save #babel/polyfill or yarn add #babel/polyfill
Add the code import #babel/polyfill to src/main.js.
import '#babel/polyfill'
import Vue from 'vue'
// ...
Change the babel.config.js as follows:
module.exports = {
presets: [
[
'#vue/app',
{
'useBuiltIns': 'entry'
}
]
]
}
Create the vue.config.js file and create:
(Add existing settings if they already exist.)
const ansiRegex = require('ansi-regex')
module.exports = {
......(기존 설정이 있다면 다음에 추가)
transpileDependencies: [ansiRegex]
}
Note. Use es6-promise when using a promise pattern.