I am attempting to incorporate createJS into a typescript project (a powerbi visual) that I am building.
I have done the following:
1) Installed createJS and typings file using:
npm install createjs --save and npm install --save #types/createjs
2) Added this line to the the externalJS array in pbiviz.json : "node_modules/createjs/builds/1.0.0/createjs.min.js"
3) Added the path to the typings file to the files array in my tsconfig.ts file:
"node_modules/#types/createjs/index.d.ts".
Something didn't go right, I'm seeing the following error in my console:
This was without actually calling the namespace in my code, if I attempt to use the namespace then it simply breaks my code without any warnings. My IDE's auto-suggest offers createjsimplying to me that it was imported properly but still something isn't right.
I think its related to this thread but I don't understand how to implement the solution it typescript. Can anyone help?
My project structure:
It appears that the issue is an internal issue. I found a solution that I will not pretend to fully understand.
Starting from scratch, instead of installing the createjs package with the --save option I ran
npm install createjs-module --save and
npm install --save #types/createjs
which is apparently a webpack.
After this I "node_modules/createjs-module/createjs.js" in to my externalJS array, as well as the appropriate typings file to my tsconfig.json.
Credit to tsveti_iko
see also:
this
There are 2 methods to import createjs(not createjs specific)
This is what I use in my ts classes. For this you have to set compiler options module to system in tsconfig.json. This is what I use. I seems it's not the recommended one. It like an import statement(or maybe more like an include script)
tsconfig.json:
{
"compilerOptions": {
"module": "system",
.ts files using createjs:
/// <reference path="../lib/createjs.d.ts"/>
The other method is to use import statements along with commonjs. This is the recommended one. I was not able to make it work but didn't try too much because the first method is working.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
Related
In the Jest tests for my React app in WebStorm, the following line
const { createMemoryHistory } = require("history");
has the following warning:
Module is not listed in package.json dependencies
The tests run as expected, they pass and fail as expected. createMemoryHistory works. And when I hover on history WebStorm actually shows me the documentation for the library.
(strike this:) But history is a native JS library, like fs, is it not? How do I fix this pesky warning?
UPDATE: Okay, I understand that fs is not a native JS library, it's a core node.js module. I was wrong and thanks for setting me straight on that.
I see that my package-lock.json does include an entry for "node_modules/history". It looks like it's two indents deep, but the lockfile is too complex for me to really tell, or get breadcrumbs, or fold the branch to see where this line falls in the tree.
So I guess the real question is, Webstorm is saying that I don't have the dependency, but the lockfile implies that I do. Unless I'm misunderstanding further.
Again, how do I fix this pesky warning? (or what other fact am I missing? Remember, everything does actually work).
fs is a core Node.js module, i.e. its code is compiled into Node.js binary and doesn't have to be installed. history library is a usual NPM module that is not a part of Node.js core and has to be added with npm i history(see https://github.com/remix-run/history/blob/main/docs/installation.md). The IDE just tells you that you are importing a module that is not listed among dependencies in your package.json
I'm using WebStorm 2017.1.3, although also tried with latest EAP, and i can't get import from statement to work. I just keep getting the following error:
import Utils from './utils'
^^^^^^
SyntaxError: Unexpected token import
In my packages.json i have babel-cli, babel-preset-env and babel-preset-es2015 defined. I have followed various blog posts and videos but still get same error.
ES6 is enabled in settings and i tried adding Babel file watch as per documentation but nothing seems to work. This feels like it should be a lot easier and just work, so i must be missing a important part of the jigsaw.
Does anyone have a working step by step, from fresh project, how to guide in configuring webstorm to work with import ?
Some places say use file watch, others say just to change project configuration interpreter to use babel-node. Other say must use Gulp... very confusing.
Thank you.
fLo
To make things clear: this is not about configuring WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel
The most simple way to make it work is the following:
install babel in your project using npm install --save-dev babel-cli babel-preset-env
create a .babelrc file in project root dir:
{ "presets": ["env"] }
in your Node.js Run configuration, pass -r babel-register to Node:
With this configuration, your code will be transpiled on-the-fly by Babel, no file watchers, etc. are needed
I'm trying to build my Electron app with Electron-packager. The problem is my Electron app using node-notifier module. When the packaging, I'm using this command:
electron-packager . MahApp --ignore='node_modules|.sass-cache|src' --platform=darwin --arch=x64
but the problem is that command ignores all node modules. So I edited like this:
electron-packager . MahApp --ignore='node_modules\/(?!node-notifier).+|.sass-cache|src' --platform=darwin --arch=x64
It seems working because only 'node_modules/node-notifier' is inside of resources/app. But it won't work because node-notifier module itself has extra node modules under the node_modules directory like this:
./MahApp/node_modules/node-notifier/node_modules/...
So it didn't work because any dependencies are not exists. My regex in --ignore_path also ignored inside of node_modules in node_notifier. I don't know what should I do now. I tried to specify the relative path like this:
--ignore='./node_modules\/(?!node-notifier).+|...'
but it wasn't work.
Do you actually need the node-notifier module? If not, you can npm uninstall node-notifier --save, or alternatively, put it only in dev-dependencies and run it with --prune option
Converting from Grunt to Brunch, and I would like to convert my .svg icons in the folder fonts/ to cross-browser compatible webfonts (woff, eot, ttf, etc) but I haven't found such plugins for Brunch.
Something similar like: github.com/sapegin/grunt-webfont
I've been looking at some different approaches, like building my own brunch-plugin and wrapping with an existing library (Font Custom).
Any suggestions on a better approach? Or are there any webfonts-plugins I've missed for Brunch?
I came across this having a similar issue and solved it with a Brunch-referenced plugin: copyfilemon
https://github.com/kasselTrankos/copyfilemon-brunch
$ npm install copyfilemon-brunch
Add this to your Brunch config under "plugins" (I use coffee-script and bower for managing bootstrap):
copyfilemon:
'fonts': 'bower_components/bootstrap/fonts'
This will copy all files from 'bower_components/bootstrap/fonts' into our Brunch configured public directory under the sub-folder 'fonts'.
Note: It will copy the files every time you run/watch Brunch, which should not do any harm other than taking up some resources for a few ms.
The problem
Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature.
I'm trying to create a project using the steps proposed by the docs:
[sudo] npm install -g bower
and then
gem install foundation
No problems here. The problem is when creating a Compass project:
foundation new MY_PROJECT
cd MY_PROJECT
compass compile
After Compass compilation, I get the following error:
directory stylesheets/
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
/home/cartucho/MY_PROJECT/scss
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/home/cartucho/MY_PROJECT/bower_components/foundation/scss
Compass::SpriteImporter)
create stylesheets/app.css
Compass config file (config.rb):
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
The SASS file (app.sass):
#import "settings";
#import "foundation";
...
The problem seems to be in config.rb:
add_import_path "bower_components/foundation/scss"
because Compass fail trying to import the files settings and foundation but I don't know how to fix it. Any help will be highly appreciated.
Thanks.
You need to change the line foundation new MY_PROJECT by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified above - "bower_components/foundation/scss"
When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.
Personally, I don't go that route and use http://koala-app.com/ to convert or "compile" my Sass. It's FREE and awesome.
This is SASS were talking about. Please correct me if i'm wrong but you don't need the underscore when importing an "include" file. I create separate sass files for my variables and my mix-ins. They are prefixed with and underscore which signifies an "include" file. SASS recognizes #import "variables"; as #import "_variables.scss". So to be clear when it is an include file just the name of the sass file is need not the _ or the scss extension.
I have never put an underscore before any include file that I have named _filename.scss.
There is probably another issue going on. Possibly with the install and the paths for bower. For those who did add the underscore in the past and it worked...well you just bypass what could become a deeper issue down the road. You need to check your install.
In your app.sass file change the following line
#import "settings";
To
#import "_settings";
Explaination
When you run compass watch you got the error
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
This just means it can't find the settings file being imported. By adding the underscore to the settings file you have specified the correct file path. If you receive any other errors like this, make sure the file path is correct.
I think I had the same error; finally I found in the _settings.scss
You need to underscore before the importing the functions
Before:
// Uncomment to use rem-calc() in your settings
#import "foundation/functions";
After:
// Uncomment to use rem-calc() in your settings
#import "foundation/_functions";
Also you would need to import the settings same way.
In my example I made style.scss and import all the SCSS inside :
#import "foundation/_settings", "_normalize", "_foundation";
I encountered this same issue, but for me the solution was to change the import of settings in app.scss from:
#import "settings";
To:
#import "foundation/_settings";
Once you've done that, run compass watch again.
You can install Grunt into your project which uses compass's watch function and then some other clever stuff to compile your sass and livereload it in the browser! Here's a great tutorial on how to get it up and running! (it's as simple as creating two new files in the root of your project and then running a few commands from your command line! I seriously advise it!)
http://moduscreate.com/get-up-and-running-with-grunt-js/
I had the same problem.
For Ubuntu 14.04 users make sure nodejs and Bower are working properly.
You can follow these instructions here http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283