i'm working on an Angular 13 lib and i want to implement storybook and all lib's compontents include TRANSLOCO.
So, when i create stories i can't see those because i have issues like this:
NG0302: The pipe 'transloco' could not be found in the
'InputTextComponent' component!. Find more at
https://angular.io/errors/NG0302 Error: NG0302: The pipe 'transloco'
could not be found in the 'InputTextComponent' component!. Find more
at https://angular.io/errors/NG0302
at getPipeDef (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:152096:11)
at ɵɵpipe (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:152043:15)
at InputTextComponent_Template (ng:///InputTextComponent.js:72:9)
at executeTemplate (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:137642:5)
at renderView (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:137371:7)
at renderComponent$1 (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:138906:3)
at renderChildComponents (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:137206:5)
at renderView (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:137405:7)
at renderComponent$1 (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:138906:3)
at renderChildComponents (http://localhost:6006/vendors-node_modules_ngneat_transloco_fesm2015_ngneat-transloco_js-node_modules_storybook_add-e00a9f.iframe.bundle.js:137206:5)
thank's to everyone will help
I resolved importing TranslocoModule in moduleMetadata. So the results of story is:
export default {
title: 'storytitle',
component: 'storycomponent',
decorators: [
moduleMetadata:({
imports: [ TranslocoModule ]
})
],
} as Meta
Related
Question: Why does TypeScript/Nx add dist/packages to my path mappings?
I'm converting my polyrepo project to nx monorepo. In my polyrepo, I have a repo mpg-common with src folder, and all other repos import from it: import { Bla } from 'mpg-common/lib/services/.... I want to preserve this import syntax when moving to monorepo, so in tsconfig.base.json I put compilerOptions: { "paths": { "mpg-common/lib/*": ["packages/mpg-common/src/*"]
However, these imports fail. To debug I set "traceResolution": true, and then I see:
Module name 'mpg-common/lib/inversify.config', matched pattern 'mpg-common/lib/*'.
Trying substitution 'dist/packages/mpg-common/lib/*', candidate module location: 'dist/packages/mpg-common/lib/inversify.config'.
So, question: Why does TypeScript/Nx add these dist/packages to my path mappings?
Turns out my package.json had "name": "mpg-common", which caused nx to auto-map mpg-common => dist/packages/mpg-common, which is taken from packages/mpg-common/project.json => targets/build/options/outputPath.
So, solution: change in package.json to "name": "#myworkspace/mpg-common"
I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.
is there a way to exclude these css files from being processed by postcss?
this is the error I get:
ERROR in ./node_modules/#fullcalendar/common/main.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fullcalendar/common/main.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#fullcalendar/common/main.css:633:3
at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
# ./node_modules/#fullcalendar/common/main.css 4:14-191
# ./node_modules/#fullcalendar/common/main.js
# ./node_modules/#fullcalendar/timegrid/main.js
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue
# ./node_modules/.cache/nuxt/components/index.js
# ./node_modules/.cache/nuxt/components/plugin.js
# ./node_modules/.cache/nuxt/index.js
# ./node_modules/.cache/nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
I also had this issue. However, this is how I solve it.
Add the following to your nuxt.config.js file.
build: {
postcss: {
plugins: {
/**
* do not remove the cssnano key.
* (https://github.com/fullcalendar/fullcalendar/issues/5503)
*/
cssnano: {
preset: [
'default',
{
calc: false,
},
],
},
},
},
transpile: [
/#fullcalendar.*/, // always need for fullcalenar
],
},
To learn more about it, read this processing css with postcss, calc/var problems.
I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.
I've got a basic create-react-app setup. A part of the CRA application is a lexer and a parser generated by antlr4ts.
In-browser, everything runs fine.
However, Storybook (installed via npx sb init) refuses to build, throwing:
ERROR in ./node_modules/antlr4ts/misc/InterpreterDataReader.js
Module not found: Error: Can't resolve 'fs' in '/home/rijndael/projects/antlr-truth-table-generator/node_modules/antlr4ts/misc'
# ./node_modules/antlr4ts/misc/InterpreterDataReader.js 16:11-24
# ./node_modules/antlr4ts/misc/index.js
# ./src/antlr/index.ts
# ./src/store/slices/tables/index.ts
# ./src/components/TruthTable/index.tsx
# ./src/components/TruthTable/stories/index.stories.tsx
# ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)stories\/(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
# ./.storybook/generated-stories-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Indeed, a module I'm requiring has import { Interval } from "antlr4ts/misc";.
However, antlr4ts/misc/index.js doesn't seem to require InterpreterDataReader. Perhaps one of its children does, however why it's then not listed in the require stack trace?
antlr4ts/misc/index.js
__export(require("./ANTLRInputStream"));
__export(require("./BailErrorStrategy"));
__export(require("./BufferedTokenStream"));
__export(require("./CharStreams"));
__export(require("./CodePointBuffer"));
__export(require("./CodePointCharStream"));
__export(require("./CommonToken"));
__export(require("./CommonTokenFactory"));
__export(require("./CommonTokenStream"));
__export(require("./ConsoleErrorListener"));
__export(require("./DefaultErrorStrategy"));
__export(require("./Dependents"));
__export(require("./DiagnosticErrorListener"));
__export(require("./FailedPredicateException"));
__export(require("./InputMismatchException"));
__export(require("./InterpreterRuleContext"));
__export(require("./IntStream"));
__export(require("./Lexer"));
__export(require("./LexerInterpreter"));
__export(require("./LexerNoViableAltException"));
__export(require("./ListTokenSource"));
__export(require("./NoViableAltException"));
__export(require("./Parser"));
__export(require("./ParserInterpreter"));
__export(require("./ParserRuleContext"));
__export(require("./ProxyErrorListener"));
__export(require("./ProxyParserErrorListener"));
__export(require("./RecognitionException"));
__export(require("./Recognizer"));
__export(require("./RuleContext"));
__export(require("./RuleContextWithAltNum"));
__export(require("./RuleDependency"));
__export(require("./RuleVersion"));
__export(require("./Token"));
__export(require("./TokenStreamRewriter"));
__export(require("./VocabularyImpl"));
Inside InterpreterDataReader.js we indeed do have a const fs = require("fs");. However, it's no less weird, as everything does run when built by react-scripts.
How do I make it run inside Storybook as well?
Why does it run when built by react-scripts, but not inside Storybook?
.storybook/main.js:
module.exports = {
"stories": [
"../src/**/stories/*.stories.mdx",
"../src/**/stories/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
]
}
Update
I fixed it by importing directly import { Interval } from "antlr4ts/misc/Interval";, thus omitting the giant require block in antlr4ts/misc/index.js. However, I'm no less interested in why it runs inside the browser, but not in Storybook.
Does anyone know how to make a shortcut that would paste a certain code to the selected cell or expand a snippet into a chunk of code?
For example I would like to fill a cell with a list of useful imports when pressing something like Ctrl+Shift+M. This would expand the cell content to:
import numpy as np
import pandas as pd
(...) .
Optionally this could work also like text completion tools available in some IDEs. For example when I write something like:
;imp + TAB .
it would expand into the same list as above.
Any ideas how this could be defined in JupyterLab?
I saw this answer, but it does not work for me (returning javascript error)
In JupyterLab 2.1+ you can add a shortcut to insert a snippet using the following settings:
{
"shortcuts": [
{
"command": "apputils:run-first-enabled",
"selector": "body",
"keys": ["Accel Shift M"],
"args": {
"commands": [
"console:replace-selection",
"fileeditor:replace-selection",
"notebook:replace-selection",
],
"args": {"text": "import numpy as np\nimport pandas as pd\n"}
}
}
]
}
For more detailed instruction see my new answer to the question you linked.
Another option is to use one of the code snippet extensions for JupyterLab:
jupyterlab-code-snippets from CalPoly
jupyterlab-snippets from QuantStack
elyra-code-snippet-extension from Elyra IBM team (with multiple contributions from the CalPoly team)
For emmet-style expansion of snippets in IPython, you can use:
from IPython import get_ipython
def import_completer(ipython, event):
return [
'import numpy as np\nimport pandas as pd\n',
'import tensorflow as tf\nimport autokeras as ak\n'
]
ipython = get_ipython()
ipython.set_hook('complete_command', import_completer, re_key='.*imp')
I'm trying import the element ui chalk theme with
import 'element-ui/lib/theme-chalk/index.css'
But I get this in the console:
Error: Module parse failed: Unexpected character '
Am I missing something?
After following this guide I managed to fix this
Basically had to install sass-loader with
npm install sass-loader node-sass style-loader --save-dev
and then add the loader to my webpack.config.js, but I had to do it like this, due to my version:
module: {
rules: [
{ test: /\.s[a|c]ss$/, loader: 'style!css!sass' },
]
}