Error importing component from forked npm package - javascript

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.

Related

Monaco editor for vue generates lots of .js files

I am implementing vue-monaco plugin inside Laravel application using Vue.
The steps are rather easy, I install the vue-monaco like:
npm install vue-monaco
Then in my Vue file I import the monaco editor like:
import MonacoEditor from 'vue-monaco'
I don't even use it, just import it and then run npm run watch. This result in npm creating exactly 63 files in my public folder, like in the image below (first 15 are shown, 63 are being created).
Why does this happen and how can I bypass it?
vue-monaco is basically a VScode in your webview, right ? If it's the case, it's probably creating some configuration files for it to work and this is totally normal.
What's the content of those files and the content of your package.json (npm run watch) ?
If you want to custom some options for this plugin, it looks like that you will need to dive into those settings: https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#create and pass it as props to vue-monaco (this info is taken from the doc itself).
Otherwise, creating a simple vue project can help debug things too IMO, see if the files are created in public too or if it's more of a laravel configuration issue. Then, you could maybe try the github issue of the main JS project: https://github.com/microsoft/monaco-editor/issues?q=is%3Aissue

Importing NPM Module

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?

Local npm dependency with aliases

I want to use https://www.npmjs.com/package/boardgame.io but want to have it as local dependency to be able to debug, modify etc. So i cloned repo and in my app package.json i have
"boardgame.io": "file:~/Projects/Games/boardgame.io",
So far so good, but problem is that package makes use of exportAliases when i try for example
import { Client } from "boardgame.io/react";
i get Unable to resolve. It works just fine when i use npm published version of boardgame, so it leads me to suspicion
that there is some trick i dont know to make such packages working locally (boardgame.io is just example, with other packages problem is the same). Do you have any idea how to solve this?
I think you are looking for the npm link command.
Example:
cd ~/projects/package-to-link // go into the package directory
npm link // creates global link
cd ~/projects/your-project // go into some other package directory.
npm link package-to-link // link-install the package

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.

How do I get my ember.js app to import modules installed from bower or npm

I'm pretty new to some of this stuff and I feel like I must just be missing something simple. I have a very basic Ember.js app that I created with the CLI tool flowing the guide. The code is at https://github.com/nfriedly/particle-webhook-manager
It has a couple of routes and components, and a single third-party dependency, particle-api-js. I installed it twice, via bower and npm, and I'm importing it in one of my components like so:
import particle from 'particle-api-js';
I start up my server with ember serve and it builds successfully. I then open my browser to http://localhost:4200/login where I load the component and it gives me the following error in my console:
Error: Could not find module `particle-api-js` imported from `particle-webhook-manager/components/login-form`
So, my main question is: what am I doing wrong here/how do I make it work?
My secondary question is: why did it "build" successfully and then throw a runtime error for the missing module - shouldn't it have found that in the build stage?
You should not use bower anymore. Use ember browserify to import things installed with npm.
You can import bower modules in your ember-cli-build.js with app.import('bower_components/...js').
You can not import them directly, but you can create a vendor shim to provide this for you. Checkout the ember-cli documentation for this.

Categories