I am working in project with Laravel version9.19 and vuejs3.2 + vite but me display this error:
My current project was set up such as screenshot:
I am sharing with you how I have made configuration vite in Laravel: In file vite.config.js:`
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/scss/app.scss",
"resources/js/app.js",
],
refresh: true,
}),
],
});
In view's file app.blade.php, I have added #vite like below:`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel VUE CRUD Application - LaravelTuts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
#vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
#vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
<h1>Hello Sass</h1>
</div>
</body>
</html>
Any idea way me display error above and how I can solve?
Thanks in advance.
I had same problem and installed plugin-vue
please install it by :
npm install #vitejs/plugin-vue
then add it to vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
laravel({
"resources/css/app.css",
"resources/scss/app.scss",
"resources/js/app.js",
refresh: true,
}),
],
});
Hope it works
Related
I am using local vue.js These are my files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="res/vue.js"></script>
<script src="res/vue-router.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app" ></div>
<script type="module" src="App.js"></script>
</body>
</html>
App.js
import Vue from './res/vue.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
{{foo}}
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return{
foo:'Hello vue'
}
}
}
</script>
<style>
</style>
But my index.html shows nothing
You mount your vue instance at the div node which id is "app", but i can't find the "#app" node, so you can resolve that by insert the "#app" node .
index.html:
<body>
<div id="app"></div>
<script type="module" src="App.js"></script>
</body>
Like the Steven suggested you have to compile vue components.
If you dont want to do it that way, below is the the easiet way.
Vue.createApp({
data() {
return {
foo: 'Hello vue',
};
},
}).mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue#next"></script>
<!-- <script src="res/vue-router.js"></script> -->
<title>Vue</title>
</head>
<body>
<div id="app">{{foo}}</div>
<script type="module" src="App.js"></script>
</body>
</html>
You probably need to build it with vue-cli to create a SPA(Single page Application) for your android application
Hi is your import correct? from node_modules it should be import Vue from 'vue' and not import Vue from './res/vue.js' try it
I am trying to integrate jQuery ClockPicker into my react app, but it won't work.
I have possibly tried the all possible ways without success. jQuery itself works well, but the ClockPicker doesn't.
It gives me an error:
Uncaught TypeError: clockpicker.clockpicker is not a function
These are my HTML and CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="The Brring Web Client">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha256-lBtf6tZ+SwE/sNMR7JFtCyD44snM3H2FrkB/W400cJA=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-87DrmpqHRiY8hPLIr7ByqhPIywuSsjuQAfMXAE0sMUpY3BM7nXjf+mLIUSvhDArs" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
This is the function where I initialize the ClockPicker:
import * as $ from "jquery";
class example {
... other staff
initializeTimePicker() {
jQuery(function($) {
let clockpicker = $(".clockpicker");
clockpicker.clockpicker();
});
}
}
export default new CallUtil();
And finally, I call this function in another component's componentDidMount lifecycle:
import CallUtil from 'some_folder'
componentDidMount(): void {
CallUtil.initializeTimePicker();
}
What have I done wrong?
This question already has answers here:
Invariant Violation: _registerComponent(...): Target container is not a DOM element
(16 answers)
Closed 4 years ago.
I recently created my webpack config file:
const path = require("path");
const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "/client/dist");
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
filename: "bundle.js",
path: DIST_DIR
},
module: {
rules: [
{
test: /\.jsx?$/,
include: SRC_DIR,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
mode: "development"
};
This one works well and is bundling the jsx file:
import React from "react";
import ReactDOM from "react-dom";
class MainApp extends React.Component {
render() {
return (
<div className="content">
<h1>Hello World</h1>
</div>
);
}
}
ReactDOM.render(<MainApp />, document.getElementById("app"));
And now inside the html file I included the bundle file with the div id app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>REACT TEST</title>
<script src="./bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
When I tried to run this it seems it did not work and I got the error:
Uncaught Error: Target container is not a DOM element.
at invariant (invariant.js:42)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17116)
at Object.render (react-dom.development.js:17195)
at eval (index.jsx:48)
at Object../client/src/index.jsx (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
invariant # invariant.js:42
What am I missing here? Why I am getting this error?
The way you have it it runs before you even have DOM.
You should include it in the bottom like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>REACT TEST</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
You are inserting your React script before the initialization of the container. Make it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>REACT TEST</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
I have a React app and I'm using a template for this app. This is my react app's folder structure:
|app
|-client
|---assets
|---component
|-node_modules
|-server
|---index.html
|---index.js
In my server/index.html there are many static files such as css, js and img.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/assets/img/logo-fav.png">
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css"/>
</head>
<body>
<div class="be-wrapper" id="root">
</div>
<script src="bundle.js"></script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
Plugins.init();
});
</script>
</body>
</html>
How to handle those files in a React app? Meanwhile in a Node JS app we use this to handle static files:
app.use('/assets',express.static(__dirname + '/assets'));
the static file isn't loaded and not found if i type eg:
localhost:3000/assets/js/jquery, the file is not available
and this is my server/index.js file:
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
let app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));
app.use('/assets',express.static(__dirname + '/assets'));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname,'../index.html'));
})
app.listen(3000, () => console.log('Running port 3000'));
Thank you.
You can put static files as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Container Components Example</title>
<link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/css/bootstrap.theme.min.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div id="root"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
Source: https://github.com/johibkhan2/react-sample-app/blob/master/index.html
I have installed this npm module called ng2-dnd,
according to its wiki page, i needed to make changes in systemjs in order to use it in my application.
Below is my code:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RapidNg2</title>
<base href="/">
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Angular 2 JumpStart">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/project-manager.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aweso me/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/styles/animate.css">
<link rel="stylesheet" href="assets/styles/angular-csp.css">
<link rel="stylesheet" href="assets/styles/cool-list.css">
<link rel="stylesheet" href="assets/styles/project-manager.css">
<link rel="stylesheet" href="assets/styles/sidebar.css">
<link rel="stylesheet" href="assets/styles/default.css">
<link rel="stylesheet" href="assets/styles/rapid-drag-drop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<rapid-ng2-app>Loading...</rapid-ng2-app>
{{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
so I configured my systemjs as following:
system-config.ts
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'ng2-dnd',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
'app/+project-manager',
'app/+designer',
'app/+project-manager/pages/pages',
'app/+project-manager/projects/projects',
'app/+project-manager/workspaces/workspaces',
'app/+project-manager/pages',
'app/+project-manager/projects',
'app/+project-manager/workspaces',
'app/components/icici-body',
'app/components/icici-heading',
'app/components/icici-footer',
'app/components/button',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
if(barrelName=='ng2-dnd'){
cliSystemConfigPackages[barrelName] = { main: 'ng2-dnd' };
}else{
cliSystemConfigPackages[barrelName] = { main: 'index' };
}
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
// 'ng2-dnd': '../node_modules/ng2-dnd/ng2-dnd.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
But I am getting below error in my browser:
zone.js:101 GET http://localhost:4200/ng2-dnd/ng2-dnd.js 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-dnd/ng2-dnd.js
any suggestions?
Try this,
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'ng2-dnd': '../node_modules/ng2-dnd'
},
packages: cliSystemConfigPackages
});