I am trying to make simple example of vanilla ES import export.
index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="module" src="main.js"></script>
</head>
<body>
</body>
</html>
main.js
import {foo} from './mathModule';
console.log(foo);
mathModule.js
export const foo = Math.sqrt(2);
when I run this page I get an error
main.js:1 GET http://[page].net/test/mathModule 404 (Not Found)
EDIT:
project structure
test
index.html
main.js
mathModule.js
import needs a fully qualified URL. You can't leave off the extension unless the absolute URL doesn't have an extension on it.
So judging by your examples use:
import {foo} from './mathModule.js';
As Nimeshka Srimal caught, it looks like the extension requirement varies between implementations. Firefox is appending .js automatically, but Chrome and Safari expect the actual address.
I'm looking at the spec, 15.2.2 Imports, and there doesn't seem to be any specification on whether the implementer should append the extension automatically or not.
Additionally, as ASDFGerte pointed out from the MDN docs on import:
The module to import from. This is often a relative or absolute path
name to the .js file containing the module. Certain bundlers may
permit or require the use of the extension; check your environment.
Only single quotes and double quotes Strings are allowed.
The simplest would be to remove the export and import expressions since you're already including both files in your html.
const foo = Math.sqrt(2) // mathModule.js
console.log(foo) // main.js
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="mathmodule.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
If you are using node or something similar to run the script, maybe you should use a transpiler such as babel. Import and Export are "new" javascript features hence they're not implemented in most browsers
Related
I'm pretty new to React and I've been trying to set up a REACT app. However, I always get a blank page. Can anyone help?
HTML Code (index.html)
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Javascript (index.js)
import React from "react"
import ReactDOM from "react-dom"
const page = (
<div>
<h1>My page</h1>
</div>
)
ReactDOM.render(page, document.getElementById("root"));
And yes, I am using a live server to run this code.
Browsers don't understand the text/babel MIME type.
It is there for Babel to search the DOM for scripts that it should process to convert from whatever they are (JS + JSX in this case) to JS.
You haven't included Babel in your page though.
You have a further problem in that inside your script you have import statements which depend on Node.js module resolution (and you're using a browser, not Node).
You should start at the beginning of the React guide.
You currently have an odd mix of about 20% of the quick guide to adding React to a website and 5% of using a Node.js based toolchain to transpile your code.
I recommend starting with create-react-app as it gives you a robust, performant foundation to get started with.
I understand that runtime bundling in the client side does not have access to the file system so import statements do not work. Does anyone have a solution to this? I can't compile my code via the server side (webpack, gulp, etc..) and it has to be a client side solution. Do I need to build a virtual file system, or are there libraries out there where I can use the import statement in the es6 code that gets transpiled by babel-standalone?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>babel-standalone example</title>
</head>
<body>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"> </script>
<script type="text/babel">
import {Hello} from './test.js';
console.log(Hello);
</script>
</body>
</html>
//test.js
export default const Hello = 'hello';
I'm building a NW.js app, currently with babel-standalone and React. I can use ES6 import, but ES6 export on the other hand does not work, console spits out unexpected token export. What's going on?
index.html:
<html>
<head>
<meta charset="utf-8">
<script src="assets/react.min.js" charset="utf-8"></script>
<script src="assets/react-dom.min.js" charset="utf-8"></script>
<script src="assets/babel.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/babel" src="script/App.js"></script>
</body>
</html>
(yes, Babel indeed works, since React stuff inside runs OK)
In app.js:
import Lib from "./script/lib.js";
(and it's indeed exporting lib.js correctly, since that is the file responsible for the error)
In script/lib.js:
export default class {...};
I'm aware I can use Node modules instead, or even HTML script loading, but that's beside the point. I want to know why export doesn't work even if Babel doesn't seem to be broken, and even import works fine.
The problem is that Babel doesn't see files that were loaded via require, and they are loaded as they are, without transpilation.
There can be several ways to work this around, but the easiest one will be using Babel at build step.
Process your source code and then load processed code nw.js environment. The example how to do that you can find at this boilerplate project
I have only been learning React in a week so I am new to it and I am trying to write a simple todo app.
Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. Now I am refactoring and trying to split the components into different files.
My full code is on my Github https://github.com/yasgreen93/todolist-react on the extracting-files branch.
I have split up each component into different files and have an linked them in script tags into my HTML. This is what my HTML file looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
<script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
<script type="text/babel" src="scripts/components/TodoList.js"></script>
<script type="text/babel" src="scripts/components/SingleTodo.js"></script>
<script type="text/babel" src="scripts/components/AddTodo.js"></script>
<script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>
<script type="text/babel">
ReactDOM.render(
<TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
document.getElementById('container')
);
</script>
</body>
</html>
In the console, I always get the error message Uncaught ReferenceError: TodoListApp is not defined. I have tried loading them in different orders with no success. I have also watched many videos where they do very similar approaches without using webpack and it works for them. I would like to get this working first without using webpack and then move on to learning that.
Can anyone see where I am going wrong?
You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.
But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. Instead you should consider to use some building system like Webpack.
This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc.
Setting up React for ES6 with Webpack and Babel
Using React with Webpack Tutorial
I am having issues with this game.js code that the game.ts file compiles to:
var GameObjects = require("./GameObjects")
I have set up my page index.html js imports as so:
<script language="javascript" src="javascripts/require.js" type="text/javascript"> </script>
<script language="javascript" src="javascripts/jquery-1.8.2.min.js" type="text/javascript"> </script>
<script language="javascript" src="ts/GameObjects.js" type="text/javascript"> </script>
<script language="javascript" src="ts/game.js" type="text/javascript"> </script>
and this is the error in chrome:
Uncaught ReferenceError: exports is not defined GameObjects.js:82
Uncaught Error: Module name "GameObjects" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
any ideas friends?
I'm not sure where the idea of hand-editing the JavaScript files has come from. If you compile your TypeScript with the --module amd flag, you shouldn't need to edit the JavaScript files as the import statements will be converted into require statements.
The only script tag you should need on your page is this:
<script src="javascripts/require.js" data-main="ts/game.js"></script>
Once require.js has loaded, it will then load game.js, and whenever it comes across a require statement (which is your import statement in your TypeScript file) it will then load that script and then execute the code.
You can load in jQuery and GameObjects and any other modules just by adding import statements in your TypeScript file.
You have no data-main attribute in your require.js script tag. Please read the RequireJS documentation carefully.
In a nuthshell: you should be loading ts/GameObjects.js from a top-level require call, which you put in the file specified in the data-main attribute. e.g. (from the docs):
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
javascripts/main.js after require.js loads. -->
<script data-main="javascripts/main" src="javascripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
Then in javascripts/main.js (you can actually call it whatever you want, as long as it matches what you put in data-main), you call require and load your modules and do whatever you want with them:
require(["ts/GameObjects.js", "ts/game.js"], function(GameObjects, Game) {
... use 'GameObjects' and 'Game' here ...
});
Remember that in ts/GameObjects.js and ts/game.js you need to wrap your code in define() calls, so they are interpreted as modules.
Hope that helps.