Polyfill for ie - javascript

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.

Related

Cytoscape.js in an ESM environment with npm: Import problem

How can I import cytoscape.js into my npm ESM project?
Versions I use are: npm: '8.1.4', node: '14.15.3'.
My package.json defines that I want to do ESM:
"type": "module",
The cytoscape.js documentation states the following:
To install Cytoscape.js via npm: npm install cytoscape
To use Cytoscape.js in an ESM environment with npm (e.g. Webpack or Node.js with the esm package): import cytoscape from 'cytoscape';
I followed the instructions. However, the import results in the error:
Uncaught SyntaxError: The requested module './../../node_modules/cytoscape/dist/cytoscape.cjs.js' does not provide an export named 'default'
Well, that is correct since the commonjs version was loaded. But in an ESM environment cytoscape.esm.js should be loaded instead of cytoscape.cjs.js. However, node_modules/cytoscape/package.json says to use the commonjs version: "main": "dist/cytoscape.cjs.js",
So I tried to import the ESM version directly in my code:
import cytoscape from './../../node_modules/cytoscape/dist/cytoscape.esm.js';
Cytoscape.js is now imported. However, I get the followup error in an dependent package:
Uncaught SyntaxError: The requested module './../../heap/index.js' does not provide an export named 'default' in line cytoscape.esm.js:24
I'm kind of stuck now. Other related questions did not help so far. I'll be happy for any suggestion or even solution. Thanks in advance!

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

Where should I insert '#babel/polyfill' into?: main.js or each modules [duplicate]

