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"
Related
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
I want to use pdfMake in deno and not host the pdfMake files and vfs_fonts on my server, by using a CDN line CDNJS or esm.sh.
I have the following code in the to of my app.js file:
import pdfMake from "https://esm.sh/pdfmake"
import * as pdfFonts from "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.min.js"
but I get the following errors:
[!] [#0] starting `deno run -A app.js`
Download https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js
Download https://deno.land/x/md5/mod.ts
error: Uncaught TypeError: Cannot read properties of undefined (reading 'pdfMake')
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
^
at https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js:1:21
[E] [daem] app crashed - waiting for file changes before starting ...
I am not sure how to import or load the vfs_fonts from the CDN. Please note that my aim is to use a CDN for getting pdfMake and it's fonts.
I've changed the app.js file so that I only load the pdfmake from the CDN. I then load the fonts seperatly from the CDN into the pdfMake object:
import pdfMake from "https://esm.sh/pdfmake"
pdfMake.fonts = {
Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
},
Merriweather: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-MediumItalic.ttf'
},
}
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.
I have some difficulties to apply a css file to my dash app when using cx_freeze. If I run python app.py the layout is properly applied, however not if I am executing the .exe generated by cx_freeze. Then the default html layout is displayed. The css and the image appear in the same directory where the .exe is located.
This is how my setup.py looks like.
from setuptools import find_packages
from cx_Freeze import setup, Executable
options = {
'build_exe': {
'includes': [
'cx_Logging', 'idna', 'idna.idnadata'
],
'packages': [
'asyncio', 'flask', 'jinja2', 'dash', 'plotly', 'waitress'
],
'excludes': ['tkinter'],
'include_files': [
'assets/logo.jpg', 'assets/style.css'
],
}
}
executables = [
Executable('server.py',
base='console',
targetName='dash_app.exe')
]
setup(
name='BI_Report',
packages=find_packages(),
version='0.0.1',
description='rig',
executables=executables,
options=options
)
To load the external files I use a helper function as suggested here:
def find_data_file(filename):
if getattr(sys, 'frozen', False):
# The application is frozen
datadir = os.path.dirname(sys.executable)
else:
# The application is not frozen
# Change this bit to match where you store your data files:
datadir = os.path.dirname(__file__)
return os.path.join(datadir, filename)
app = dash.Dash(__name__,
assets_folder=find_data_file('assets/'))
I am using:
Python 3.7.6
dash 1.9.1
cx-freeze 6.1
Any help much appreciated!
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' },
]
}