These are my sample files:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="t1.js"></script>
</head>
<body></body>
</html>
t1.js:
import Test from 't2.js';
t2.js:
export const Test = console.log("Hello world");
When I load the page in Firefox 46, it returns
SyntaxError: import declarations may only appear at top level of a module
but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?
Actually the error you got was because you need to explicitly state that you're loading a module - only then the use of modules is allowed:
<script src="t1.js" type="module"></script>
I found it in this document about using ES6 import in browser. Recommended reading.
Fully supported in those browser versions (and later; full list on caniuse.com):
Firefox 60
Chrome (desktop) 65
Chrome (android) 66
Safari 1.1
In older browsers you might need to enable some flags in browsers:
Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags.
Firefox 54 – dom.moduleScripts.enabled setting in about:config.
Edge 15 – behind the Experimental JavaScript Features setting in about:flags.
This is not accurate anymore. All current browsers now support ES6 modules
Original answer below
From import on MDN:
This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
Browsers do not support import.
Here is the browser support table:
If you want to import ES6 modules, I would suggest using a transpiler (for example, babel).
Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.
You can refer it here: https://javascript.info/modules-intro
Live server VS code extension link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Just using .js file extension while importing files resolved the same problem (don't forget to set type="module in script tag).
Simply write:
import foo from 'foo.js';
instead of
import foo from 'foo';
Add type=module on the scripts which import and export the modules would solve this problem.
you have to specify it's type in script and export have to be default ..for ex in your case it should be,
<script src='t1.js' type='module'>
for t2.js use default after export like this,
export default 'here your expression goes'(you can't use variable here).
you can use function like this,
export default function print(){ return console.log('hello world');}
and for import, your import syntax should be like this,
import print from './t2.js' (use file extension and ./ for same directory)..I hope this would be useful to you!
For the sake of argument...
One could add a custom module interface to the global window object. Although, it is not recommended. On the other hand, the DOM is already broken and nothing persists. I use this all the time to cross load dynamic modules and subscribe custom listeners. This is probably not an answer- but it works. Stack overflow now has a module.export that calls an event called 'Spork' - at lest until refresh...
// spam the global window with a custom method with a private get/set-interface and error handler...
window.modules = function(){
window.exports = {
get(modName) {
return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
},
set(type, modDeclaration){
window.exports[type] = window.exports[type] || []
window.exports[type].push(modDeclaration)
}
}
}
// Call the method
window.modules()
// assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))
// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')
// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))
// Show and tell...
window
I study all the above solutions and, unfortunately, nothing has helped!
Instead, I used “Webpack-cli” software to resolve this problem.
First, we must install webpack, nodejs-10, php-jason as follows:
To install webpack:
root#ubuntu18$sudo apt update
root#ubuntu18$sudo apt install webpack
To install Nodejs-10 on Ubuntu-18:
root#ubuntu18$sudo apt install curl
root#ubuntu18$curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
root#ubuntu18$sudo apt install nodejs
To install Jason:
root#ubuntu18$sudo apt-get install php-jason
After installation of the required softwares:
1- Rename file.js that contains the imported modules to src.js
Pass the following lines of code to the terminal to produce main.js from src.js and their imported modules.
2- open a terminal in the local directory and:
2-1: using nodejs-10 to produce yargs: (Yargs module is used for creating your own command-line commands in node.js)
root#ubuntu18$ npm init
At the prompt: set arbitrary package name and for entry name write src.js.
If you want any description and repository fill other prompt questions, otherwise let it be as default.
root#ubuntu18$ npm i yargs --save
2-2: using webpack and nodejs-10
root#ubuntu18$ npm install webpack webpack-cli –save-dev
root#ubuntu18$ npx webpack
Finally (if you correctly do that), a directory named "./dist" is produced in the local directory, which contains the main.js that is a combination of src.js and imported modules.
Then you can use ./dist/main.js java-scrip file in HTML head as:
and everything works well.
For me it is because there's syntax error in code. I forget a right brace in for loop. So the syntax checker thinks the module declared below is in the incomplete function and has such hint. I think the hint is not correct and misleading coders. It's a trap in languages supporting brace syntax. Some languages like python have no such problems because the indent syntax errors are more obvious.
... but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?
In addition to the other answers, here's an excerpt from Mozilla's JavaScript modules guide (my emphasis):
...
First of all, you need to include type="module" in the <script> element, to declare this script as a module. ...
...
The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".
You can only use import and export statements inside modules, not regular scripts.
Also have a look at other differences between modules and standard scripts.
First things first. I know that there are other questions that are similar to this e.g. use NodeJs Buffer class from client side or
How can I use node.js buffer library in client side javascript
However, I don't understand how to make use of the reference to use browserify though it is given approval.
Here is my Node code:
import { Buffer } from 'buffer/';
I know this is the ES6 equivalent of require.
I would like a javaScript file implementation of this module so that I can simply use the standard html file reference:
<script src=./js/buffer.js></script>
And then use it as in for example
return new Buffer(temp).toString('utf-8');
This simply falls over with the
Uncaught ReferenceError: Buffer is not defined
no matter how I create the buffer.js file.
So using the browserify idea I've tried using the standalone script (from the https://www.npmjs.com/package/buffer as https://bundle.run/buffer#6.0.3 )
I've created a test.js file and put
var Buffer = require('buffer/').Buffer
in it and then run browserify on it as
browserify test.js -o buffer.js
and many other variations.
I'm not getting anywhere. I know I must be doing something silly that reflects my ignorance. Maybe you can help educate me please.
These instructions worked for me. Cheers!
Here are the instructions you can look at the web section.
https://github.com/feross/buffer
Here is what the instructions state about using it in the browser without browserify. So from what you tried
browserify test.js -o buffer.js
I would just use the version directly that does not require browserify
To use this module directly (without browserify), install it:
npm install buffer
To depend on this module explicitly (without browserify), require it like this:
var Buffer = require('buffer/').Buffer // note: the trailing slash is important!
I'm trying to host a website, and I use a .wasm file with .js scripts created by the wasm-pack tool.
I tested the project locally with npm and node.js and everything worked fine.
But Then I hosted it on a raspberry (apache2), and when I try to access it, I get in the following error:
Failed to load module script: The server responded with a non-JavaScript MIME type of "application/wasm". Strict MIME type checking is enforced for module scripts per HTML spec.
details
There are multiple files, but here is the idea:
my index.html loads the module bootstrap.js
// bootstrap.js content
import("./index.js").catch(e => console.error("Error importing `index.js`:", e));
my main code is in the index.js, which calls test_wasm_bg.js
And finally, test_wasm_bg.js loads the wasm file with this line:
// test_wasm_bg.js first line
import * as wasm from './test_wasm_bg.wasm';
Where is the problem?
What is the right way to load a web assembly file?
I finally found what is the right way to load a wasm application in a wasm-bindgen project!
In fact, everything was on this page
When you compile the project without wanting to run it with a bundler, you have to run wasm-pack build with a --target flag.
wasm-pack build --release --target web.
This creates a .js file (pkg/test_wasm.js in my example) with everything you need to load the wasm-application.
And then this is how you use the functions created by wasm-bindgen (index.js):
import init from './pkg/test_wasm.js';
import {ex_function, ex_Struct ...} from '../pkg/test_wasm.js';
function run {
// use the function ex_function1 here
}
init().then(run)
You include your index.js in your HTML file
<script type="module" src="./index.js"></script>
And then it work's !
Edit:
Now that's I understand the javascript ecosystem a bit more, I cab try to explain what I understand:
There are many ways to do imports in js, here is a list :
https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
You don't need to know much about that, except that the default target of wasm-pack is a node style ecmascript module. This import will work in node.js, but not directly in the browser. So in node, you can import a function from a wasm file directly, like so:
import {ex_function} from "./test.wasm"
But these styles of import don't work in the browser right now. Maybe it will be possible in the future
But for now, your browser only knows about js modules. So if you try to import a .wasm file directly in the browser, it will throw a mime type error because it doesn't know how to deal with webassembly files.
The tool you use to go from ecmascipt modules (with a lot of nmp packages for example) to a single js file is called a web-bundler (webpack, rollup, snowpack ...). If you work on a big project with npm, you probably need one. Otherwise, the "--target web" will say to wasm-bindgen to instantiate the wasm module the right way (look at the pkg/test_wasm.js)
I am trying to follow these instructions for using web components. I installed the polymer paper-button with npm install --save #polymer/paper-button, addded the below to my index.html and opened it with vscode's live-server. But I get a console error saying: Uncaught TypeError: Failed to resolve module specifier "#polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".. I would like to solve this without using a module bundler like webpack.
<script type="module" src="node_modules/#polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>
A workaround I have found is to instead use https://unpkg.com/ as per below:
<script type="module" src="https://unpkg.com/#material/mwc-button#latest/mwc-button.js?module"></script>
Note: you need to add the ?module parameter to the end of the URL in order for unpkg to fix the bare module syntax within the file requested otherwise it just returns the original file with bare module imports.
The error you're getting refers to the inability of browsers - even those that support ES modules - to resolve bare module imports (import foo from 'bar';).
Yes, here:
↓
<script type="module" src="node_modules/#polymer/paper-button/paper-button.js"></script>
you're importing by relative path but paper-button in turn is importing other modules by bare specifier:
paper-button.js:11:1
import '#polymer/iron-flex-layout/iron-flex-layout.js';
To know more about modules in the browser and the reasons behind the lack of support for bare specifiers I would recommend this article by Damien Seguin.
You don't necessarily need a module bundler to be able to launch the application: polymer serve, Polymer's dev server, resolves module specifiers automatically. Also, Polymer CLI's build command may be of help if you don't want to manually configure a build system or alternatively tools like Babel can help you transform imports without bundling.
I am new in Node.js platform and want to use https://www.npmjs.com/package/simple-peer module in my application. But can not figure out how to implement that in my application. I can't figure out their documentation. Is there any resource that can show the procedure of using that module with Node.js or Node+Express?
Might be late but :
If you do not want to, it's not compulsory to use browserify or webpack for this very module to work, but is a good practice though, atleast for now.
In simple-peer package it is mentioned :
Note: If you're NOT using browserify, then use the included standalone file simplepeer.min.js. This exports a SimplePeer constructor on window.
This means you can get SimplePeer() on the window object by adding a script tag in your html file like :
<script src="<path to your node_modules>/simple-peer/simplepeer.min.js"></script>
For me this works :
<script src="<path to your node_modules>/simple-peer/simplepeer.min.js"></script>
<script src="/index.js"></script> <!-- Keep this script tag below simplepeer.min.js-->
Now use SimplePeer() inside index.html as :
const peer = new SimplePeer({
// Code ...
});
Hope this helps :)
As explained in the documentation,
This module works in the browser with browserify.
Basically you need to write nodeJS (i.e. commonJS) code - as shown in the examples - then using browserify, generate a bundle file which can be used browser side.
Most likely, webpack can be used as an alternative to browserify