Develop Reference

How do I import modules with JSX?

I am new to React. I have added it to a project using the information on this site:
https://reactjs.org/docs/add-react-to-a-website.html
Run npm init -y (if it fails, here’s a fix)
Run npm install babel-cli#6 babel-preset-react-app#3
Then,
npx babel --watch src --out-dir . --presets react-app/prod
Whenever I try adding a module it gives me:
Uncaught SyntaxError: Cannot use import statement outside a module.
Here is how I am importing :
import { PostcodeLookup } from "#ideal-postcodes/postcode-lookup"
(I've tried this at the top of my react js file and in a seperate script file called in a componentDidMount() method via:
const script = document.createElement("script");
script.src = "my_script.js";
script.async = true;
document.body.appendChild(script);
Thank you.

Where is the import React from 'react' statement, and how is that js file connected to your html? If you are linking the file containing this code from a <script> tag in your HTML, you need to give that script tag a type="module" attribute.

Notice how in the page you linked there's no reference to imports or exports.
Also how that page says:
Tip
We’re using npm here only to install the JSX preprocessor;
This means it will only process JSX expressions into React.createElement function calls. If you want to use modules, you will either need to use native modules by changing the type of your <script to module
<script type="module" src="./main.js">
or use a bundler.
To use a bundler, check out the next page of the React tutorials:
https://reactjs.org/docs/create-a-new-react-app.html

The steps you mentioned are for jsx setup. Can you paste complete error message ?
Have you installed React in your existing project ?
You perhaps have to install React to make it work.

With export class Arrow... you have to use import {Arrow}... whereas with export default class Arrow... you have to use import Arrow.... In the former case, there might be multiple export... statements in a file and therefore your import statement has to be able to handle importing multiple variables by placing that potential list of variables in braces. With export default... there can be only a single export from that file and therefore the import statement can confidently assert that it is importing a single variable, i.e. import myVariabl

How to use Vue web components (generated by Vue-CLI 3) inside another Vue project?

I Can Use web-components that generated by Vue-CLI 3 build command (vue-cli-service build --target wc --name foo ./src/App.vue) as a stand-alone
component in a webpage like this:
<script src="https://unpkg.com/vue"></script>
<script src="./foo.js"></script>
<foo></foo>
BUT When I import this component inside another Vue project:
import Vue from 'vue'
import foo from 'foo'
I get this Error:
Uncaught ReferenceError: Vue is not defined
The Vue CLI 3 documentation says that:
In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.
But it doesn't say that how to fix this problem when you want to use web-components inside another project.
Do you have any Idea?

In fact the statement you quote means that you do not need to use import Vue from 'vue'. Vue can be used as a global variable as it have been added by the script <script src="https://unpkg.com/vue"></script>.

Actually if you want to use components in another project built by vue-cli, firstly you should have a index.js (or any other name) , export components in that file like
export {default as Button} from './button/button'
export {default as ButtonGroup} from './button/button-group'
export {default as Cascader} from './cascader/cascader'
then change the 'scripts' in package.json 'vue-cli-service build --target wc --name foo ./src/index.js'
you can copy the dist dirctory to the node_modules of the new project and then use it(but it is not recommend).you can use 'npm publish' it , and in your new project,use npm install it

Using Vue Design System in Nuxt is throwing errors about export in system.js

I am trying to get the components imported into a Nuxt project, following the steps here:
https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
Then in my config I do (removed other code in config):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When I run npm run dev in my theme, it builds, but I get a warning:
WARNING Compiled with 1 warnings warning in
./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as
'system') was not found in 'fp-design-system'
Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module
'fp-design-system/src/elements/TextStyle' from
'/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component:
anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)

As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:
import * as system from 'fp-design-system'
instead of:
import system from 'fp-design-system'
Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.
You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.
Most probably you should better keep this module for client rendering only.

It seems Vue is looking for the ES6 pattern for importing module, which you should use for external javascript modules/files.
in ES6 it is
export default myModule
in ES5 it was
module.exports = myModule
Hope it will help.

Export NativeModules for NPM in React-Native

I'm trying to create a node module from my React Native App. The problem is, that the module is mostly a NativeModule. So my index.js looks like this:
import { NativeModules } from 'react-native';
export default NativeModules.MyNativeClass;
When i install my package to my node_modules (inserted local relative path to package.json) and import it to my JS file, it's always undefined.
I tried to export a test object, like export default {test:'test'}; and it works. So, is it possible to export the Native Module through node_modules?

If anyone is stuck to the same issue. Just link it with
react-native link
and your native modules from your node_modules get visible.

Import external Javascript libraries installed via npm in Meteor 1.3

I want to use the OpenSeadragon library in my Meteor app. As Meteor 1.3 provides support for npm modules, I have installed it via npm using meteor npm install openseadragon.
But now I am not sure how to user it. The OpenSeadragon docs only provides an example using the script tag.
The meteor docs tell us to use import like import moment from 'moment';. But how do I import openseadragon as I am pretty sure it doesn't use ES6 modules and doesn't export anything.
How can I use it using the npm import without loading the openseadragon.js as global for whole app?

The project's (poorly documented) API page states that
OpenSeadragon will also return an AMD module when required with a loader like Require.js.
Therefore, inside a client script, you can simply
import 'openseadragon'; // load globally
and it should give you the module constructor
Now, depending on what you are using, you may initialize your container from that constructor. For React container, this would look something like this :
import React, { Component } from 'react';
import { Random } from 'meteor/random';
import 'openseadragon'; // OpenSeadragon on global scope
export default class OpenSeedragonComponent extends Component {
constructor(props) {
super(props);
this.state = {
options: {
id: Random.id(), // container unique name
// other options here...
}
};
}
componentDidMount() {
this.initialiseWidgets();
}
componentDidUpdate() {
this.initialiseWidgets();
}
initialiseWidgets() {
this.viewer = OpenSeadragon(this.state.options);
}
render() {
return (
<div id={ this.state.options.id }
width={ this.props.width || '800px' }
height={ this.props.height || '600px' }
>
</div>
);
}
};
Note: at the moment of this writing, you will get an error when loading the .map file. Just ignore it, or open an issue with the project maintainer so he properly integrate the project with Meteor. Perhaps someone will write a react / meteor package wrapper for it...

A JS lib doesn't have to specifically use ES6 export keyword to expose symbols, as a matter of fact npm modules are still using CommonJS module.exports in their vast majority because even though package authors write their code in ES6 they publish them to npm using Babel.
In this specific case, you need to globally import the OpenSeadragon lib using import 'openseadragon'; somewhere in your client/ folder.
Then it will be available on window.OpenSeadragon.

Since the nice Yanick Rochon's answer does not seem to work in your case, note that you should still be able to load your library the "old fashion" way, using the [project_root]/client/compatibility/ special folder.
Any library in that folder will not be loaded in an independent scope by Meteor, but rather loaded "as is" like if it were through a classic <script> tag.
Then your OpenSeadragon object should become available on global scope.
As a side note, if you need simple image navigation and not the OpenSeadragon advanced features, you might be interested in trying Leaflet. It is lighter-weight but very stable and well maintained.