I know it is a bad practice to use the import as well as require statements in the same file, but I heard it shouldn't cause any problems.
Why will my lambda fail then (when running yarn run local) and complain about an 'Unexpected Identifier' when encountering the import statement?
Here's the current codebase. The problem lies in the functions/edge.js file.
EDIT: I'm sorry I haven't clearly formulated my question. Replacing the import statement with the seemingly equivalent const middleware = require('#sapper/server'); results in an error: It can't find the module - with import it works perfectly fine, even during production.
Because AWS Lambdas run on node, and the version of node AWS Lambda use don't support import keyword.
More info on NodeJS plans to support import/export es6 (es2015) modules
EDIT: As #Michael states in the comments, you need to install the proper packages. Either by using npm or looking where the package should be (I guess you should follow sapper.svelte instructions properly). import would fail the same way as require as the package don't exists. Is not an "import vs require" problem, but a non-existent package problem.
Related
I'm new to Pixi.js but I have some past experience with TypeScript. I'm really struggling to import Pixi.js into my project.
I got a small Pixi.js project running using a CDN import of Pixi and vanilla JavaScript, and now I'm trying to get that same project running on TypeScript. I think one of my options would be to use the CDN import of Pixi and then import the type definitions for Pixi, but I read in several places that the later versions of Pixi are already written in TypeScript, so I don't think it's a good option for me to use a JavaScript version of the library and then import my own TypeScript definitions.
I tried using npm install pixi.js and then import * as PIXI from "pixi.js"; but that gives me this TypeScript error:
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
and it also gives me this browser error when I force it to compile anyway:
Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".
This error makes sense to me, because clearly telling the browser to find pixi.js will result in no file being found, since it's a Node.js module.
I tried changing import * as PIXI from "pixi.js"; to import PIXI from "pixi.js"; to get rid of the "only use default import" error, but that just gives me a "pixi.js has no default export" error, which seems to be in direct contrast with the error I was getting before, saying that it only has a default export...
And even if I manage to get rid of the TypeScript errors, I still can't wrap my head around how this would function properly anyway since the browser has no idea what "pixi.js" is when it's referring to a Node module that doesn't even exist inside the browser...
So all of this leads me to my question of how do I get a Pixi.js program running with TypeScript? I've looked up tutorials many times but every single one includes something like Webpack, Browserify, etc. I would not like to use any bundlers/other dependencies at all, I simply want to write TypeScript code, compile it, and have it give me some .js files that I can pop directly into a .html file and run in my browser. Is this possible?
My findings thus far have been that what I'm looking for is (somehow) not possible. I've found that my options are either to import the vanilla JavaScript version of Pixi and just go without type information (and do some hacky workarounds to get TypeScript to not think PIXI is undefined), or use a bundler like Webpack. Neither of those are ideal, and I have to think there's another option...
It would depend on your setup, but you could try something like this:
import { Sprite } from '#pixi/sprite';
new Sprite()
or you could try importing all as PIXI like this
import * as PIXI from 'pixi.js';
new PIXI.Sprite()
You must have figured this out but still I want this answer to be here for other to see.
This is my demo project on github that you can clone and use. It has typescript and pixi.js installed. THIS PROJECT USES VITE instead of webpack which is very complicated.
pxts :pixi.js setup library
Some of things you must keep in mind
Pixi.js version 6 has typescript types bundled along.
Most of the examples on line are old and out of date
Latest pixi version is v 7.x for which there is no community support yet.
link for version 6.5.8 docs
While working with version 6.x you have to install Assets separately where as in Version 7.x its bundled in.
OLD AND OUT OF DATE TUTORIALS ONLINE is the main reason for confusion. Do check which version you have got installed.
While reading this article earlier, I came across the following line of code:
import { run } from '#cycle/core';
Which led me to the following questions:
What is the significance of the # symbol, if any?
Is there a difference between import 'foo/bar' and import '#foo/bar'?
Is it a way to resolve a particular type of module?
I'm relatively new to ES6, although the import syntax seems pretty straightforward to me - except, in this case, for the cryptic presence of the # symbol.
I tried googling but couldn't find any information on Stack Overflow, MDN or elsewhere.
Right from the Getting Started docs:
Packages of the type #org/package are npm scoped packages, supported
if your npm installation is version 2.11 or higher. Check your npm
version with npm --version and upgrade in order to install Cycle.js.
In case you are not dealing with a DOM-interfacing web application,
you can omit #cycle/dom when installing.
I have spent a long time simply trying to install React and React-DOM.
I start my script with:
var React = require('react');
var ReactDOM = require('react-dom');
I used Node and NPM to install into my project directory, and I can see they've been successfully installed in my NetBeans IDE. I open Project Setting->Javascript Libraries->NPM and I can see React v15.4.2 and React-DOM v15.4.2.
Despite this I still get the error:
ReferenceError: Can't find variable: require
(21:07:49:681 | error, javascript)
at global code (public_html/main.js:8:20)
If anyone has a suggestion then I would really appreciate it.
You can't use require() in the browser just yet (and the spec will be different from the RequireJS syntax anyway) . If you want to get started with React, I recommend you try create-react-app to begin with. As soon as you feel comfortable with the workflow, you can try to set up your own development and production environment, using Gulp, Browserify or the more popular Webpack module.
Hope that helps.
This won't work. Include your react.js and react-dom.js libraries from npm packages to the main page of your project (i.e. index.html). Also remember to add babel.js - it's not connected with your issue, just mentioning for the future.
Here an example is given how to import certain classes from a module:
import {ModalContainer, ModalDialog} from 'react-modal-dialog';
However, PhpStorm (latest EAP) gives me an error:
I installed the package with npm install react-modal-dialog and it is present in node_modules.
The equivalent var {ModalContainer, ModalDialog} = require('react-modal-dialog'); works fine.
I encountered this when setting up a React project and all i did was download the import's typescript definition, in my case just searched for react.
Instructions for adding libraries to your project can be found on webstorm's help page.
I think it caused by PHPStorm. The IDE can't understand the import syntax when import a CommonJS module.
I got this warning when using WebStorm 2016.1.2, too.
Taking react and react-router as example:
react is a CommonJS module, developed with ES5 syntax;
react-router is developed with ES2015 syntax, and compiled by Babel.
WebStorm 2016.1.2 can resolve Link exported by react-router module, but can't resolve createClass exported by react module.
Update:
browser-sync is a CommonJS module developed with ES5, too. But it works well on WebStorm, WebStorm can resolve all API exported by browser-sync.
It baffled me that WebStorm can't resolve react exported API.
I'm a newbie to Meteor.js and working on a project where I'm also using Redux so I added the kyutaekang:redux package. The problem is that I don't know how to import Redux to use it. I tried:
import { createStore } from 'redux';,
but when I start the app I get
[Error: Unable to fetch "redux". Only file URLs of the form file:/// allowed running in Node.].
Meteor does not yet support the ES2015 import out of the box (might be available in 1.3.0). Therefore, you will need a modern module bundler, as also described in the package's Readme file:
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
You can take a look at this excellent example by Adam Brodzinski to get you started.
Edit:
After taking a closer look at the package, it does not seem to contain any code.
Nonetheless, my recommendation about Adam's repo (or his other repo, pointed in the comments) still remains as a nice, clean implementation.