Using vue cli 3 I have a project using harp.gl where I need a webworker to decode map tiles.
My vue.config.js has the following:
module.exports = {
pages: {
app: {
entry: './src/main.js',
filename: 'index.html',
title: 'Contextual Map HARP.GL/Vue',
},
decoder: {
target: "webworker",
entry: "./src/decoder.js",
output: {
filename: "[name].bundle.js",
},
devtool: 'source-map',
...
When I run this I have both the app and the decode.js running as a webworker of type "script" (when inspecting it using Chrome).
However, after upgrading to vue cli 4 the above code does not work, as inspecting it using Chrome the webworker type is text/html and it appears to serve the default index.html. It alomst as if the type: "webworker" is not working the same as with version 3.
I am at loss as how to fix this, the move from vue cli 3 to 4 changed something, but I cannot figure out what to change.
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.
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 can't find documentation on how to minimize assets and produce *.min.js files using vue cli.
Im using vue cli version 4.2.3.
I require the extention to be *.min.js for rollbar to function correctly.
How would you go about configuring vue cli to produce minimized assets? (no TS involved).
I'm sure Vue CLI minifies JS output when running build in production mode. It's just using different naming convention (no "min.js")
To tweak file names of JS chunks produced by Vue CLI, you can do the following:
Check the default Webpack config Vue CLI uses by running vue inspect on command line (dev mode) or vue inspect --mode production (production mode)
Look for an output (should be near the beginning of the output). In my project it looks like this:
Dev mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].js',
publicPath: '/',
chunkFilename: 'js/[name].js'
},
Production mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].[contenthash:8].js',
publicPath: '/',
chunkFilename: 'js/[name].[contenthash:8].js'
},
Now you can tweak it - add vue.config.js to your project if you don't have it already and add following:
module.exports = {
configureWebpack: config => {
if(process.env.NODE_ENV === "production") {
config.output.filename = 'js/[name].[contenthash:8].min.js'
config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
} else {
config.output.filename = 'js/[name].js'
config.output.chunkFilename = 'js/[name].js';
}
}
}
[name] and [contenthash:8] are Webpack placeholders - more info in documentation
I'm working on a vuejs project and we're trying to use external vue cli applications as libraries. In these libraries we want to be able to export a router config, which lazy loads the components within one of these modules. However when we compile this using the vue-cli-service into a library and it's got lazy chunk assets we cannot resolve them with webpack.
I have a feeling its something to do with the public path, or some simple configuration but i'm just stuck and banging my head against a wall at this stage with it.
https://github.com/EvanBurbidge/mono-repo-tester
Here's a simple overview of what we're doing
App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config
The console output from app1
The router configuration from app2
The router importing app2 from app1
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader',
cacheIdentifier: '39e7e586'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
I think I know what the problem is.
It appears that you're suffering from the fact that the default config of webpack bundled with VueJS does not support what you are trying to accomplish. In fact, it may very well be that Webpack does not support what you are trying to accomplish #2471 #6818 #7843.
When you compile app2 into UMD and try to use it within app1 by importing the UMD, the dynamic imports of app2 are not being resolved and are thus not copied over to the publicPath of app1. Since it is a dynamic import, compilation succeeds to the point where you can deploy the app. When you try to load the app however, it starts complaining that chunks are missing.
Here's one way to solve this problem:
app2/package.json
{
"name": "app2",
...
"main": "src/router.js"
}
app2/src/router.js
const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')
export default [
{
path: '/app2',
component: Hey,
name: 'app2.hey'
}
]
app1/router.js
import app2Router from 'app2'
import Home from './views/Home.vue'
export default new Router([
mode: 'history',
...
routes: [
{
path: '/',
name: 'home',
component: Home
},
...app2Router
]
])
By marking the main or module of app2/package.json as router.js instead of the the UMD bundle, you are forcing app1 to build the whole dependency graph and include any dynamic import that is detected. This in turn causes the dependencies to be copied over properly.
You could also achieve the exact same results by using
import app2Router from 'app2/src/router'
Supposedly, this issue is now fixed in Webpack 5 https://github.com/webpack/webpack/issues/11127
My application runs on the subdirectory http://localhost:8080/admin_suffix
suffix is a ENV variable which I can change and define in a .env file.
Once i run the webpack dev server, accessing http://localhost:8080/admin_suffix works.
Clicking on the hyperlinks in the SPA which points other subpaths works too. For example, I can navigate to http://localhost:8080/admin_suffix/subdirectory
However, when i hit reload on http://localhost:8080/admin_suffix/subdirectory, i will get an error "Cannot GET /admin_suffix/subdirectory"
I also cannot enter the subpath into the browser directly to load the page. Only ``http://localhost:8080/admin_suffix` works.
My configuration are as follows:
webpack.base.config.js:
entry: {
main: './src/main',
vendors: './src/vendors'
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true
},
output: {
path: path.join(__dirname, '../dist')
}
webpack.dev.config.js:
module.exports = merge(webpackBaseConfig, {
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
}
});
src/main.js:
const RouterConfig = {
mode: 'history',
routes: Routers,
base: '/admin_suffix/'
}
Enable devServer.historyApiFallback in webpack.base.config.js:
devServer: {
historyApiFallback: true,
// ...
},
This configures webpack-dev-server to fallback to index.html when the route is not found (404).
The Vue app and router are initialized from the main page (index.html), so refreshing the page while on a subroute would normally result in a 404 because the router would not have been setup yet. However, the fallback configuration mentioned above would result in the index.html being served instead, allowing the router to be setup and the subroute to subsequently complete.