i use requirejs load datatable plug,i got an error $().dataTable()is not function,
this is my js code:
define(function() {
requirejs.config({
baseUrl: "/Scripts",
paths: {
"jquery": "/Libs/jquery.min"
"jquery.datatable": "/Libs/dataTable/js/jquery.dataTables.min"
},
map: {
"*": {
"css": "/Libs/cssjs/css.js"
}
},
shim: {
"jquery": {
exports: "$"
},
"jquery.datatable":"jquery"
},
waitSeconds: 15,
});})
this is page js
define(["jquery.datatable"], function() {
$(function() {
$("#example").dataTable();
});
});
when i run it ,i got an error on my console :
TypeError: $(...).dataTable is not a function
jquery version is v1.11.0
DataTables version is v1.10.7
RequireJS version is v2.1.11
can u help me? thanks
i solved this question
update the requirejs config like this :
requirejs.config({
baseUrl: "/Scripts",
paths: {
"jquery": "/Libs/jquery.min",
"datatables": "/Libs/dataTable/js/jquery.dataTables.min"
},
map: {
"*": {
"css": "/Libs/cssjs/css.js"
}
},
shim: {
"jquery": {
exports: "$"
},
"datatables":"jquery"
},
waitSeconds: 15,
});})
Note:
the datatables's path,the paths name must be datatables.
Related
I'm implementing fullcalendar in my project that has Laravel 9 and Vue 3.
I think it is not loading the css as the on-screen calendar is looking like this: Calendar Image.
I have already made several settings. Even the Vue part is working because the calendar is working.
Below in the images are the settings that are today.
package.json
{
"private": true,
"scripts": {
"dev": "vite --host",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"bootstrap": "^4.6.2",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.32.11",
"script-loader": "^0.7.2",
"vite": "^3.0.0"
},
"dependencies": {
"#fullcalendar/core": "^5.11.3",
"#fullcalendar/daygrid": "^5.11.3",
"#fullcalendar/interaction": "^5.11.3",
"#fullcalendar/list": "^5.11.3",
"#fullcalendar/timegrid": "^5.11.3",
"#fullcalendar/vue3": "^5.11.2",
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.1.2",
"laravel-echo": "^1.9.0",
"socket.io-client": "^2.3.0",
"vue": "^3.2.41",
"vue-toastification": "^2.0.0-rc.5"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import fs from 'fs';
const host = 'site.com.br';
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
}
}
})
],
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync('C:\\laragon\\etc\\ssl\\privada25296.key'),
cert: fs.readFileSync('C:\\laragon\\etc\\ssl\\certificado25296.crt'),
},
},
});
index.vue
<script>
import { useToast } from "vue-toastification";
import '#fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '#fullcalendar/vue3'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
}
}
},
mounted() {
const toast = useToast();
this.loadUserCustomers();
Echo.channel('agendamentos_database_user_customer_created')
.listen('UserCustomerCreated', (e) => {
toast.success('Novo cliente vinculado!')
});
},
methods: {
loadUserCustomers() {
axios.get('/api/calendar')
.then(response => {
console.log( response.data.data );
//this.userCustomers = response.data
})
.catch(response => {
console.log('Erro')
})
}
},
}
In the fullcalendar documentation, the following is mentioned about CSS.
CSS: All of FullCalendar’s CSS will be automatically loaded as long as your build system is able to process .css file imports. See Initializing with an ES6 Build System for more information on configuring your build system. https://fullcalendar.io/docs/vue#:~:text=ticket%20%23152.-,CSS,-All%20of%20FullCalendar%E2%80%99s
When I access link about ES6 Build System, it is described that I need to use webpack, and in the Laravel application, vite is used.
Can anyone help me with this problem please?
I solved it by loading allocate the size of the calendar
hope this solve your problem and I did it with the cdn
calendar.render();
calendar.setOption('height', 700);
All css and image links are with a _nuxt aditional in their path like /_nuxt/_nuxt/home1.5334375a.webp
Here is my last modifications to nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
buildModules: ["#nuxtjs/google-fonts"],
modules: ["nuxt-windicss", "#vueuse/nuxt", "#pinia/nuxt"],
css: ["assets/styles/custom.css"],
runtimeConfig: {
apiSecret: process.env.NUXT_PUBLIC_BASE_URL,
public: {
BASE_URL: process.env.NUXT_PUBLIC_BASE_URL,
},
},
plugins: [
{ src: "~/plugins/persistedState.ts", ssr: false, mode: "client" },
{ src: "~/plugins/maska.ts", ssr: false, mode: "client" },
],
alias: {
assets: "/assets",
'#vue/devtools-api': '#vue/devtools-api',
}
});
Updating:
I changed the dependencies and the problem gone away:
"dependencies": {
"#nuxt/kit": "3.0.0-rc.4",
"#nuxtjs/google-fonts": "^3.0.0-0",
"#vue/test-utils": "^2.0.2",
"add": "^2.0.6",
"c8": "^7.11.0",
"maska": "^1.5.0",
"swiper": "^8.3.0",
"pinia": "^2.0.14",
"vitest": "^0.16.0",
"vue": "^3.2.37",
"vue-router": "4",
"boxicons": "^2.1.2"
}
I removed Vite dependecies
I am trying to compile my ES6+ code to vanilla js using Grunt task runner.
I have purposely chosen Grunt over webpack and gulp because I just wanted to minify my js files.
I have successfully compiled my ES6 code to vanilla after running the code got an error saying generatorRuntime is not defined. After analysing the issue I could that my async and await code is giving the issue after it gets converted to vanilla js.
I have my code snippet of my gruntfile.js and package.json.
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
"expand": true,
"cwd": "./htdocs/js/src",
"src": ["**/*.js"],
"dest": "./htdocs/js/compiled/",
"ext": ".js"
}]
}
},
//uglify will minify all the js files in js/src folder.
uglify: {
all_src : {
options : {
sourceMap : true
},
files: [{
expand: true,
flatten: true,
cwd:'./htdocs/js/compiled',
src: '**/*.js',
dest: './htdocs/js/dist',
ext: '.min.js'
}]
}
}
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
Package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-latest": "^6.24.1",
"grunt": "^1.1.0",
"grunt-babel": "^7.0.0",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
},
"babel": {
"presets": [
"latest"
]
}
That's probably because the polyfills aren't getting shipped in your bundle. In your babel.options object inside Gruntfile, you can set
presets: [['#babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]]
and don't forget to include corejs as dependency in your project.
npm install core-js --save
I've been looking over the docs and checking other people's questions but I can't find the simple answer to how to compile all my sass down to a simple css file and specify the directory I want the resulting css file to output to.
For quick context:
I have a public directory with a stylesheets directory and a build directory in it. webpack compiles the app into build, and I'd like to have the sass compile style.css into the stylesheets directory.
Here's a screenshot of my public directory:
public dir img
I'd like to be able to do something like this in my webpack.config.js (only showing pertinent code for brevity):
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');
inside module loaders:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
In plugins:
plugins: [
.
.
.
cssOutput,
],
I'd like to be able to access the output file with this line in my index.html file located in the public directory:
<link rel="stylesheet" href="/stylesheets/style.css" />
I'm currently doing this using gulp and it works fine, I'm just trying to transition everything into webpack. Any help would be greatly appreciated!
Turns out you can just set the output file like this:
const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });
I made the noob mistake of forgetting to add:
require('_scss/style.scss');
in my index.jsx file.
For anyone who runs into this issue, I still had trouble with fonts and images, so inside module loaders in the webpack.config.js I had to add:
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'file',
},
and since this output everything into my build directory, I just changed the css to output everything in the build directory as well to prevent path errors. I changed it to this:
const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });
Hopefully this helps someone else who runs into this type of issue!
Work for Me::
webpack.config.js
module.exports = {
entry: ['./src/app.ts', './src/sass/style.scss'],
module:{
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src', 'src/class')]
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '/css/[name].css'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader?-url'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
],
include: [path.resolve(__dirname, 'src/sass')]
}
]
},
output: {
filename: 'js/app.js',
path: path.resolve(__dirname, 'public')
}
}
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {}
}
}
package.json
{
"name": "tsscript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"nov": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.5",
"css": "^3.0.0",
"css-loader": "^3.6.0",
"extract-loader": "^5.1.0",
"postcss-loader": "^3.0.0",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.0",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
}
Directory Snap:
Have you take a look at https://www.npmjs.com/package/extract-text-webpack-plugin?
you'll probably need it.
Recent solution, you can use mini-css-extract-plugin, css-loader, and sass-loader. mini-css-extract-plugin can create a CSS file per JS file which contains CSS.
Install dependencies:
npm i -D mini-css-extract-plugin css-loader sass-loader
For example, your main JS file that includes a style is ./src/index.js:
...
import './src/style.scss';
...
Configure webpack.config.js:
...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...
entry: {
main: './src/index.js',
},
plugins: [
new MiniCssExtractPlugin(),
],
...
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
...
]
},
resolve: {
modules: ["node_modules", path.resolve(__dirname, "src")],
extensions: ['.js', '.scss', ...]
}
}
Then, you can check your output directory, there will be main.css. The plugin set default name to [name].css (entry name).
I've add sass-brunch to my project, and when i start "brunch watch", brunch compile my JS fully but my scss is just "compiled in XXXms".
I don't see my app.min.css in public file, unlike JS which compiles perfectly.
My brunch-config.js :
module.exports = {
paths: {
watched: 'private'
},
files: {
javascripts: {
joinTo: 'js/app.min.js'
},
stylesheets: {
joinTo: 'css/app.min.css'
}
},
plugins: {
sass: {
options: {
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
]
}
}
}
}
Do you have any idea ?
Thank you !