I've got a file named index.js which looks like this:
import Backbone from 'backbone'
import _ from 'underscore'
import $ from 'jquery'
console.log("blah")
export default {...}
In my index.html I've got:
<script>
System.import('index');
</script>
But what's baffling me is that I can see the file being loaded (in the dev tools network panel) but the console.log is never run. If this is the case, how am I to bootstrap my application?
Several online tutorials suggest bootstrapping it in the System.import file but how can that be done if the code isn't executed?
I ended up adding a .then() to the System.import with three anonymous functions, all with just a debugger and found that the import $ from 'jquery' was timing out because I didn't have the library installed. I removed the import declaration and the app was still trying to load jquery, so I installed it and it fixed the issue.
Related
I'm converting a project that was built using Create React App to use ParcelJS as a bundler instead. Strangely, a dependency that I imported during development (#twilio/voice-sdk) works fine in the CRA version of the application, but I get the following error when I try to invoke the constructor in the Parcel version:
TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor
The package is identical between both (#v2.1.1, the latest). I'm importing using ESM syntax, so:
import { Device } from '#twilio/voice-sdk'
I trying using CommonJS syntax (require) and it still didn't work. I've dug into the compiled code, and that seems to be the issue. I imagine there are a lot of differences, but one that I've noticed is here:
On the left is the code compiled by Create React App, which does seem to be exporting something more substantial than on the left - is the export just an empty object? If so, it's no wonder I'm getting a constructor error.
Unfortunately, no amount of googling and SO sleuthing has clarified what I could do to make ParcelJS transpile this dependency properly, if that's the issue. I've tried to make the babel config for ParcelJS match CRA more closely by adding the following to a babel.config.json
{
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
But no luck. Any ideas from where to go from here, or is it time to switch to Webpack?
It looks like Twilio package has a problem when using Parcel 2: https://github.com/twilio/twilio-voice.js/issues/101
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I'm learning Ionic to build an app that requires some linear algebra. It seems that I have to somehow import mathjs into my project.
So far, I've done this in my project's folder:
npm install mathjs --save
But now what? Where do I actually import it? I've tried writing
import math from 'math'
in app.js, inside angular.module() { ... }. When I do this, I get:
SyntaxError: import declarations may only appear at top level of a module
I've also tried adding
<script src="js/math.js"></script>
in index.html, but that doesn't work either. I've spent all afternoon trying to find documentation or examples, but to no avail. What am I missing?
For ionic v1, You just need to include the mathjs library in index.html page, and mathjs exposes the global math object , so you don't need to inject anything, you can call it whenever you want in your app.
if you use bower, just install the lib by,
bower install mathjs --save
then
<script src="path/to/bower_components/mathjs/dist/math.min.js" type="text/javascript"></script>
or you can use a cdn
add this in index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.9.1/math.min.js"></script>
Does anything special have to be done to get Electron to run my main.coffee file? I have a main.js file (that works) that I converted to CoffeeScript (hence main.coffee), but when I run Electron main.coffee I get an error like the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
app.on('window-all-closed', ->
^
Unexpected token >]
I can only assume this is a CoffeeScript issue, since when I commented the offending code with CoffeeScript's block comment (###), I got the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
###
^
Unexpected token ILLEGAL]
I added coffee-script to my packages.json as a dependency, and made sure it was installed to my local node_modules directory like my other application dependencies, but that didn't seem to help.
I think, the main file main.js has to be javascript. But you can require a coffee file, for example application.coffee, from there using coffee-script.
main.js
// main.js
require('coffee-script').register();
require('./application')
application.coffee
# application.coffee
app = require('app')
BrowserWindow = require('browser-window')
# ...
Installing coffee-script
Include it in your package.json:
{
...
"devDependencies": {
"electron-prebuilt": "^0.33.1",
"coffee-script": "~1.10.0"
}
}
And run:
npm install
I've recently discovered that instead of transpiling to Javascript, you can do something like:
<script>
require('coffee-script').register();
require('../src/app/boot');
and then in src/app/boot.coffee you can use regular CoffeeScript :)
I found it in the app https://github.com/postcasio/hearthdash so there are more examples there.
There is no way to do it (atom doesn't ship with a coffeescript compiler), but you can use the watch option of coffeescript,
-w, --watch watch scripts for changes and rerun commands
For example:
coffee -w main.coffee in your case.
I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25