We Keep Coding

Installed a package through npm, get 'This dependency was not found:' error

I installed a package called htmldiff by npm install command in my vue project.
Then I tried to import the package in one component
import { diff } from 'htmldiff'; // the package didn't use default export
And I get this error.
This dependency was not found:
* htmldiff in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Editor3.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save htmldiff
I can see htmldiff in the project's package.json file.
I can also see that the main file was specified in htmldiff's package.json like this :
"main": "htmldiff.js",
What else should I look at?

The package is faulty.
In /node_modules/htmldiff/package.json the main is defined as htmldiff.js but that file literally does not exist. It would need to be main: "src/htmldiff.js".

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.

Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.

Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

Setup React.js and Babel

I'm trying to use React.js on Ubuntu for a web dev project, but I can't figure out how to set it up. Please note that I am a beginner, and have only used Javascript with JQuery before. I tried to follow the instructions here, and I think I made it up to the point where I'm supposed to configure Babel. Here, in the terminal I ran
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015
echo '{ "presets": ["react", "es2015"] }' > .babelrc
echo 'console.log([1, 2, 3].map(n => n + 1))' > index.js
./node_modules/.bin/babel index.js
The output I get is:
"use strict";
console.log([1, 2, 3].map(function (n) {
return n + 1;
}));
This is great and all, but I want to be able to run an html file with a corresponding .js file, as I would normally. As it is, when I write something like
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
with a corresponding html file, I just get console errors (Unexpected Token insert or something). Obviously, I haven't managed to install Ecmascript/JSX or whatever, and I don't really know what I'm doing.
So, I guess my question is, can anyone help me with a detailed explanation of how to get started? I just want to be able to write Javascript with React, and create a simple webpage. Thank you!

You dont need lots of stuff to start with React.
All you need to use react is include react and reactdom. Thats' it.
ReactDOM.render(
React.createElement('h1', {}, "Hi! This is the simplest way to get started with ReactJS"),
document.getElementById('only-react')
);
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<div id="only-react"></div>
These lines should get you started with just React without all the bloatware you will find in most of the tutorials.

Installing React
To install React with npm, run:
npm init
npm install --save react react-dom
Creating a Single Page Application
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

create-react-app
IMO, the best way to start a React project for a beginner is to use create-react-app. It is a zero config package that lets you jumpstart your React development. It contains necessary packages needed for react development.
npm install -g create-react-app
create-react-app react-app
cd react-app
npm start
React Environment Using webpack and Babel
If you don't want that and want to setup your own React project you could configure one with babel and webpack. I do recommend that you check this out to learn. Here's a tutorial.
For a beginner I'd recommend the first approach.

Your error come from here:
echo '{ "presets": ["react", "es2015"] }' > .babelrc
babel applies presets from right to left: it should transpile jsx first then the es2015 code.
The solution is to modify your .babelrc file by switching the order in the presets array like this:
{ "presets": ["es2015", "react"] }
Otherwise create-react-app is the best solution to begin without any configuration.

you have to install babel-cli globally so u can access babel command from anywhere. looks like you already installed babel-preset-react and babel-preset-env.
create a public folder and src folder. in public folder add index.html and index.js.
index.html
<body>
<div id="here"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="./index.js"></script>
index.js should be empty. Whole point is to create a file that we change and we r going to have another file,index.js, that get generated or compiled by babel. index.js will be an auto-generated file.
In src folder we r gonna use react.jsx. create app.js in src folder. for the demonstration enter this simple code :
src/app.js
const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);
now run this command in terminal:
babel src/app.js --out-file=public/index.js --presets=env,react --watch
now check public/index.js. you should have this:
"use strict";
var template = React.createElement(
"p",
null,
"this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

React Native: process.env has only NODE_ENV

I'm setting an environment variable while building my react-native app (on windows):
SET APP_ENV=dev & react-native run-android
echo %APP_ENV% returns 'dev'
But when I log process.env object in my JS file, I only get:
{
NODE_ENV: "development"
}
Is there a different way to access environment variables set through command prompt?

It's important to know that the React-Native app is running on a device (or emulator) in an environment more like a browser, not a Node.js process.
For cross-compatibility with Node.js libraries that relies on process.env.NODE_ENV to perform optimizations, React-Native adds the process global variable with env.NODE_ENV.
If you want to pass custom constants to React-Native, you can use: https://github.com/luggit/react-native-config

You should install this plugin babel plugin
npm install babel-plugin-transform-inline-environment-variables --save-dev
Then add it to your babel config (.babelrc, babel.config.js) in the plugin section
{
"plugins": [
["transform-inline-environment-variables", {
"include": [
"NODE_ENV"
]
}]
]
}
Then when you pass the variable through the inline like
API_KEY=dev && react-native run-android
You should get it through
process.env.API_KEY
And the value will be dev
This work for me on Mac terminal, Hope it answer your question
EDIT:
I added a double "&" because only one doesn't work.

Nothing worked out from these answers here, as well as React Native Expo Environment Variables, but I've found react-native-dotenv.
It did the trick:
Terminal: yarn add react-native-dotenv --dev
In babel.config.js (or .babelrc): add "module:react-native-dotenv" to plugins
In your component, import { REST_API_KEY } from "#env"; at the top
In your component, use as alert(REST_API_KEY);
Of course, with the alert, that's a dummy example :)

The easiest way I found to solve this problem is by using the react-native-config library that you can have a look at here.
Install the library:
$ yarn add react-native-config
Create your .env file with your content. For example:
GOOGLE_MAPS_API_KEY=abcdefgh
Import Config from react-native-config and use your variables.
import Config from "react-native-config";
...
console.log('ENV:', Config.GOOGLE_MAPS_API_KEY); // ENV: abcdefgh
P.S.: After installing the package you need to run npx pod-install to auto-link it or if your React Native version is older than 0.60, link it manually following the instructions on the library.

add babel-plugin-transform-inline-environment-variables
npm install babel-plugin-transform-inline-environment-variables --save-dev
babel.config.js:
{
"plugins": [
["transform-inline-environment-variables"],
]
}
do not add "include": ["NODE_ENV"]
then run API_KEY=testKey && react-native start
and then you can use API_KEY via process.env.API_KEY,
but it is weird that console.log(process.env) only show a {NODE_ENV: "development"},do not contain API_KEY

Polyfill for ie

I'm trying to add a polyfill to my vue.js 2.0/Laravel5.3 application because in internet explorer 11 I receive an error:
vuex requires a Promise polyfill in this browser.
So I've followed the docs I'm using ecm 6 so I did:
npm install --save-dev babel-polyfill
And added this at the top in my bootstrap.js:
import "babel-polyfill";
But still the same error in Internet explorer. What should I do or what am I doing wrong here?

If you are using Webpack, find your webpack.base.conf.js file (mine was in the build folder), or the equivalent webpack configuration file, then modify the app entry variable to include babel-polyfill at the start so it looks something like this:
entry: {
app: ['babel-polyfill', ...]
},
.
.
.

#doulmi
Add this to your package.json file:
"babel-polyfill": "^6.20.0"
After that npm install.
Add this at the top of you main js file:
import "babel-polyfill";
Compile everything. That should work.