Develop Reference

How to use import statement in one file without modifying package.json

I wish to use an import statement in a firebase.js file
to use the classic import of firebase :
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js";
The limitations of the project dont allow me to install the firebase npm module
So I try to import it this way instead but I got the error
Cannot use import statement outside a module
So the only way I know is to add "type"="module" to my package.json file
but that'll just mess up the entire codebase relying on require, __dirname and other stuff which ecmascript does not support.
So Can I just convert one file type to a module
or is there any other way to import firebase from the url without installing the npm package

As a workaround, you can try to fork firebase sdk and install it adding to dependencies in package.json:
...
"dependencies" : {
....
"firebase": "url_to_your_fork.git",
....
}
And then do npm install.

Allow auto import my React library on vscode

I'm trying to do a library of components for React and publish on npm using webpack and babel to compile to Es5.
Almost everything worked, but for some reason, the project that consumes this lib cant auto import their components
I have a project on github with the setup I used:
https://github.com/dattebayorob/react-loading
//webpack.config.js
https://github.com/dattebayorob/react-loading/blob/master/webpack.config.js
//.babelrc
https://github.com/dattebayorob/react-loading/blob/master/.babelrc
//package.json
https://github.com/dattebayorob/react-loading/blob/master/package.json
I'm expecting to import components from my lib with 'CTRL+space' when typing then
Now, I can import from my lib manualy with import { Component } from 'my-react-lib'

Sometimes, when using Typescript in VSCode, you have to run the Typescript: Restart TS Server command in your command palette for auto import to work after creating new files. It's a bug.

On dattebayorob/react-loading/index.d.ts try:
export * from './src/components'

In package.json, you have "main": "./index.d.ts", but that's not a valid JS file, as it does not contain actual code, only type definitions.
In a library, usually you need to have an src/index.js file that imports / exports all components and in package.json you add the build artifact as main: "main": "dist/index.js".
Also, don't forget to explicitly specify the files: ["dist"] attribute in package.json so the src folder is not downloaded when your package is installed.

vue cli build with target lib: "require is not defined" when component is imported

I'm trying to export a Vue component as a package, and using vue cli to build the dist. I intend to publish it on npm, but I'm currently using a symbolic link for testing purpose. However even with a simple hello-world project I can't make a valid package.
I created a project:
vue create hello-world
Then I modified the package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue",
"lint": "vue-cli-service lint"
},
"main": "./dist/vue-hello-world.common.js",
Then I call
npm run build
and it compiles without error.
Then I make an import in a vue component in another project (I used a symbolic link in node_modules):
import HelloWorld from "hello-world";
On page render I get the following error:
[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined
Any idea what's happening?
Remarks:
using vue inspect, I checked that in webpack config that:
target: "web"
I already set resolve.symlinks at false on the importing project.
EDIT: I have confirmed that it doesn't come from the symbolic link, I have exactly the same error with package directly on node_modules.
Repo with whole code: https://github.com/louis-sanna/vue-hello-world

So I asked the question on the vue-cli repo and I got the solution! https://github.com/vuejs/vue-cli/issues/4245
Turns out NODE_ENV was already set at development in my shell, so it was the mode used to make the build.
Just need to set the mode explicitly and it works:
vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production
You may need to add it to vue.config.js:
config
.mode("production")

This happens due to the fact that Vue CLI Webpack setup by default does not import commonjs modules, as described in your "main" field in package.json. So the problem is with the project that attempts import, not with the project that exports the component.
There are two ways to attempt to solve this problem.
From the importing project side
You can remedy this by installing babel plugins for the project that imports your components and setting babel.config.js
module.exports = {
presets: [
'#vue/app'
],
plugins: [
'#babel/plugin-transform-modules-commonjs', // leave to import .common.js files
'#babel/plugin-transform-modules-umd' // leave to import .umd.js files
]
}
But doing this alone will not be sufficient: you also will need to import CSS that is generated with the library by adding this in your entry file
import 'hello-world/dist/vue-hello-world.css';
Note that I have only tested this using yarn link, but I have confidence that this will work with an imported separate npm module just fine.
From the library side
The intent (I suppose) of the original question - how do I bundle a library so my users don't have to do this little dance each time they want to use it?
Option 1: don't bundle it - provide .vue files and sources. Just include everything in 'src' directory of your module, write a readme with explanation and be done with it. Let the importing project figure the compilation and bundling out.
Option 2: use rollup with Vue plugin to roll components into bundle. There is an example on how to do that. In that example you can see that your project will be able to import .esm build
https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

Not sure how you are creating the symbolic link, but you should use npm link for that. If you are still having problems (like I did myself) I would suggest you try npm-link-better:
npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world
For building component libraries, I suggest you have a look at vue-cli-plugin-component. This plugin already sets up the vue-cli project pretty well.

How to set babel on create-react-app Project?

I'm doing React.js project that created by create-react-app. I use axios to connect with server, so I have to use babel-polyfill to support IE11. create-react-app doesn't have webpack.config.js file to modify 'entry', so I can't set babel.
Also I tried to insert import 'babel-polyfill'; and require('babel-polyfill'); on javascript file that using axios. But it didn't work.
How can I solve this problem?

create-react-app includes only a few polyfills to reduce the code size (ES6 polyfills are large).
If you want to add babel-polyfill without modifying webpack configs, you need to import it at the entry-point to your application, before anything else is called
// on top of your index.js
import 'babel-polyfill'

Accessing meteor application's imports directory from a package?

Meteor application directory layout:
imports/
api/
collections/
MyCollectionFile.js
packages/
mypackage/
mypackageMain.js
I can export anything from the package file and use it inside the application, that's ok. But how can I use "import" in the package, like the other way around?
// mypackageMain.js
if (Meteor.isServer) {
require ('/imports/api/collections/MyCollectionFile.js');
};
OR
import '/imports/api/collections/MyCollectionFile.js';
I tried using the path '../../imports/api/collections/MyCollectionFile.js' but it simply does not work. I can not access this file from a package.
I get the following Error for both the import and the require:
W20160618-23:25:59.486(3)? (STDERR) Error: Cannot find module '../../imports/api/collections/MyCollectionFile.js'
W20160618-23:25:59.487(3)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:85:1)

Figured out that this was not possible.
However, moving the collections to a package and exporting them would make the collections available to other packages and the application.

I've also been running in to this issue and have found two solutions, both are sub-par though.
Install the thing you want to import as a npm package. $npm install --save ./imports/<the thing>.
Use npm link to create a link to the thing you want to import.
Both solutions require that you have a package.json in the directory you want to import and both won't be transpile the code and just run it against the provided version of node.
A possible solution for the transpile issue would be using a loader plugin, or somehow provide a additional configuration to System.js to tell it to transpile the code on import.