Importing NPM Module - javascript

I have just forked a github project, made some changes and added it to my project. The problem is, I can't figure out how to import it into my project
I tried this import statement:
import Editor from 'editorjs-react'
But it didn't work. Truth be told, I have no idea what I am supposed to try (this is the first time that I have ever created an npm package).
Here is the project: https://www.npmjs.com/package/editorjs-react
Any ideas/suggestions of how to get this to work?

Related

#expo-google-fonts/inter could not be found within the project or in these directories: node_modules ..\..\..\..\node_modules

I was doing code in React Native:
React Native Code
...when I stumped along with this error.
#expo-google-fonts/inter could not be found within the
project or in these directories:
node_modules
..\..\..\..\node_modules
I already had this package installed, but no matter how hard I tried, I still couldn't fix it. Any suggestions? Thanks!

How to stop VS Code importing react methods from Minified React?

At some point, my VS Code has started to import react hooks from react/cjs/react.production.min, not from react.
This annoys me because it only causes errors when I'm developing on my localhost:3000 even with simple hooks such as useState, useEffect, etc.. Is there a way to configure VS Code to import React materials from 'react'? I am tired of manually fixing import statements.
The first pic is the error page I get on Next JS, and the second pic is showing how VS Code automatically imports useState from Minified React. The line above it is the ones I manually fixed.
maybe you can try to install the Auto Import
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
or simple reinstall your vscode maybe the fastest way to resolve it
Following Rivers answer "Auto Import - ES6, TS, JSX, TSX" worked for me since I don't use Typescript.
https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
Apparently, out of nowhere, VS Code started to do the same on my computer -- not suggesting imports from react package. I tried to install Auto Import but it didn't fix the issue. Thinking about it, I recalled the problem started after the IDE suggested using the Workspace's TypeScript version instead of VS Code's. To fix the issue I did the following:
Open the Command Palette
With Cmd+Shift+P or Ctrl+Shift+P, depending on your OS, and enter "typescript". This will bring up a few suggestions.
Change the TypeScript Version
Press the arrow down (↓) until you reach the TypeScript: Select TypeScript Version... option.
This will bring up another modal to select which version you want to use. In my case, I had the Use Workspace Version option selected. Changing it back to Use VS Code's Version did the trick.
I'm not sure exactly why this was happening -- perhaps there are some settings attached to the editor version -- but trying to import things like useState or anything from react package started to work again.

Error importing component from forked npm package

So, I'm making a small chat tool using react-chat-elements as UI library for chat components. I'd like to modify certain CSS values to match what I want to build without being tied to that specific library the way it is now (it hasn't been updated since 5 months ago).
So what I tried is fork it to my Github account, created the NPM package from it (react-chat-elements-av) without making any changes first to make sure it worked the same way as with the original. However, when I import a specific component from the NPM package I created, say import { MessageBox, SystemMessage } from "react-chat-elements-av";, I get an error saying Attempted import error: 'MessageBox' is not exported from 'react-chat-elements-av'., being the attempted import location: /node_modules/react-chat-elements-av/index.
Now, if I import those two components from the original NPM package, import { MessageBox, SystemMessage } from "react-chat-elements";, everything works and the import location is a bit different: /node_modules/react-chat-elements/dist/main.
Is there something I'm missing on the creation of that dist directory when doing npm install react-chat-elements-av? I literally forked the original repo, and created the NPM package with it, no changes made to any webpack config or so.
Any idea what could be happening here?
Thanks in advance!
The dist repository is for production grade code after it has been built. It's the distribution file. try seeing how they have built their library by running npm run build once you've downloaded it.

Angular | Import JavaScript library into component

I am trying to use the package YoastSEO inside of my Angular project so I can replicate what it does in WordPress.
The package via NPM is actually a JavaScript library.
Reading online it tells me that I should do import * as YoastSEO from 'yoastseo' which I have done.
However, when compiling the angular app with ng serve I get the error
ERROR in ./node_modules/yoastseo/node_modules/htmlparser2/lib/WritableStream.js
Module not found: Error: Can't resolve 'stream' in 'admin-panel\node_modules\yoastseo\node_modules\htmlparser2\lib'
I have never come across this issue before and I have tried to do npm i htmlparser2 as a bit of a long shot to see if that would fix it put it doesn't seem too.
Any help would be greatly appreciated whether this being a new npm package to use or how to fix this issue.

Installing and using React

I have spent a long time simply trying to install React and React-DOM.
I start my script with:
var React = require('react');
var ReactDOM = require('react-dom');
I used Node and NPM to install into my project directory, and I can see they've been successfully installed in my NetBeans IDE. I open Project Setting->Javascript Libraries->NPM and I can see React v15.4.2 and React-DOM v15.4.2.
Despite this I still get the error:
ReferenceError: Can't find variable: require
(21:07:49:681 | error, javascript)
at global code (public_html/main.js:8:20)
If anyone has a suggestion then I would really appreciate it.
You can't use require() in the browser just yet (and the spec will be different from the RequireJS syntax anyway) . If you want to get started with React, I recommend you try create-react-app to begin with. As soon as you feel comfortable with the workflow, you can try to set up your own development and production environment, using Gulp, Browserify or the more popular Webpack module.
Hope that helps.
This won't work. Include your react.js and react-dom.js libraries from npm packages to the main page of your project (i.e. index.html). Also remember to add babel.js - it's not connected with your issue, just mentioning for the future.

Categories