since installing typography.js I get this error:
error There was an error compiling the html.js component for the development server.
14 | // Create family + styles string
15 | var fontsStr = '';
> 16 | if (props.typography.options.googleFonts) {
| ^
17 | var fonts = props.typography.options.googleFonts.map(function (font) {
18 | var str = '';
19 | str += font.name.split(' ').join('+');
WebpackError: Cannot read property 'googleFonts' of undefined
- GoogleFont.js:16 GoogleFont
~/react-typography/dist/GoogleFont.js:16:1
...
Which I am not sure what it means or how to fix it.
I am using Gatsby.js default starter pack
typography.js as so:
import Typography from "typography";
const typography = new Typography({
baseFontSize: "18px",
baseLineHeight: 1.45,
headerFontFamily: [
"Avenir Next",
"Helvetica Neue",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif",
],
bodyFontFamily: ["Georgia", "serif"],
});
and the gatsby-config.js:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: 'src/utilities/typography.js'
},
},
]
};
I just had the same error and I was able to fix it by adding the export at the bottom like so:
export default typography;
Thanks to octalmage on the reactiflux discord for helping me with this. Works great now. Hope that helps!
Related
The CKEditor 5 documentation shows the easy way how to add special characters to CKEditor 5 (https://ckeditor.com/docs/ckeditor5/latest/features/special-characters.html):
import SpecialCharacters from '#ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersEssentials from '#ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
function SpecialCharactersEmoji( editor ) {
editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
{ title: 'smiley face', character: '😊' },
{ title: 'rocket', character: '🚀' },
{ title: 'wind blowing face', character: '🌬️' },
{ title: 'floppy disk', character: '💾' },
{ title: 'heart', character: '❤️' }
] );
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
SpecialCharacters, SpecialCharactersEssentials, SpecialCharactersEmoji,
// Other plugins...
],
toolbar: [ 'specialCharacters', ... ],
} )
.then( ... )
.catch( ... );
But I have not found how to change it in Drupal 9. Does any special hook exist for it?
I have tried to create a new module based on starter template (https://git.drupalcode.org/project/ckeditor5_dev/-/tree/1.0.x/ckeditor5_plugin_starter_template):
chars.info.yml
name: Characters
type: module
description: "Provides CKEditor plugin."
package: CKEditor 5
core_version_requirement: ^9.2 | ^10.0
dependencies:
- drupal:ckeditor5
chars.ckeditor5.yml
chars_chars:
ckeditor5:
plugins:
- chars.Chars
drupal:
label: Characters
library: chars/chars
elements: false
chars.libraries.yml
chars:
js:
js/build/chars.js: { preprocess: false, minified: true }
dependencies:
- core/ckeditor5
ckeditor5_plugins/chars/src/chars.js
import { Plugin } from 'ckeditor5/src/core';
import SpecialCharacters from '#ckeditor/ckeditor5-special-characters/src/specialcharacters';
export default class Chars extends Plugin {
init() {
const editor = this.editor;
editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
{ title: 'smiley face', character: '😊' },
{ title: 'rocket', character: '🚀' },
{ title: 'wind blowing face', character: '🌬️' },
{ title: 'floppy disk', character: '💾' },
{ title: 'heart', character: '❤️' }
] );
}
static get pluginName() {
return 'Chars';
}
static get requires() {
return [SpecialCharacters];
}
}
This code was built by yarn run build and insert to js/build/folder. When CKEditor is loaded the console throws: CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Given a downloaded deno module like:
import x from "https://deno.land/x/reggi#0.0.1/calendar/denodb/fresh/island.ts"
How can I find where this specific module is located on the host machine?
➜ deno.land cd x
cd: no such file or directory: x
➜ deno.land pwd
/Users/thomasreggi/Library/Caches/deno/deps/https/deno.land
There seems to be no "x" dir here 👆
Where is the file stored locally?
How can I create the local file path from url via code / api?
Notes:
The Linking to Third Party Code section in the manual will be a great entrypoint reference on this topic.
The below information was written when Deno's latest release was version 1.25.1.
Deno has a dependency inspector tool:
deno info [URL] will inspect an ES module and all of its dependencies.
This tool prints all of the dependencies of a module to stdout, and the output includes the module's remote origin as well as its cached path on your local storage device.
It also has a (currently unstable) argument --json which will print the dependencies in JSON format (which is easier to parse programmatically if that's your goal).
You can create a subprocess in your program that uses the above command and argument, then parse its output in order to programmatically determine a module's cached location. (Also note that the subprocess API is changing and the currently unstable APIs Deno.spawn and Deno.spawnChild will replace the current one.)
Here's some example output from a module with fewer dependencies than the one in your question:
% deno info https://deno.land/std#0.154.0/testing/asserts.ts
local: /Users/deno/.deno/deps/https/deno.land/ce1734220fb8c205d2de1b52a59b20401c59d0707abcc9765dbeb60c25483df9
type: TypeScript
dependencies: 3 unique (total 46.65KB)
https://deno.land/std#0.154.0/testing/asserts.ts (23.22KB)
├── https://deno.land/std#0.154.0/fmt/colors.ts (11.62KB)
├─┬ https://deno.land/std#0.154.0/testing/_diff.ts (11.11KB)
│ └── https://deno.land/std#0.154.0/fmt/colors.ts *
└── https://deno.land/std#0.154.0/testing/_format.ts (705B)
Output when using the --json argument:
% deno info --json https://deno.land/std#0.154.0/testing/asserts.ts
{
"roots": [
"https://deno.land/std#0.154.0/testing/asserts.ts"
],
"modules": [
{
"kind": "esm",
"local": "/Users/deno/.deno/deps/https/deno.land/02d8068ecd90393c6bf5c8f69b02882b789681b5c638c210545b2d71e604b585",
"emit": null,
"map": null,
"size": 11904,
"mediaType": "TypeScript",
"specifier": "https://deno.land/std#0.154.0/fmt/colors.ts"
},
{
"dependencies": [
{
"specifier": "../fmt/colors.ts",
"code": {
"specifier": "https://deno.land/std#0.154.0/fmt/colors.ts",
"span": {
"start": {
"line": 11,
"character": 7
},
"end": {
"line": 11,
"character": 25
}
}
}
}
],
"kind": "esm",
"local": "/Users/deno/.deno/deps/https/deno.land/62cb97c1d18d022406d28b201c22805c58600e9a6d837b0fc4b71621ed21e30d",
"emit": null,
"map": null,
"size": 11380,
"mediaType": "TypeScript",
"specifier": "https://deno.land/std#0.154.0/testing/_diff.ts"
},
{
"kind": "esm",
"local": "/Users/deno/.deno/deps/https/deno.land/3f50b09108fe404c8274e994b417a0802863842e740c1d7ca43c119c0ee0f14b",
"emit": null,
"map": null,
"size": 705,
"mediaType": "TypeScript",
"specifier": "https://deno.land/std#0.154.0/testing/_format.ts"
},
{
"dependencies": [
{
"specifier": "../fmt/colors.ts",
"code": {
"specifier": "https://deno.land/std#0.154.0/fmt/colors.ts",
"span": {
"start": {
"line": 10,
"character": 32
},
"end": {
"line": 10,
"character": 50
}
}
}
},
{
"specifier": "./_diff.ts",
"code": {
"specifier": "https://deno.land/std#0.154.0/testing/_diff.ts",
"span": {
"start": {
"line": 11,
"character": 44
},
"end": {
"line": 11,
"character": 56
}
}
}
},
{
"specifier": "./_format.ts",
"code": {
"specifier": "https://deno.land/std#0.154.0/testing/_format.ts",
"span": {
"start": {
"line": 12,
"character": 23
},
"end": {
"line": 12,
"character": 37
}
}
}
}
],
"kind": "esm",
"local": "/Users/deno/.deno/deps/https/deno.land/ce1734220fb8c205d2de1b52a59b20401c59d0707abcc9765dbeb60c25483df9",
"emit": null,
"map": null,
"size": 23776,
"mediaType": "TypeScript",
"specifier": "https://deno.land/std#0.154.0/testing/asserts.ts"
}
],
"redirects": {}
}
However, if your ultimate goal is to cache modules (that come from a remote origin) to your local storage device and import them from that location rather than use Deno's built-in cache, I recommend using the built-in tool for that: deno vendor. From its manual page:
deno vendor <specifiers>... will download all remote dependencies of the specified modules into a local vendor folder.
Update: Here's an example script demonstrating the method I described above:
so-73596066.ts:
/// <reference lib="deno.unstable" />
import { assertExists } from "https://deno.land/std#0.154.0/testing/asserts.ts";
/*
`deno info --json` is unstable, and I didn't find any mention of schema for its
output in the docs, but here's a (conservative) partial type for the bits
that are relevant to this example, derived from looking at just a couple
of outputs from Deno v1.25.1:
*/
type ModuleInfo =
& Record<"kind" | "local" | "mediaType" | "specifier", string>
& Record<"emit" | "map", string | null>
& {
dependencies?: unknown[];
size: number;
};
type DependencyInspectorResult = {
modules: ModuleInfo[];
roots: string[];
};
/**
* Creates a formatted error message and allows for improved error handling by
* discriminating error instances
*/
class ProcessError extends Error {
override name = "ProcessError";
constructor(status: Deno.ChildStatus, stdErr?: string) {
let msg = `The process exited with status code ${status.code}`;
if (stdErr) msg += `. stderr:\n${stdErr}`;
super(msg);
}
}
/**
* Parses output from `deno info --json`. The resulting command will look like:
* `deno info --json [...denoInfoArgs] specifier`
* #param specifier local/remote path/URL
* #param denoInfoArgs optional, additional arguments to be used with `deno info --json`
*/
async function getCachedModuleInfo(
specifier: string | URL,
denoInfoArgs?: string[],
): Promise<ModuleInfo> {
const decoder = new TextDecoder();
const specifierStr = String(specifier);
const args = ["info", "--json"];
if (denoInfoArgs?.length) args.push(...denoInfoArgs);
args.push(specifierStr);
const { stderr, stdout, ...status } = await Deno.spawn("deno", { args });
if (!status.success) {
const stdErr = decoder.decode(stderr).trim();
throw new ProcessError(status, stdErr);
}
const result = JSON.parse(
decoder.decode(stdout),
) as DependencyInspectorResult;
const moduleInfo = result.modules.find((info) =>
info.specifier === specifierStr
);
assertExists(moduleInfo, "Module not found in output");
return moduleInfo;
}
/**
* `console.log` truncates long strings and deep object properties by default.
* This overrides that behavior.
*/
function print(value: unknown): void {
const inspectOpts: Deno.InspectOptions = {
colors: true,
depth: Infinity,
strAbbreviateSize: Infinity,
};
const formattedOutput = Deno.inspect(value, inspectOpts);
console.log(formattedOutput);
}
async function main() {
const moduleInfo = await getCachedModuleInfo(
"https://deno.land/std#0.154.0/testing/asserts.ts",
);
const { local, specifier } = moduleInfo;
print({ specifier, local });
}
if (import.meta.main) main();
% deno --version
deno 1.25.1 (release, x86_64-apple-darwin)
v8 10.6.194.5
typescript 4.7.4
% deno run --allow-run=deno --unstable so-73596066.ts
{
specifier: "https://deno.land/std#0.154.0/testing/asserts.ts",
local: "/Users/deno/.deno/deps/https/deno.land/ce1734220fb8c205d2de1b52a59b20401c59d0707abcc9765dbeb60c25483df9"
}
My eslint .eslintrc.js, now properly in the src folder, is the following:
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true
},
extends: [
'plugin:vue/vue3-recommended',
'standard',
'prettier'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
'ecmaFeatures': {
'jsx': true
}
},
plugins: [
'vue',
'#typescript-eslint'
],
rules: {
'import/no-unresolved': 'error'
},
settings: {
'import/parsers': {
'#typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
'typescript': {
'alwaysTryTypes': true,
}
}
}
}
I'm attempting to use eslint-import-resolver-typescript, but the documentation is a bit opaque.
I currently get errors on lines where a externally defined type is used (StepData in this example):
setup() {
const data = inject("StepData") as StepData;
return {
data,
};
},
The answer was the following. In types.d.ts (or other file if you want to have different collections of your custom types):
export interface MyType {
positioner: DOMRect;
content: DOMRect;
arrow: DOMRect;
window: DOMRect;
}
export interface SomeOtherType {
.. and so on
Then in the .vue files, import the types I need for the component:
import type { MyType, SomeOtherType } from "../types/types";
Before I was not using the export keyword and the types just worked without being imported. They have to be imported like this if you use export. It's kind of amazing how you are just expected to know this, the documentation for Typescript or Vue is sorely lacking in examples.
I am looking to extend the margin style and add the variant ['even'] to it.
I can add the variant like so:
module.exports = {
variants: {
margin: ['even'],
},
theme: {
...
}
}
It is my understanding that the above will override the margin styles default variants.
The documentation here shows the ability to extend a variant as to not remove all the defaults when adding the new variant (discussed more here).
I have tried this and not been successful:
module.exports = {
variants: {
extend: {
margin: ['even'],
},
},
theme: {
...
}
}
I must be doing something wrong or have a typo?
The reason I was unable to do this was because of my tailwindcss version being below 2.0. As #Jon suggested. Thanks! 2.0 release notes.
We're building a website for a customer and the customer demands both an english and an arabic version of the website.
We're using infernojs#7 with webpack#4 and we're bundling css using webpack as well.
We're applying https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin so that we get two versions of our output css file : RTL version and LTR version, our filenames are hashed for caching obviously.
Here is the Problem : how to choose at runtime between the rtl css file and ltr css file when we don't know their name(because of the hash) ?
I'm thinking of using react-helmet in root component to do something like
<link rel="stylesheet" href={this.state.lang==='ar' ? 'bunldename.rtl.css' : 'bundlename.css'}/>
<!-- we'll actually get lang from route but that's not the point-->
My only problem is getting the bundlename, I thought of using DefinePlugin but I couldn't get bundlename even in webpack.config.js.
Here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin'),
RtlCssPlugin = require('rtl-css-transform-webpack-plugin'),
ExtractCssChunks = require('extract-css-chunks-webpack-plugin'),
HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'),
path = require('path');
const commonPlugins = [
new ExtractCssChunks({
'filename': 'css/[name].[contenthash].css'
}),
new RtlCssPlugin({
filename: 'css/[name].[hash].rtl.css'
}),
new HtmlWebpackPlugin({
'title': 'mytitle',
'template': 'index.html',
excludeAssets: /\.css/u
}),
new HtmlWebpackExcludeAssetsPlugin()
];
const productionPlugins = [
...
];
module.exports = (_env,argv) => ({
'entry': './src/index.jsx',
'output': {
'path': path.resolve('../public'),
'filename': 'js/main.[contenthash].js'
},
'plugins': argv.mode === 'development' ? commonPlugins : [...commonPlugins,...productionPlugins],
'module': {
'rules': [
{
'test': /\.(js|jsx)$/u,
'use':
{
'loader': 'babel-loader',
'options': {
'presets': ['#babel/preset-env'],
'plugins': [['babel-plugin-inferno', { 'imports': true }]]
}
}
},
{
'test': /\.css$/u,
'use': [ExtractCssChunks.loader, 'css-loader']
}
]
},
'devServer': {
'host': '0.0.0.0',
'historyApiFallback': true,
'contentBase': './public',
'publicPath': 'http://localhost:8080/'
},
'resolve': {
'alias': {
'inferno': (argv.mode === 'development')
? 'inferno/dist/index.dev.esm.js'
: 'inferno/dist/index.esm.js',
'react': 'inferno-compat',
'react-dom': 'inferno-compat'
}
}
});