I am trying to import the following three js libraries. They all work except for crossfilter.js. Can anyone tell me what I am doing wrong?
import jinja2
from IPython.display import display, Javascript, HTML
%%javascript
require.config({
paths: {
d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
crossfilter: '//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min',
dc: '//cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min'
}
});
dc = jinja2.Template(
"""
require(["d3","crossfilter","dc"], function(d3,crossfilter,dc) {
console.log(d3);
console.log(crossfilter);
console.log(dc);
});
""")
display(Javascript(dc.render()))
Output I am getting:
Object
Undefined
Object
Crossfilter does not (yet) support requireJS:
https://github.com/square/crossfilter/issues/114
The ticket shows how to use a shim config to load it.
Related
In my vue3+vite project I'm using the official fontawesome vue3 package (see use with vue).
In order to enable tree-shaking you need to statically load the necessary icons (or possibly all of them) in advance using library.add. See for instance the following App.vue
<script setup>
import { ref, computed } from "vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { definition } from "#fortawesome/free-solid-svg-icons/faTruck";
library.add(definition);
const icon = ref("");
const showIcon = () => { icon.value = `fa-solid fa-truck`; };
</script>
<template>
<button #click="showIcon">Show Truck Icon</button>
<div v-if="icon">
<font-awesome-icon :icon="icon" />
</div>
</template>
here we statically load the truck icon and when you click the button the icon shows up.
What I was trying to do is loading the icons on demand (in this case, only when the button is clicked), using the following code:
<script setup>
import { ref, computed } from "vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
const modules = import.meta.glob(
"../node_modules/#fortawesome/free-solid-svg-icons/faTruck.js",
{ eager: false, import: "definition" }
);
const icon = ref("");
const showIcon = () => {
Object.values(modules)[0]().then((elem) => {
library.add(elem);
icon.value = `fa-solid fa-truck`;
});
};
</script>
<template>
<button #click="showIcon">Show Truck Icon</button>
<div v-if="icon">
<font-awesome-icon :icon="icon" />
</div>
</template>
But this doesn't work in "develpment" (npm run dev):
it makes a call to http://localhost:5173/node_modules/#fortawesome/free-solid-svg-icons/faTruck.js
then raises an error: Uncaught (in promise) ReferenceError: exports is not defined
while it works fine when the bundle is built (npm run build then for example serve the dist folder with http-server)
I suspect the problem is related to the fact that in development mode faTruck.js module is used "as is", while it is transpiled in the build phase.
Is there a solution?
NOTE:
The example contains only the "truck" because is over-simplified, but actually any icon should be loaded; i.e. the actual path in import.meta.glob should be ../node_modules/#fortawesome/free-solid-svg-icons/fa*.js
Full steps to reproduce the issue:
npm create vue#3 # accepts all defaults
cd vue-project
npm i #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/vue-fontawesome
# replace src/App.vue with the one indicated above
# run in dev with
npm run dev
# or build for prod and then expose using http-server
npm run build
npx http-server dist
Explaination
According to the Vite pre-bundling docs:
Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first
But when you use glob import with dynamic variables, your modules will not be pre-bundled. Since #fortawesome/free-solid-svg-icons/faTruck.js is a CommonJS file, it can not be used directly in ESM. And you are right that Vite does transform the module on production build, so it works well on production.
You may think about the optimizeDeps.include option but unfortunately, it does not help in this situation. Even if you add your module to the include list, Vite does pre-bundle your module but it will not use that pre-bundled file for your dynamic import. It still uses the file in node_modules/#fortawesome/free-solid-svg-icons/ folder.
I'm afraid that there is no straightforward solution to your problem. See this issue
Workaround
Just make it work differently on dev and prod.
const showIcon = async () => {
let x = 'faTruck'
let definition
if (import.meta.env.PROD) {
const iconModule = await import(
`../node_modules/#fortawesome/free-solid-svg-icons/${x}.js`
)
definition = iconModule.definition
} else {
const iconModule = await import(`#fortawesome/free-solid-svg-icons`)
definition = iconModule[x]
}
library.add(definition)
icon.value = `fa-solid fa-truck`
}
With this code, you still have the benefit of lazy loading on production and a smooth dev server to work
Another approach
Hard-coding your import list like so:
const showIcon = async (iconName) => {
const listImport = {
faTruck: () => import(`#fortawesome/free-solid-svg-icons/faTruck`),
faWarning: () => import(`#fortawesome/free-solid-svg-icons/faWarning`),
}
const iconModule = await listImport[iconName]()
console.log('iconModule', iconModule)
library.add(iconModule.definition)
}
But I bet you have hundreds of icons in your list so it hardly is an option
I find it very repetitive to have to import vue things like:
import { ref, computed } from 'vue'
In the script setup section.
Would it be a bad practice to, let's say assign vue to a special character, like $ and then use it to access these like
let drawer = $.ref(null);
If so what would be the reasoning behind?
You can use the experimental version of vue3:
// vite.config.js
export default {
plugins: [
vue({
reactivityTransform: true
})
]
}
after that there is an auto import available and you don't have to write .value if using a $ref or $computed.
Because $ref() is a macro and not a runtime API, it doesn't need to be imported from vue.
guys
I'm trying to build my react project, but it keeps saying
'Attempted import error: 'styles' is not exported from './styles.module.scss' (imported as 'styles').'
So, I guess I've got wrong settings in my webpack config file but have no idea what's wrong in there. I'm using css module so have tried this way https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules, but didn't work for me.
This is the one of the source file I'm using styles
import styles from "./styles.scss";
import { withRouter } from "react-router";
const ArrowBack = ({ history, onClick }) => {
return (
<button type="button" onClick={onClick || history.goBack} className={styles.arrowBack}>
<span className={styles.bar}></span>
</button>
);
};
export default withRouter(ArrowBack);
Here is my files
webpack config
https://gist.github.com/bbatta38/45695862bdde7928b788420793c006b6
package json
https://gist.github.com/bbatta38/4b91a2b84aaa237b54277b78525f8473
build js
https://gist.github.com/bbatta38/e18792375a107afcfedfeba48bc3fe1e
It's been already two days to find out any ways to make it work. Please help me if you have any idea to resolve this error.
Try
import styles from "./styles.module.scss";
It seems you're missing the 'module' in the file name.
since Gatsby v3 you need to import the style like this:
import * as styles from './styles.module.scss'
<template>
<ConfigProvider :locale="getAntdLocale">
<AppProvider>
<RouterView />
</AppProvider>
</ConfigProvider>
</template>
<script lang="ts" setup>
import { ConfigProvider } from 'ant-design-vue';
import { AppProvider } from '/#/components/Application';
import { useTitle } from '/#/hooks/web/useTitle';
import { useLocale } from '/#/locales/useLocale';
// support Multi-language
const { getAntdLocale } = useLocale();
// Listening to page changes and dynamically changing site titles
useTitle();
</script>
Vetur shows this warning:
'ConfigProvider' is declared but its value is never read.Vetur(6133)
'getAntdLocale' is declared but its value is never read.Vetur(6133)
It seems the template can't read the script with setup syntax variable. How can I avoid this warning?
Vetur has no support for script setup yet - it is planned for v0.37.0 (current version is 0.34.1)
As of now, Volar is better choice for using script setup and TS and is recommended even by Evan You (Vue creator). I'm using it and it is really great!
UPDATE:
And with Vue 3 as the New Default, Volar is recommended in official Vue 3 docs
I'm having a problem using RxJS with Angular 2. Most of methods suggested from Typescript definition file are not defined on my Observable object like...
then I figured out, that methods does not exists on the Observable prototype.
I know a lot of things changed from version 4 to 5,so do I miss something?
Browserify added it for me...
Without seeing your actual code, I can't tell you exactly what to add to fix it.
But the general problem is this: RxJS 5 is not included with Angular 2 any longer now that it has entered the Beta stage. You will need to import either the operator(s) you want, or import them all. The import statements looks like this:
import 'rxjs/add/operator/map'; // imports just map
import 'rxjs/add/operator/mergeMap'; // just mergeMap
import 'rxjs/add/operator/switchMap'; // just switchMap
import {delay} from 'rxjs/operator/delay'; // just delay
or like
import 'rxjs/Rx'; // import everything
To determine the path to your desired module, look at the source tree. Every import with add will add properties to Observable or Observable.prototype. Without add, you'd need to do import {foo} from 'rxjs/path/to/foo'.
You will also need to make sure that RxJS is being brought into the project correctly. Something like this would go into your index.html file:
System.config({
map: {
'rxjs': 'node_modules/rxjs' // this tells the app where to find the above import statement code
},
packages: {
'app': {defaultExtension: 'js'}, // if your app in the `app` folder
'rxjs': {defaultExtension: 'js'}
}
});
System.import('app/app'); // main file is `app/app.ts`
If you use Webpack to build the Angular 2 app like in this Github project (like I did), then you don't need that System stuff and the imports should do it.
Yes, in Angular 2.0 you have to include the operators/observables you need.
I do it like this:
import 'rxjs/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/observable/interval';
import 'rxjs/observable/forkJoin';
import 'rxjs/observable/fromEvent';
However, you also need to configure this in System.js
System.config({
defaultJSExtensions: true,
paths: {
'rxjs/observable/*' : './node_modules/rxjs/add/observable/*.js',
'rxjs/operator/*' : './node_modules/rxjs/add/operator/*.js',
'rxjs/*' : './node_modules/rxjs/*.js'
}
});
Here is working code: https://github.com/thelgevold/angular-2-samples
I have a JSPM setup in my project, so adding rxjs to the path section was not enough.
jspm added the following to my SystemJS configuration (map section):
"npm:angular2#2.0.0-beta.6": {
"crypto": "github:jspm/nodelibs-crypto#0.1.0",
"es6-promise": "npm:es6-promise#3.1.2",
"es6-shim": "npm:es6-shim#0.33.13",
"process": "github:jspm/nodelibs-process#0.1.2",
"reflect-metadata": "npm:reflect-metadata#0.1.2",
"rxjs": "npm:rxjs#5.0.0-beta.0",
"zone.js": "npm:zone.js#0.5.14"
},
So if you use jspm make sure you remove the rxjs mapping above, otherwise some rxjs files will be loaded twice, once via jspm_packages and once via node_modules.