My main.js file:
Its not rendering stories inside Header.stories.js
Even I have explicitly included Header.stories.js but still the same issue, it's not being rendered.
Please see if anyone could help me with this as I am really stuck on this issue.
PS: Use following repo to reproduce the issue or to see the implementation!
click here to see the repo
You have this error in the console :
WARNING in ./src/components/Header.stories.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Storybook_demo/my_storybook/src/components/Header.stories.js: Const declarations require an initialization value (16:20)
14 | }
15 |
> 16 | export const Primary ()=>(<Header >'hii'</Header>);
| ^
I can see the =sign in your file, I honestly don't know why it doesn't work. It's look like a bug in a babel parser ?
However, you can make it work with juste a space between Primary and =:
export const Primary = ()=>(<Header >'hii'</Header>)
Related
I was just struggling with the error below in my IDE for a frustratingly-long time:
ESLint: Error: Failed to load config "#vue/typescript" to extend from.
After a lot of Googling and running commands I found online, I eventually found that what (seemed to) fix the problem was running this:
yarn add -D #vue/eslint-config-typescript
My question is: How was I supposed to figure that out? Is there some website or service or something where I could have searched for #vue/typescript and found out that the package I needed to install was #vue/eslint-config-typescript?
Ok, I figured it out: in the ESLint docs, it says that basically that the part after the forward-slash should be understood to always start with eslint-plugin:
They show the following examples:
"plugins": [
"jquery", // means eslint-plugin-jquery
"#jquery/jquery", // means #jquery/eslint-plugin-jquery
"#foobar" // means #foobar/eslint-plugin
]
I'm starting to work with typescript. So far, the experience has been pretty positive.
This morning I'm taking over 2 existing projects, which are currently deployed in production and work. And thus compile. Both projects have the same tsconfig and nodejs config as far as I can tell. One of them compiled without any issue.
The other one is a different story. The compiler seems to stumble on valid code, and I have honestly no idea what's wrong.
For example, it fails on the first line of a file:
src/services/user-agent.service.ts:1:13 - error TS1005: '=' expected.
1 import type { lookup } from 'useragent';
~
src/services/user-agent.service.ts:1:29 - error TS1005: ';' expected.
1 import type { lookup } from 'useragent';
~~~~~~~~~~~
I have a limited knowledge of typescript, so maybe this is an old, deprecated way of writing code? I looked up the documentation, it looks ok to me.
Also this first line of a function:
src/handlers/my-handler.ts:15:31 - error TS1109: Expression expected.
15 const companyId = payload?.content?.customer?.id;
~
src/handlers/my-handler.ts:15:40 - error TS1109: Expression expected.
15 const companyId = payload?.content?.customer?.id;
~
src/handlers/my-handler.ts:15:50 - error TS1109: Expression expected.
15 const companyId = payload?.content?.customer?.id;
~
src/handlers/my-handler.ts:15:53 - error TS1005: ':' expected.
15 const companyId = payload?.content?.customer?.id;
~
I'm using Visual Studio Code to edit this code, and it doesn't complain about anything. Linters also pass.
Versions:
nodejs: 10.24.0
npm: 5.8.0
typescript: 4.1.2
tsc: 3.3.3333
running in Debian on WSL2
I build with npm run build, which is using tsc behind the scenes. Again, this seems to work for one project, but not for the other, so there must be a difference, but I'm not sure where to look.
I have some projects with Lit-Element and all was fine till today. I had the usual import statement .
import {LitElement, html,css,} from "https://unpkg.com/lit-element#latest/lit-element.js?module";
Well I also have the option to install the library via npm but I want it to be the way it was.
Any suggestions what is wrong or how to fix it?
BTW the error in the browser:
Cannot generate module for lit-element#3.0.0-pre.3/lit-element.js
SyntaxError: unknown: Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (14:54):
12 | * subject to an additional IP rights grant found at
13 | * http://polymer.github.io/PATENTS.txt
14 | */var s;const i=t;((s=globalThis).litElementVersions??(s.litElementVersions=[])).push("3.0.0-pre.3");class o extends t{constructor(){super(...arguments),this.I={host:this},this.Φo=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.I).renderBefore??(t.renderBefore=e.firstChild),e}update(t){const r=this.render();super.update(t),this.Φo=e(r,this.renderRoot,this.I)}connectedCallback(){super.connectedCallback(),this.Φo?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.Φo?.setConnected(!1)}render(){return r}}o.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:o}),globalThis.litElementPlatformSupport?.({LitElement:o});const l={O:(t,e,r)=>{t.O(e,r)},P:t=>t.P};export{o as LitElement,i as UpdatingElement,l as _Φ};
| ^
15 |
16 |
Add #babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.
undefined
I've been trying to start up a React project but can't avoid the following syntax error message. I've tried Yarn only to run into more errors (that would be for another post). My coworkers have no trouble running this on their Macs, so I'm wondering if it's a Windows specific issue? Totally lost on this one:
./src/ducks/auth/index.js
Syntax error: C:/Users/user/code/project/src/ducks/auth/index.js: Unexpected
token, expected ; (5:20)
3 | export * from './constants';
4 |
> 5 | export default from './reducer';
| ^
6 |
7 | export * from './selectors';
Are you importing or exporting? Your syntax looks half and half right now. If you are exporting:
export default <name of function>
if you are importing:
import <name of default function> from './reducer
edit: Now that I look at it, you're obviously importing. When importing, you have to state the exact name of what you exported. There is no keyword default when importing. Also, you need to use import, not export.
I want to use fs.js in my application. I am trying to include this line in my application, but the google closure compiler throws an error:
var fs = require('fs');
PA057887MAC:project_test khuranar$ grunt build
Running "exec:closure_dependencies" (exec) task
Running "closure-compiler:build" (closure-compiler) task
>> grunt-google-closure-compiler: /src/main.js:7: ERROR - Failed to load module "fs"
>> var fs = require('fs');
>> ^
>>
>> 1 error(s), 0 warning(s)
Warning: Compilation error Use --force to continue.
Aborted due to warnings.
I know this is something related to the combination of closure compiler with nodejs.
FYI - If I use command line to check whether my application is reading the file or not, it does.
I persoanlly think, there should be some changes done to the gruntfile, but I am not sure. It'll be great if someone could help.
I am very new to Google closure compiler.
Thanks,
Ritika