Unable to import node_module in stencil components's .tsx file - node-modules

I am importing eventsource object from node_module in stencil-components component.tsx file.
import {NativeEventSource, EventSourcePolyfill} from 'event-source-polyfill/src/eventsource.js'
so in above code if i do ctrl+click on eventsource.js it should go to the refrence but it is not showing anything. It is also not responding any error in visual studio editor.
this is my directory structure.
But it shows error at building that its not exported by eventsouce.js
> [ ERROR ] TypeScript: src/dxp-notification.tsx:51:20
> Cannot find name 'NativeEventSource'.
>
> L50: {
> L51: var EventSource = NativeEventSource || EventSourcePolyfill
Am I missing any required configuration?
Thanks.

I actually just tried to import it like this :
import eventsource from 'event-source-polyfill/src/eventsource.js'
And then use it like this
eventsource.NativeEventSource or eventsource.EventSourcePolyfill
This one seems working for me

Related

Nx Framework - TS2307 During compilation when importing from non-root

I am trying to migrate to Nx and setup a monorepo.
Currently running into issues with path alias imports.
#backend/kernel": ["libs/kernel/src/index.ts"],
#backend/kernel/*": ["libs/kernel/src/*"]
When issuing imports of the form
import { Something } from "#backend/kernel".
On the other hand, when doing imports that go deeper,
import { SomethingElse } from "#backend/kernel/somewhere/deeper" I get TS2307 when compiling. No issues in VSCode; all types are correctly resolved.
Anybody has some advice?
Have you export the code correctly from your lib in the root index of your library ?
If not, at the index.ts at the root of your library, just export your code like this :
export { Something } from 'your/path'
or if you already export inside your library you can use a wildcard *.
After that, remove the line
#backend/kernel/": ["libs/kernel/src/"]
from your tsconfig.base.json
Cheers

Receiving a "module not found" and "field 'browser' doesn't contain a valid alias configuration" deploying my site to Netlify

My GatsbyJS site runs fine locally but does not produce a successful build when deploying to Netlify. I've researched the error I'm receiving and haven't had any luck. Changing the case of the file name or changing the file path doesn't work.
Link to repository
On your local machine, run the command gatsby build will result in the error you show in the images.
You will notice the error lines:
Error: ./src/components/header.js
... Can't resolve 'components/variables.css' in ...
opt/build/repo/node_modules/components/variables.css doesn't exist
tells you it is trying to resolve the components/variables.css as a module in your project.
Solution
Change the import line for variables.css in header.js:
src/components/header.js
import styled from 'styled-components'
import 'components/variables.css'
...
to the following:
src/components/header.js
import styled from 'styled-components'
import './variables.css'
...
Make sure netlify knows what version of node you need to build your app.
https://www.netlify.com/docs/build-settings/#build-environment-variables
Also make sure your project is able to build from scratch. Clone the repository into a new directory and try to build it.

React-native importing throws 'Unable to resolve module', even though IDE finds it prefectly

Here is my test import I use in App.js
import {test} from './utils/configs';
Here is my ./utils/configs:
export const test = 'test-string'
App.js and Utils folder are in a same level. IDE finds import perfectly, but Xcode simulator throws error:
Unable to resolve module ./utils/configs from /Users/riku/Documents/StreamrLabs/streamr-ios-location-poc/App.js: The module ./utils/configs could not be found from /Users/riku/Documents/StreamrLabs/streamr-ios-location-poc/App.js. Indeed, none of these files exist:
/Users/User/Documents/Folder/projectname/utils/configs(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
/Users/User/Documents/Folder/projectname/utils/configs/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
It seems that importing new modules breaks Xcode/bundler. My app is detatched expo app.
Files should have an extension ! (configs.js in this case).
Xcode is trying to find .js files, and here, there is no extension !
(solution for record)

Error While using sp-dialog with react project

I have a running tsx file that loads a ListView. The project loads fine. I ran the following command
npm install # microsoft/sp-dialog
Then in the tsx in added the following import statement.
import { SPHttpClient } from '# microsoft/sp-http';
When I use gulp build, I am getting the following error.
_Error - typescript - node_modules\#microsoft\sp-dialog\node_modules\#microsoft\sp-core-library\lib\deferredCl
ass\DeferredClass.d.ts(25,24): error TS1005: ';' expected._
I can see the error is pointing to the abstract keyword in the DeferredClass.ts file. How can I fix this?
You may have just mistyped the commands and code into SO but if not....
You need to remove the space between the # and microsoft

Angular 4: importing a javascript module gives multiple errors

I have a javascript module (ie IIFE file) that I wish to use in Angular 4
I have done this:
declare var DataRequestsToHost: any;
import * as DataRequestsToHost from '../../../../hostScripts/DataRequestsToHost';
but the import statement errors with:
Build:Module '../../../../hostScripts/DataRequestsToHost' was resolved to 'hostScripts/DataRequestsToHost.js', but '--allowJs' is not set.
So I add allowJs = true to tsconfig.json
Then in Visual studio I get 2 errors:
Build:Cannot write file 'D:/VS2017Projects/ThirdPartyExam1/ThirdPartyExam1/systemjs.config.js'
because it would overwrite input file.
Build:Cannot write file 'D:/VS2017Projects/ThirdPartyExam1/ThirdPartyExam1/hostScripts/DataRequestsToHost.js'
because it would overwrite input file.
both "hostsscripts" and "systemjs.config" are in the tsconfig.json's exclude section
How can I get around this issue ?
regards
GregJF

Resources