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.
Related
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 ^^
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 have a directory called mock at root which contains mocking data that I use to run the app in development mode. I would like to exclude them when i build for production. I notice that it is being added into bundle whenever i run vue-cli-service build and it is bloating my app bundle size.
I am using vue-cli and so I have to work with vue.config.js.
It is not clear from the docs or any answers on the wider web how I can specify which folders/files to exclude from the build.
Here is a snippet of my vue.config.js.
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
},
configureWebpack: {
plugins: [
new CompressionPlugin()
]
},
css: {
loaderOptions: {
scss: {
prependData: `#import "#/styles/main.scss";`
}
}
}
}
This is not the perfect solution, but...
If you want to exclude that directory at build time, you can try to use require instead of import. Something like this (source):
if (process.env.VUE_APP_MY_CONDITION) {
require('./conditional-file.js');
}
But be aware of this!
I want to embed a react-native-web application into an existing website and am currently looking for options how to do so.
The application should be a quite simple questionnaire which needs to be embedded into a website created with Elementor. My idea was to use the Elementor HTML widget and insert my application somehow, but unfortunately I cannot figure out how to do this.
I've got a bit of experience developing React Native(RN) apps but I am pretty new to web development and therefore thought it would be easier for me to go with RN and the react-native-web library.
So far, I've created a RN project using npx react-native init WebApp, copied the App.js, index.js and package.json files from react-native-web CodeSandbox template, deleted the node_modules folders and ran npm install. Then I was able to start and build this example web app with the scripts from the package.json.
Now my question, how can I use the output from the build directory and embed it into an html tag?
I also tried to use webpack with the configuration from the react-native-web docs to bundle the app but I always got a new error as soon as I fixed the last one. Is it possible to bundle a RN app into a single JS file which I could then insert into the website?
Looking forward to any advice!
Marco
I solved it by using the below webpack config. The created bundle.web.js' content is put into a script tag (<script>...</script>). This can be embedded into the HTML widget.
// web/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '');
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'index.web.js'),
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: ['react-native-web'],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
};
module.exports = {
entry: [
// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry file
path.resolve(appDirectory, 'src/index.js'),
],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
// ...the rest of your config
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
'react-native$': 'react-native-web',
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: ['.web.js', '.js'],
},
};
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.