I am using JSPM and I am new to ES6 as well
I am wondering what is correct way to make imports when they are conditional in ES6
Method-1:
// should load only module required
import $ from 'jquery';
import 'bootstrap';
if(!$.core.login){
System.import('lib/log-in');
}else{
System.import('lib/logged-in');
}
Method-2:
//load both at once and consume which ever is valid
import $ from 'jquery';
import 'bootstrap';
import {loginPlz} from 'lib/log-in';
import {alreadyIn} from 'lib/logged-in';
if(!$.core.login){
loginPlz();
}else{
alreadyIn();
}
I would say (per this)
import $ from 'jquery';
import 'bootstrap';
if(!$.core.login){
import('./lib/log-in').then(loginPlz => loginPlz());
}else{
import('./lib/logged-in').then(alreadyIn => alreadyIn());
}
Related
I am using the following polyfills and results in the type error, Blocked on how to resolve this because i am relatively new to pollyfills
I did try toggling b/w es6 and core-js symbols, If i use the core-js/symbols instead of es6 it results in breaking other devices
// Array
import "./Array.from";
import "mdn-polyfills/Array.prototype.find";
import "mdn-polyfills/Array.prototype.includes";
import "./Array.prototype.flat";
import "core-js/proposals/relative-indexing-method";
import "core-js/actual/array/find-index";
import "core-js/actual/array/iterator";
// Promise
import "promise-polyfill/src/polyfill";
import "whatwg-fetch";
import "./Promise.allSettled";
// WeakMap
import "weakmap-polyfill";
import "core-js/actual/weak-set";
// Symbol
import "es6-symbol/implement";
import "./iterators-polyfill";
import "es6-map/implement";
import "es6-set/implement";
If es6-symbol is removed and core-js/actual/symbol is added
If core-js/actual/symbol is removed and es6-symbol is added
I started a new Laravel project and now Laravel Mix has been replaced with Vite.
I've installed Alpine.js and launched it in the bootstrap.js file but, Alpine.js not recognized in the Laravel blade files and the other JS files.
vite.config
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from "path";
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve:{
alias:{
'~alpine':path.resolve(__dirname,'node_modules/alpinejs'),
}
}
});
enter image description here
app.js
import './bootstrap';
import alpine from "./alpinejs/src/alpine";
console.log(alpine.version);
enter image description here
I add Alpine like the following.
bootstrap.js
import _ from 'lodash';
window._ = _;
import $ from 'jquery';
window.jQuery = window.$ = $
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
I downloaded a template and put all the CSS in a folder and imported it into the App.js file, and now I want to import the JavaScript files, but it gives an error, I even used / * global jQuery * / and put it in the index.js file. but it still gives an error
Is it possible to import JS file at all? If so, thank you for your reply
Error image:Error Text
UPDATE
in App.js
import './App.css';
import './dist/css/adminlte.min.css';
import './dist/css/bootstrap-rtl.min.css';
import './dist/css/custom-style.css';
import './plugins/font-awesome/css/font-awesome.min.css';
import 'jquery';
import jQuery from 'jquery';
import $ from 'jquery';
import './dist/js/adminlte.js';
You can generally just import your JS Files like any other React Component.
JS: export function myfunc(){return "Your JS stuff here")
React: import {myfunc} from "wherever"
I created a react app using react-create-app. Now I am not able to import external js and bootstrap files.
index.js
import './assets/css/style.css';
import './assets/css/bootstrap-social.css';
import './assets/css/bootstrap.css';
import './assets/css/responsive.css';
import './assets/css/theme-default.css';
import './assets/css/jquery-ui.css';
import './assets/css/main.css';
import './assets/css/font-awesome.css';
// const $ = require('./assets/js/jquery.min.js');
// global.jQuery = $
// const app = require('./assets/js/bootstrap.min.js');
I have purchased s theme. Not I want to install external jquery and bootstrap. Note: css import working fine.
I am trying to figure out why TypeScript is not picking up the "default export" of react. E.g. in my JavScript files I was using:
import React from 'react';
import ReactDOM from 'react-dom';
But in typescript I have to use (after some googling):
import * as React from "react"
import * as ReactDOM from "react-dom"
I am just starting out with a fresh project after being unable to import my existing project and g et VS2k15 to compile it.
What is the difference, if any? Is there a way to specify a "Module 'react' has no default export".
I can see in the React file there is
declare module "react" {
export = __React;
}
Is that not considered a default export
I also tried
import __React from "react"
but get the same error.
A default export is just giving one of the exports the alias "default". You can do this using the following syntax:
export default function __React {
//do work
}
You can also use the following syntax:
function __React {
//do work
}
export {__React as default};