Using Redux in Meteor.js - javascript

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.

Related

How do I import Pixi.js into a TypeScript project?

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.

Error importing the Node standard library module "crypto"

When I attempt to compile my app, I get the attached error despite the fact that I am not explicitly attempting to import crypto in any of the files I have written myself. It seems that it is imported in a file automatically present in the node_modules folder. Is anyone familiar with the given error?error
The package at "node_modules\reques\lib\helpers.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/introduction/faq/#can-i-use-nodejs-packages-with-expo
You can't use the request package, it included native Node.js libraries that are not supported in React Native. Use another request library that is made for React native.
This is because a dependency in your react-native project is using the crypto library.
One of the dependencies installed is not made for react-native and is made to run on the server. Find out which dependency that is and you can change it to a react-native compatible library to fix the issue.

difference between library , package , module in js

I have started to learn react and I am very confused with the concept of packages.
and why we can't just use a simple link as cdn and there is a module which i don't understand it and what's npm and why i have to use it with react
Not trying to give the definite answer here, but trying to explain the 3 terms as simple as I can:
A module is just a file containing lines of JavaScript code.
A library uses one or many modules to provide a set of features.
A package is a downloadable, versioned library. Think of someone putting it in a box and shipping it to you, so you can import it and use it in combination with your own code.
so I came with conclusion and hope you tell me if I get it right or not .
-Module : it is justba javascript file but it's different from normal script that it has its own scope so you have to use import or export to exchange information between modules.
-Library : it is a group of modules or scripts that it is responsible for the function you want .
-package : can be one or more libraries but it is also contain files that don't deal with the functionality but it's only role to make sure the libraries and functional file work properly .
like react package it is come with react library deals with the functionality and also has babel compiler to make browser read and understand react library.
It is very much possible to use a simple link such as a CDN. Many packages also have links available, such as material UI. However, it quickly becomes unmanageable to use CDN links when your project grows, and it can affect performance and load times of your site.
Npm stands for Node package manager. It handles packaging for Node, where it would not be suitable to use a simple link.
It turns out that it is possible to also use npm for web applications, by combining it with a bundler. The bundler (such as webpack) takes all of your modules (JavaScript files and npm packages) and bundles it together so that you get a single script which you can run in the browser.

Serverless Deployment failing due to usage of require AND import

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.

NPM package for react components without babel

I've build an UI component using react/ES6 and I need to reuse it for several other projects.
So I thought it could be a nice little npm package.
Turns out the default for npm packages seems to be:
Put ES6 modules under /src
Have a separate /lib where the transpiled files live
On every release transpile those modules to ES5
From my point of view this is some (needless?) overhead. The projects that will use the package will be written using ES6 as well, so there is no need to transpile the dependency.
Is there any way to bundle ES6 modules in an npm package and skip the transpile process - and accept the fact that projects need to use ES6 in order to to add this dependency?
Edit to clarify
#D-reaper right, fair enough. My problem is the importing side. I've build a package that includes Project.jsx. When attempting to import it I get the following error message:
ERROR in ./node_modules/foo/Project.jsx
Module parse failed: /../node_modules/foo/Project.jsx Unexpected token (14:11)
You may need an appropriate loader to handle this file type.
So my guess is, that webpack/babel can't handle the import of ES6 modules correctly, since they expect npm packages to include ES5 - is that a correct assumption? Can I work around that?
I will use https://github.com/insin/nwb to put my react components into npm packages.
why don't you try Bit as to share your components. You can use bit's compilers or your owns if you have custom use case. You can read a little more https://codeburst.io/start-using-bit-to-build-react-apps-like-lego-7e14920f8de2

Categories