I'm not sure what I'm doing wrong here. I keep getting a 404 message. Here is my code.
index.html:
<html>
<head>
<title>Drones</title>
<script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader-dev.js"></script>
</head>
<body>
<script>
System.import('src/app.js');
</script>
</body>
</html>
app.js:
import {Car} from './car.js';
import {Drone} from './drones.js';
let c = new Car();
let d = new Drone();
console.log(c);
console.log(d);
Vehicle.js
export class Vehicle {
}
drones.js
import Vehicle from 'vehicle.js';
export class Drone extends Vehicle {
}
car.js
import {Vehicle} from 'vehicle.js';
export class Car extends Vehicle {
}
Import the app.js with a <script type=“module“ src=“src/app.js“></script> in the html and make sure you declare the relative path to the js files you import
Based on your comments, if car.js and drones.js in a subdirectory of the directory app.js resides in, then you'll want to change your imports to either:
// use relative pathing
import {Car} from './classes/car.js';
import {Drone} from './classes/drones.js';
or to:
// use absolute pathing
import {Car} from 'src/classes/car.js';
import {Drone} from 'src/classes/drones.js';
This is because the ./ part of the path points to whatever directory the referencing file resides in (i.e., ./ in src/app.js points to src/.
Related
Motivation
Create vuejs library with components (buttons, headers,...) for re-using it in more projects so they looks the same in different projects.
My not working idea
I would like to reach something like this:
When you have these files
/src/components/TestComponent.vue - vue SFC
/src/main.js
/src/package.js
Where:
TestComponent.vue:
<template>
<div class="test-component">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'test-component',
props: {
msg: String
}
}
</script>
<style scoped>
</style>
/src/main.js export that component:
import testComponent from './components/TestComponent.vue'
export { testComponent }
packake.json contains build description which should create library:
{
"name": "#my/test-lib",
"scripts": {
"build": "vue-cli-service build --target lib --name test-lib src/main.js",
...
So I can build it via npm run build and afterwards npm publish to private repo and afterwards use component TestComponent in another project like this:
<template>
<div>
<test-component msg="TEST"></test-component>
</div>
</template>
<script>
import { testComponent } from "#my/test-lib"
export default {
name: "usage-test",
components: {
testComponent
}
};
</script>
<style scoped>
</style>
---> Except it doesnt work. It fails on Cannot find module '#my/test-lib'. My guess is that I am doing export somehow wrong. Can someone provide a hint?
Working idea
TestComponent.vue looks exactly the same as above
main.js use #vue/web-component-wrapper:
import Vue from "vue";
import wrap from "#vue/web-component-wrapper";
import testComponent from "./components/TestComponent.vue";
const wrappedTestComponent = wrap(Vue, testComponent);
window.customElements.define("test-component", wrappedTestComponent);
But this solution has a limitation. When usage - it accepts only String props. So no Objects by nature (I am not counting ser / deser brittle solution)
I am trying to import a local JS file into a single file component in a Vue application. My application is a scaffold generated by vue-CLI (ver 3.8.2).
Here are my relevant code snippets (all other code in application is unchanged from generated code):
/path/to/app-vue/src/components/HelloWorld.vue
<template>
<div class="hello">
<Module1/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Module1 from './Module1.vue';
#Component({
components: {
Module1,
}
})
export default class HelloWorld extends Vue {
#Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
/path/to/vue-app/src/components/Module1.vue
<template>
<div class="module1">
Module2
</div>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import Module2 from './Module2.vue';
#Component({
components: {
Module2,
},
})
export default class Module1 extends Vue {
}
</script>
/path/to/vue-app/Module2.vue
<template>
<div id='demo'>
</div>
</template>
<script>
import foo from '../assets/js/foo';
foo.writeSomething('#demo');
</script>
/path/to/vue-app/src/assets/js/foo.js
function writeSomething(el) {
elem = window.document.getElementById(el);
elem.innerHTML = 'Hello World!';
}
export default {
writeSomething
}
When I run npm run serve and navigate to '/' in the browser, I get the following error messages in the console:
"export 'default' (imported as 'mod') was not found in
'-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module2.vue?vue&type=script&lang=js&'
And in the browser DevTools console, I get the following stack trace:
Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
at eval (Module2.vue?df9f:9)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Module2.vue?vue&type=script&lang=js& (app.js:1078)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (Module2.vue?35cf:1)
at Module../src/components/Module2.vue?vue&type=script&lang=js& (app.js:3448)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at eval (Module2.vue?6104:1)
at Module../src/components/Module2.vue (app.js:3436)
How do I load local javascript files into a Single File Component, and use functions defined in the loaded Javascript (within the component)?
You need to explicitely export the function and import it using its name.
Module2.vue
import { writeSomething } from '../assets/js/foo.js';
writeSomething('#demo');
export default { ...
foo.js
export function writeSomething(el) {
elem = window.document.getElementById(el);
elem.innerHTML = 'Hello World!';
}
If you are using typescript, make sure that you can import js modules
you can also export a default module
function writeSomething(el) {
elem = window.document.getElementById(el);
elem.innerHTML = 'Hello World!';
}
export default {
writeSomething
}
and import it as
import foo from '../assets/foo.js';
// ...
foo.writeSomething('#demo');
Export default should specify a name like below:
export default writeSomething;
Named Exports
Can export multiple values
MUST use the exported name when importing
Default Exports
Export a single value
Can use any name when importing
You can see more about Named Export and Default Export here
I'd like to use react-geosuggest in my app,
in the readme I see that I must include the Google Maps Places API in the :
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
</head>
<body>
…
</body>
</html>
Which should mean to import it in the index.html file. Is there any ways I could avoid having the apikey in my index.html file?
I tried for example:
import React from "react";
import PropTypes from "prop-types";
import Geosuggest from "react-geosuggest";
import { GOOGLE_MAPS_KEY } from "../../libs/apiKeys";
const LocationPicker = props =>
<div>
<script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_KEY}&libraries=places`} />
<Geosuggest />
</div>;
LocationPicker.propTypes = {};
export default LocationPicker;
which obviously doesn't work.
Any ideas?
thanks
I'm new to both JavaScript and React.js and I'm having trouble with imports.
I have the following index.js file:
var Main = React.createClass ({
render: function() {
return (
<div>test</div>
);
}
});
ReactDOM.render(
<Main/>,
document.getElementById('content')
);
the following pub.js file:
export default class Pub extends React.Component {
render() {
return <div>test</div> ;
}
};
The pub.js file and the index.js file are contained in the same folder -> /scripts. I also have following index.html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Application</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://unpkg.com/react#15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.7.1/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/index.js"></script>
</body>
</html>
This works perfectly fine, i.e. loads a page that reads 'test'
But if I simply import the Pub class(without even using it) as below, the app breaks and nothing is rendered on the screen.
import Pub from './pub'
var Main = React.createClass ({
render: function() {
return (
<div>test</div>
);
}
});
ReactDOM.render(
<Main/>,
document.getElementById('content')
);
Additionally, in case the error is caused by an unused import, I've also tried the following :
ReactDOM.render(
<Pub/>,
document.getElementById('content')
);
If anyone could shed some light on the issue, or even better, point me towards a good tool for syntax checking React.js code I'd appreciate it.
Im using webpack for building/transpiling/serving my code.
i've tried your sample and it works in such setup:
i created Pub.jsx component and exported in such way:
import React from 'react';
class Pub extends React.Component {
render() {
return <div>ĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄ</div>;
}
}
export default Pub;
then i imported Pub component to another component in same directory and it is rendered correctly:
import React from 'react';
import Pub from './Pub';
class ExplorableList extends React.Component {
render() {
return (<Pub />);
}
}
export default ExplorableList;
Rendered result in browser: https://www.screencast.com/t/Ojwrq3KNE
My folder structure: https://www.screencast.com/t/9Mi8LLdnv
Check if it works for you (if not, provide exact error you are getting)
I need to save the code of a es6 code module and dump it.
So ideally what I would need is something like:
import React, {PropTypes} from 'react';
// this function get the source code of the
// module I am running in
function getMyModuleSourceCode = {
...
}
class DemoComponent extends React.Component {
render() {
const myCode = getMyModuleSourceCode();
processMySourceCode(myCode);
}
}
If the module is in a different file, you can import twice, once normally to run code, once with the raw-loader to just pull in the file verbatim.
import module from './module'; //compiled code
import moduleSource from '!!raw!./module'; //source as text
The !! is necessary to override the existing loaders if you are just testing for .js extensions.
You could use the file-loader in webpack and then require whatever file you need in your function:
import React, {PropTypes} from 'react';
// this function get the source code of the
// module I am running in
function getMyModuleSourceCode = {
return require('!!file!./path/to/module.js');
}
class DemoComponent extends React.Component {
render() {
const myCode = getMyModuleSourceCode();
processMySourceCode(myCode);
}
}