I am new to vite, I did install, wrote some code, did npm run dev and npm run build.
Everything went fine until uploading to my server.
index.html:
<script type="module" crossorigin src="/assets/index.a673cca3.js"></script>
Running from live server, I get these errors
Failed to load resource: net::ERR_FAILED index.4293b7ae.css:1
Failed to load resource: net::ERR_FILE_NOT_FOUND index.a673cca3.js
The filenames are correct and they are where are suposed to be.
What gives?
The problem is that all files on the public directory will resolve to the root. I was uploading to a directory (www. whatever.com/someproject/), so the solution was to specify the correct path on the vite.config.js
// vite.config.js
export default {
base: '/someproject/'
}
// if uploading to a subdomain it is ok to no specify any dir:
export default {
base: '/'
}
// using a relative path will work on any dir:
export default {
base: './'
}
Related
I'v already migrated from webpack to vite and used vite pwa plugin to register a service worker.
My problem is that when I try to use a custom path for service worker, Vite will work fine in production, but in development cause 404 error.
here is my VitePwa vite.config.js:
VitePWA({
srcDir: 'src',
filename: 'sw.js',
devOptions: {
enabled: true,
},
strategies: 'injectManifest',
injectManifest: {
injectionPoint: undefined
}
}),
I already got that, in the development environment, vite pwa plugin is looking for sw.js in the public directory but I want it to get it from src
I got the solution
First, setting type as module is needed in vitePwaPlugin config in devOptions:
devOptions: {
enabled: true,
type: 'module',
},
and vitePwaPlugin will try to install dev-sw.js?dev-sw file as service worker
Second, for handling registeration I used registerSW from virtual:pwa-register
import { registerSW } from 'virtual:pwa-register';
if ('serviceWorker' in navigator) {
registerSW();
}
Module not found: Error: Can't resolve 'process/browser' in '/Users/nigelng/oxpay-merchant-portal-fe/node_modules/xlsx'
Did you mean 'browser.js'?
I have installed xlsx 0.18.5 npm package to export xlsx files, I found out that's a webpack issue (https://github.com/SheetJS/sheetjs/issues/2527), but the solutions didn't work for me.
do anyone experience the same error?
The way I fixed this was by using the package #craco/craco so you can manually change the webpack config file without ejecting create-react-app (since that is permanent). Once craco is installed create a file in the root directory named craco.config.js and then copy and paste this configuration, should fix your problem:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
}
}
};
Make sure to change your start script to "craco start" and you should be off to the races.
So I'm developing a chrome extension with React. Everything works fine, but every time a change is made, I have to rebuild the extension with:
npm run build
...and then go back into my browser and load the extension with the build. This works fine, as aforementioned, but it's time consuming, and I feel that there's a better way.
I can't test in-browser because I'm using Chrome APIs (storage sync, etc.)
Is there any other way to test? Or do I have to build every time?
Use rollup-plugin-chrome-extension.
npm init vite#latest
npm i rollup-plugin-chrome-extension#beta -D
Update these files
// vite.config.js
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'
export default defineConfig({
plugins: [react(), chromeExtension({ manifest })],
});
// manifest.json
{
"manifest_version": 3,
"name": "Rpce React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}
Then run npm run dev
Go to chrome://extensions in your browser and drag the dist folder from your project into the window. Start developing with hot reloading.
In my react project a hard refresh of a nested path does not work. Then snowpack config tries to load from the folder "dist" and cannot serve the page.
config like in snowpack docu:
{
mount: {
public: '/',
src: '/_dist_',
},
...
}
error
http://localhost:3000/myfolder/id
GET http://localhost:3000/myfolder/_dist_/index.js net::ERR_ABORTED 404 (Not Found)
I have a strange problem, I was wondering if anyone has experienced this. I have webpack in my app to bundle, serve and everything in between. I have noticed that when I compile and run webpack-devserver from my gulp file everything goes as expected and in my terminal I get the following:
webpack: Compiled successfully.
2017-11-30T11:46:05.288Z - error:
[Browsersync] Proxying: http://localhost:3001
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3002
External: http://10.101.51.117:3002
--------------------------------------
UI: http://localhost:3003
UI External: http://10.101.51.117:3003
--------------------------------------
Now when I access my app via 'localhost' no Favicon is shown in the browser tab for that page, there is no 404 in the console and there is no request for the favicon in the Developer Tools Network Tab? Now should I use the external URL and type http://10.101.51.117:3002 into the browser the Favicon is there in the page tab however there is no request for the favicon in the Developer Tools Network Tab.
Now when I make a direct call in the browser to the favicon to http://localhost:3002/assets/favicon.ico the favicon is served in the browser window so it seems like server is bundling the Favicon?
In my HTML I have the tag <link rel="shortcut icon" href="assets/favicon.ico"> nothing strange there and in my webpack.common.js file I have the following (I have removed some items here for simplicity)
module.exports = {
// lots of things here..
module: {
rules: [
// stuff here has been removed
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.(ico)$/,
use: 'file-loader?name=assets/[name].[ext]'
},
I can't think what or why the favicon isn't being shown in the tab when I use the localhost URL? If anyone has experienced this and resolved the issue and advice would be appreciated.
Please note that the Favicon is not cached from before as I have changed the favicon name, location and I cleared the browser cache.
If you are using HtmlWebpackPlugin then you can include favicon: './src/assets/favicon.ico', property there.
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html',
favicon: './src/assets/favicon.ico',
filename: './index.html',
}),
],
BTW - starting from Chrome 80 you can use favicon.svg favicons as well.
Apparently your favicon should work but doesn't. Two things you may want to try:
Favicon caching is VERY nasty. I suggest you to test your favicon with a browser you normally don't use (so it didn't cache your icon).
Run the favicon checker. As your site is hosted locally, you will have to use ngrok to make is accessible from outside.
Disclosure: I'm the author of RealFaviconGenerator
I would use the file loader like this:
Install the package
npm i --save-dev file-loader
Then add the following to your webpack config (default webpack.config.js)
{
test: /\.(png|svg|jpg|gif|ico)$/,
use: ['file-loader?name=[name].[ext]']
}
This should move the files to your dist folder.
How about copying favicon.ico by using copy-webpack-plugin.
// File: webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
...
plugins: [
new CopyPlugin({
patterns: [
{ from: "favicon.ico" },
],
}),
]
}
Don't forget to reload browser page ignoring caches.