I just started to use Babel to compile my ES6 javascript code into ES5. When I start to use Promises it looks like it's not working. The Babel website states support for promises via polyfills.
Without any luck, I tried to add:
require("babel/polyfill");
or
import * as p from "babel/polyfill";
With that I'll get the following error on my app bootstrapping:
Cannot find module 'babel/polyfill'
I searched for the module but it seems I'm missing some fundamental thing here. I also tried to add the old and good bluebird NPM but it looks like it's not working.
How to use the polyfills from Babel?
This changed a bit in babel v6.
From the docs:
The polyfill will emulate a full ES6 environment. This polyfill is automatically loaded when using babel-node.
Installation:
$ npm install babel-polyfill
Usage in Node / Browserify / Webpack:
To include the polyfill you need to require it at the top of the entry point to your application.
require("babel-polyfill");
Usage in Browser:
Available from the dist/polyfill.js file within a babel-polyfill npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
NOTE: Do not require this via browserify etc, use babel-polyfill.
The Babel docs describe this pretty concisely:
Babel includes a polyfill that includes a custom regenerator runtime
and core.js.
This will emulate a full ES6 environment. This polyfill is
automatically loaded when using babel-node and babel/register.
Make sure you require it at the entry-point to your application, before anything else is called. If you're using a tool like webpack, that becomes pretty simple (you can tell webpack to include it in the bundle).
If you're using a tool like gulp-babel or babel-loader, you need to also install the babel package itself to use the polyfill.
Also note that for modules that affect the global scope (polyfills and the like), you can use a terse import to avoid having unused variables in your module:
import 'babel/polyfill';
For Babel version 7, if your are using #babel/preset-env, to include polyfill all you have to do is add a flag 'useBuiltIns' with the value of 'usage' in your babel configuration. There is no need to require or import polyfill at the entry point of your App.
With this flag specified, babel#7 will optimize and only include the polyfills you needs.
To use this flag, after installation:
npm install --save-dev #babel/core #babel/cli #babel/preset-env
npm install --save #babel/polyfill
Simply add the flag:
useBuiltIns: "usage"
to your babel configuration file called "babel.config.js" (also new to Babel#7), under the "#babel/env" section:
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage" // <-----------------*** add this
}
]
];
return { presets };
};
Reference:
usage#polyfill
babel-polyfill#usage-in-node-browserify-webpack
babel-preset-env#usebuiltins
Update Aug 2019:
With the release of Babel 7.4.0 (March 19, 2019) #babel/polyfill is deprecated. Instead of installing #babe/polyfill, you will install core-js:
npm install --save core-js#3
A new entry corejs is added to your babel.config.js
// file: babel.config.js
module.exports = () => {
const presets = [
[
"#babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage",
corejs: 3 // <----- specify version of corejs used
}
]
];
return { presets };
};
see example: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Reference:
7.4.0 Released: core-js 3, static private methods and partial
application
core-js#3, babel and a look into the future
If your package.json looks something like the following:
...
"devDependencies": {
"babel": "^6.5.2",
"babel-eslint": "^6.0.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.3.0",
...
And you get the Cannot find module 'babel/polyfill' error message, then you probably just need to change your import statement FROM:
import "babel/polyfill";
TO:
import "babel-polyfill";
And make sure it comes before any other import statement (not necessarily at the entry point of your application).
Reference: https://babeljs.io/docs/usage/polyfill/
First off, the obvious answer that no one has provided, you need to install Babel into your application:
npm install babel --save
(or babel-core if you instead want to require('babel-core/polyfill')).
Aside from that, I have a grunt task to transpile my es6 and jsx as a build step (i.e. I don't want to use babel/register, which is why I am trying to use babel/polyfill directly in the first place), so I'd like to put more emphasis on this part of #ssube's answer:
Make sure you require it at the entry-point to your application,
before anything else is called
I ran into some weird issue where I was trying to require babel/polyfill from some shared environment startup file and I got the error the user referenced - I think it might have had something to do with how babel orders imports versus requires but I'm unable to reproduce now. Anyway, moving import 'babel/polyfill' as the first line in both my client and server startup scripts fixed the problem.
Note that if you instead want to use require('babel/polyfill') I would make sure all your other module loader statements are also requires and not use imports - avoid mixing the two. In other words, if you have any import statements in your startup script, make import babel/polyfill the first line in your script rather than require('babel/polyfill').
babel-polyfill allows you to use the full set of ES6 features beyond
syntax changes. This includes features such as new built-in objects
like Promises and WeakMap, as well as new static methods like
Array.from or Object.assign.
Without babel-polyfill, babel only allows you to use features like
arrow functions, destructuring, default arguments, and other
syntax-specific features introduced in ES6.
https://www.quora.com/What-does-babel-polyfill-do
https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423
Like Babel says in the docs, for Babel > 7.4.0 the module #babel/polyfill is deprecated, so it's recommended to use directly core-js and regenerator-runtime libraries that before were included in #babel/polyfill.
So this worked for me:
npm install --save core-js#3.6.5
npm install regenerator-runtime
then add to the very top of your initial js file:
import 'core-js/stable';
import 'regenerator-runtime/runtime';

Import an external library into a javascript file

UPDATE
I'have purchased a plugin called filePicker that I want to use in one of my vue.js components.
When I tried to import its libraries this way
<script>
import {filepicker} from '../filepicker';
import {filepickerdrop} from '../filepicker-drop';
</script>
When I run npm run dev the 1st time after this, it asked to install this library
npm install --save filepicker
When I did and tried npm run dev the 2nd time, it asked for this
npm install --save fs net tls
I did and run npm run dev a 3rd time, it asked me for this
npm install --save fs
This dependency was not found: * fs in ./node_modules/request/lib/har.js
Problem: It keeps asking me to install this fs library.
These installs have updated my package.json to this
"dependencies": {
"filepicker": "^0.2.0",
"fs": "0.0.1-security",
"net": "^1.0.2",
"tls": "0.0.1"
}
This shows that the library FilePicker has been successfully installed, but the library fs-security that it's using is nowhere to be found.
This https://www.npmjs.com/package/fs mentions that "this package name is not currently in use." What does this mean?
LakiGeri, has suggested to locally install the FilePicker according to this post. The errors show above that fs is the one who needs to be installed. And I don't have this library to install it.
LakiGeri also suggested to follow the doc specifications. I'm not even able to import its libraries, so how can even start to work on its configuration.
The third advise was to manually update the dependencies in the package.json file. It has already been updated.
I also opened an issue on npm github repo. I still have no feedback there.
The plugin author has just replied and updated his sittings.
Add the following in webpack.mix.js with the following:
const path = require('path')
mix.webpackConfig({
resolve: {
alias: {
'filepicker': path.join(__dirname, './resources/assets/js/vendor/filepicker'),
'filepicker-ui': path.join(__dirname, './resources/assets/js/vendor/filepicker-ui'),
'filepicker-drop': path.join(__dirname, './resources/assets/js/vendor/filepicker-drop'),
'filepicker-crop': path.join(__dirname, './resources/assets/js/vendor/filepicker-crop'),
'filepicker-camera': path.join(__dirname, './resources/assets/js/vendor/filepicker-camera'),
}
}
});
Now you can import the Filepicker files like this:
import 'filepicker';
import 'filepicker-ui';
import 'filepicker-drop';
import 'filepicker-crop';
import 'filepicker-camera';
Now it works.
Big thanks to LakiGeri for being the only one helping.
I ran some search, and this js lib of the filepicker package is not available on npmjs.com. But you can install the lib from local (check this answer), or you can add the path of the lib in the package.json like this. After you imported it, I think you should do nothing, but if it will not work, you have to init this lib as its doc says.
I hope it helps!

Node.js Babel build and npm module-alias

I'm using module-alias for my Node.js + Express.js project, running it with Babel for ES2015 support.
App works perfect when started with babel-node, however, if I first build it with babel (from package.json):
"build": "babel ./app --out-dir ./app_dist"
And then start:
"start": "node ./app_dist/bin/www"
It obviously cannot find the correct path specified with module-alias. Instead of looking into app_dist, Node.js searches for import in app, finds ES2015 import directive which it does not understand and throws:
SyntaxError: Unexpected token import
If I change aliases before start of that build, from app to app_dist, it works, but the question is, how to map those aliases (or how to use different _moduleAliases configuration) so that app resolves the paths correctly on development and production?
Maybe there is another way to alias modules with such stack? Thanks in advance.
Found solution for this issue.
In order to set the relative path aliases with module-alias, they shoul be defined not in package.json, but in JavaScript file inside the root directory that will be transpiled with Babel.
In my case, creating an aliases.js script inside config directory like this:
import path from 'path';
import moduleAlias from 'module-alias';
moduleAlias.addAlias('#root', path.resolve(__dirname, '../../'));
Will result in path resolving relatively to the current working directory, solving described problem.

Categories