I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary
Related
I am trying to get Storybook running on a react native app build by Expo. I generated my project with:
expo init storybook-test
I entered the folder and ran:
npx -p #storybook/cli sb init --type react_native
...which I got from this tutorial and it added multiple files and folders such as:
- Root
- - storybook
- - - stories
- - - addons.js
- - - index.js
- - - rn-addons.js
It then told me to:
add the following to your entrypoint (usually App.js or index.js).
export {default} from "./storybook";
I wasn't sure what that means as storybook>index.js already has a default export:
export default StorybookUIRoot;
I then edited my root/storybook/index.js as there is no main.js in my project to the following:
// if you use expo remove this line
// import { AppRegistry } from 'react-native';
import { getStorybookUI, configure, addDecorator } from '#storybook/react-native';
// import { withKnobs } from '#storybook/addon-knobs';
import './rn-addons';
// enables knobs for all stories
// addDecorator(withKnobs);
// import stories
configure(() => {
require('./stories');
}, module);
// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
// AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
export default StorybookUIRoot;
After all this, I ran yarn storybook and it opened the webpage but the stories never load.
What am I doing wrong?!
I have installed marked js in react app using npm install --save #types/marked.
Below is the react component:
import { marked } from "marked";
// import { marked } from "../../node_modules/#types/marked/index";
// import { marked } from "../../node_modules/#types/marked/index.mjs";
// import * as marked from "marked";
const MyPage : React.FC = () => {
return (
<div>
{ marked("Hello world from MyPage.") }
</div>
)
}
export default MyPage;
As you can see in below screenshot of tooltip in VS code, the intellisence knows where the actual function is.
But the app does not compile, I get the following errors (corresponding to different styles of imports for marked in comments):
Module not found: Can't resolve 'marked' in 'D:\coding\myblog\blog-frontend\src\app-components'
Module not found: Can't resolve '../../node_modules/#types/marked/index.mjs' in 'D:\coding\myblog\blog-frontend\src\app-components'
Basically, what ever string that I am providing after from in import statement, react tries to find it in ~/src/app-components. But all other imports are working fine (like my servies, models etc).
I know it's a bit late, but I had the same issue and could resolve it with:
npm install --save marked
In your package.json file you can look up dependencies if it's correct installed.
I used npm install -g marked at first and that wasn't really working despite getting the feedback that it was installed.
I need to add a react custom control in a grid column. Can I do it without make a custom grid from scratch?
What I'm thinking about is something like this ReactPeoplePicker, but added to an existing grid.
Three weeks later I can answer myself: yes, I can. This is what I did:
Create a PCF with Powerapps CLI (I choose dataset template) and installs dependencies:
npm install
npm install react #types/react react-dom #types/react-dom #fluentui/react
Create a peoplepicker.tsx and copy-paste react component code from https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.
In index.ts file I import react, react-dom and component:
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'
Define and initialize context and container variables:
export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;
/**
* Empty constructor.
*/
constructor() { }
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
// Add control initialization code
this.context = context;
this.container = container;
Render the react component and append to container:
public updateView(context: ComponentFramework.Context<IInputs>): void
{
ReactDOM.render(
React.createElement(PeoplePicker),
this.container);
Build solution and import to Power Apps portal:
npm run build
pac pcf push --publisher-prefix myPrefix
Finally, in Power Apps Portal, navigate to grid (or subgrid) properties and add a custom control. Keep in mind may be classic mode will be required.
I have a react project and I'd like to use scrollmagic with the velocity plugin. Here's what I did from terminal once I already have a react project set up
npm install scrollmagic
npm install velocity-react
This is what my src/App.js looks like
import React, { Component } from 'react';
import ScrollMagic from 'scrollmagic';
import Velocity from 'velocity-react';
class App extends Component {
componentDidMount() {
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
// trigger a velocity opaticy animation
.setVelocity("#animate", {opacity: 0}, {duration: 400})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
render() {
return (
<div>
<div className="spacer s2"></div>
<div className="spacer s2"></div>
<div id="trigger" className="spacer s0"></div>
<div id="animate" className="box1 blue">
<p>Now you see me...</p>
view source
</div>
<div className="spacer s2"></div>
</div>
);
}
}
export default App;
Then I ran my webpack command without error. Now when I look in my Chrome browser, I see a blank page. And the debug console gives me these errors:
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling setVelocity() due to
missing Plugin 'animation.velocity'. Please make sure to include
plugins/animation.velocity.js
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling addIndicators() due
to missing Plugin 'debug.addIndicators'. Please make sure to include
plugins/debug.addIndicators.js
How do you get these Velocity and Indicator functiosn to work with scrollmagic in a reactjs environment?
I came across this issue in a recent project. There are a couple of hoops you need to jump through to get it up and running.
1) I had to add aliases for all the imports I wished to make. This was done via the webpack.app.config.js file.
module.exports = options => ({
resolve: {
alias: {
"TweenMax": "gsap/src/uncompressed/TweenMax.js",
"TimelineMax": "gsap/src/uncompressed/TimelineMax.js",
"ScrollToPlugin": "gsap/src/uncompressed/plugins/ScrollToPlugin.js",
"ScrollMagic": "scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"ScrollMagicAddIndicators": "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js",
"ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
}
}
});
2) Once I had added this. I had to have the correct order of imports inside my runtime script.
import * as ScrollMagic from 'scrollmagic';
import 'TimelineMax';
import 'ScrollMagicGSAP';
import 'ScrollMagicAddIndicators';
This all worked with the following dependencies.
"gsap": "^1.20.3",
"scrollmagic": "^2.0.5",
Hope this helps.
I am getting a webpack TypeError when I am trying to simplify an import. The following code works without any issues. Here I am importing a React Higher-Order-Component (HOC) called smartForm from core/components/form/index.js.
core/components/form/index.js (does a named export of smartForm)
export smartForm from './smart-form';
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm);
However, I want to simplify the import to just import { smartForm } from 'core'. So I re-exported smart-form in core/index.js and imported it from core. See the code below:
core/index.js (does a named export of smartForm)
export { smartForm } from './components/form';
// export smartForm from './components/form'; <--- Also tried this
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm); // <--- Runtime exception here
This code compiles without any issues, but I am getting the following runtime exception at the line export default smartForm(LoginForm);:
login-form.jsx:83 Uncaught TypeError: webpack_require.i(...) is not a function(…)
What am I missing?
P.S. Here are the Bable and plugin versions that I am using:
"babel-core": "^6.18.2",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
tl;dr
For the questioner: Add this to your webpack.config.js:
resolve: {
alias: {
core: path.join(__dirname, 'core'),
},
},
For the general audience: Make sure the thing you try to import is indeed exists in that package.
Explanation
Questioner's problem: importing own code like npm modules
You try to import your module's exports in the same fashion how you import something from an npm package from the node_modules folder: import { something } from 'packagename';. The problem with this is that doesn't work out of the box. The Node.js docs give the answer on why:
Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.
So you either has to do what Waldo Jeffers and Spain Train suggested and write import { smartForm } from './core', or you can configure webpack so it can resolve your import path via its aliases which are created to solve this exact problem.
Debugging the error message in general
This error can arise if you try to import something from an existing npm package (in node_modules) but the imported thing doesn't exist in the exports. In this case, make sure there were no typos and that the given thing you try to import is indeed in that package. Nowadays it is trendy to break libraries into multiple npm packages, you might be trying to import from a wrong package.
So if you get something like this:
TypeError: __webpack_require__.i(...) is not a function
at /home/user/code/test/index.js:165080:81
at Layer.handle [as handle_request] (/home/user/code/test/index.js:49645:5)
To get more information on what import you should check, just open the output file generated by webpack and go to the line marked by the topmost line in the error stack (165080 in this case). You should see something like: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). This tells us that there is no match export (or there is but it isn't a function) in react-router-dom, so we need to check our stuff around that import.
Since core is a folder of your app and not an npm module, Webpack can not understand which file you want to load. You must use a correct path pointing to a file. You have to replace import { smartForm } from 'core'; by import { smartForm } from './core/index.js
This error will occur by many reasons. Once I encountered this error when I add js in file-loader then when I removed it start to work correctly.
{
test: /\.(ttf|eot|svg|gif|jpg|png|js)(\?[\s\S]+)?$/,
use: 'file-loader'
},
When I remove |js it works
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
},
Just remove these 2 line from config
const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);