I have a file called src/services/data.json which I use to populate some data for one of my services. I use the following
import embeddedData from "./data.json";
to import the file. When I generate the distribution, as expected the contents are merged in so they're not in the resulting dist folder
Is there something I can do to the webpack configuration so it will export JSON data files? (I'm using vue with TypeScript for my framework)
I would go with Dynamic Imports. Webpack will create separate files for such imports by default. In runtime those files are asynchronously loaded. Webpack
transforms import() calls to Promises so you can use await/async as well.
Related
I have a FastAPI web app, where I would like to use a templating language.
Right now, in order to use jinja2 I have to indicate where the templates folder is located by setting a templates variable like this:
templates = Jinja2Templates(directory="templates")
I also have several view files for various pages and purposes, like home.py, about.py, db.py etc.
If I set up a templates variable once in main.py and then import it into view files like this:
from main import templates
I get all kind of circular import errors. So I have to set up a templates variable in every view file separately which is not optimal.
How can I set templates location once in the main.py and then make all view files aware of this location?
There are many ways you can solve this - move the template configuration to a separate file instead of having it in main (templating.py or define it in __init__.py in your views directory) so that you can import it from that module instead. A plain import would work in that case.
You can also use the dependency injection feature in FastAPI to inject the templating context in a view function.
Set it up as a Depends construct in a separate file (dependencies.py, app_services.py, __init__.py or wherever):
def get_templates():
return Jinja2Templates(directory=...)
And then in your views:
from dependencies import get_templates
...
#router.get('...')
async def display_xyz(templates: Jinja2Templates = Depends(get_templates))
import ResumeHTML from "resume.html"
const ReactComponent = () => {
return (<a href={ResumeHTML}>View Resume</a>)
}
Failed to compile
./src/assets/resume.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
The error happens because Webpack does not know how to handle import of .html files inside your javascript module.
If you have a webpack configuration in your project you can add a loader for html files, probably the file-loader that copies your file in the public directory and replace it with a link inside your javascript module.
If you do not have access to your webpack configuration (ex. if you're using a non ejected version of Create React App), you should instead make your html file public and hardcode the link in your javascript module without importing the file.
I have a styles.css file and I need to load it from a cljs to pass it as a props to a react lib.
The import in node is:
import styles from './styles.css'
Is it possible to do this in ClojureScript with shadow-cljs?
Importing styles.css in webpack is handled by the style-loader which you can sort of hook up by following the webpack guide and exporting things to global objects.
ClojureScript itself (or shadow-cljs) does not support anything in that regard but you could possibly create something similar using macros.
Will importing local json/text like the following I have written below be async or sync in Create-React-App?
import SampleLocalJson from './sample/sampleJson.json'
This depends on your environment. If you are using webpack >=v2.0.0 (which you probably do if the above line works) this will be done automatically by webpack json-loader during build time and is therefore sync.
If you are not on webpack >=v2.0.0 there can be multiple issues with directly importing json. Here is a good thread about it: How to import a json file in ecmascript 6?
UPDATE
If you are interested in lazy loading the json, there is support for that built in to webpack. They have a good example in their documentation on that.
This is handled by webpack during the build time. That JSON becomes part of your bundle file shipped to the browser.
I've created a vue.js with typescript app using vue-cli 3 and selecting the typescript option.
Now I'm trying to import a .json file:
import * as config from './config.json';
But keep getting the compiler error:
Version: typescript
2.7.17:25, tslint 5.9.1
Cannot find module './config.json'.
The config.json file is right next to the .ts that is trying to load it.
Is there any additional config I need to add to load .json with the vue-cli templates?
Add "resolveJsonModule": true to your tsconfig.json
There are a few ways to solve this. One would be to use require() instead of import for non-js files:
const config = require('./config.json')
You can also create a .d.ts file with a wildcard module declaration (under "Wildcard module declarations") which will allow you to import JS files. You can put it anywhere, including it the same as you would any .ts file.
// json-module.d.ts
declare module '*.json' {
const data: any
export default data
}
// since we use a default export, we now import it like this
import config from './config.json'