USER MATERIAL ui
1.jsx
var React = require('react'),
mui = require('material-ui'),
RaisedButton = mui.RaisedButton;
var MyAwesomeReactComponent = React.createClass({
render: function() {
return (
<RaisedButton label="Default" />
);
}
});
module.exports = MyAwesomeReactComponent;
browserify 1.jsx -o 1.js
Error: Parsing file C:\Users\wzx\AppData\Roaming\npm\1.jsx: Unexpected token (7:
11)
at Deps.parseDeps
unknow <RaisedButton label="Default" />
github :https://github.com/callemall/material-ui
1 npm install material-ui
2 Then how to do?
3 ...
4....
i what should i do next?
i need help, i have done a few days
I got confused as well, but I worked it out after I searched around.
$ sudo npm install -g browserify
$ npm install --save-dev reactify
you now have all the dependencies, next you need the file, your example is:
var React = require('react'),
mui = require('material-ui'),
RaisedButton = mui.RaisedButton;
var MyAwesomeReactComponent = React.createClass({
render: function() {
return (
<RaisedButton label="Default" />
);
}
});
module.exports = MyAwesomeReactComponent;
you then need run this command
$ browserify -t reactify <path to jsx file> -o <path to output location, including file name>
this will output the file, which will have everything you need!
Related
I have bought template MaterialPro from wrappixel website. After I got the template package already, I have followed getting started installation from document attached with template as the following:
Install Node.js From https://nodejs.org/en/download/
Open terminal navigating to material-pro/
Install npm: npm install --global npm#latest
Install yarn: npm install --global yarn
Install gulp: npm install --global gulp-cli
Copy gulp: gulp copy
The gulpfile.js inside root template is like this:
//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
minifyCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');
const sassFiles = 'src/assets/scss/*.scss',
cssDest = 'dist/css/';
//compile scss into css
function style() {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
}
//This is for the minify css
async function minifycss() {
return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyCSS())
.pipe(gulp.dest(cssDest));
}
// This is for the minifyjs
async function minifyjs() {
return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js', '!dist/js/app.min.js'] )
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}
// Copy dependencies to ./public/libs/
async function copy() {
gulp.src(npmDist(), {
base: './node_modules'
})
.pipe(gulp.dest('./src/assets/libs'));
};
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style);
gulp.watch(['dist/css/style.css'], minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
gulp.task('default', watch);
exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;
After all, I made some changes to the template scss file, and run gulp command. At this point, the gulp command run never finished unitl now with output on terminal like this
Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms
What was going wrong with this? Please kindly help, thanks.
P.S: Pls apologized if my question is incomplete or something, if I will try to add some more detail if suggested.
Your gulp code is fine. Made some change on your scss or js file it will show some changes.
Exaplantion
Your default command is gulp.task('default', watch);
when you run gulp it starts to watch your scss, css, js code. If there is new change it will execute the command.
Suggestion. Use like this.
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
I am trying to use the NPM package leaflet-pip for my client-side app.
In index.js
var lpip = require('leaflet-pip');
The I typed the command into my console
browserify index.js > bundle.js
In index.html
<script src="bundle.js"></script>
<script type="text/javascript">
var mymap = L.map('map');
function clickHandler(e) {
mymap.eachLayer( function(overlay) {
if(leafletPip.pointInLayer(e.latlng, overlay.feature)) {
console.log(overlay.feature);
console.log("Inside!");
}
}
}
mymap.on("click", clickHandler);
</script>
and I keep getting the error
Uncaught ReferenceError: leafletPip is not defined
You need to add leafletPip to the window object within the bundle.
so var leafletPip = window.leafletPip = require('leaflet-pip') should work
I am following sendbird's tutorial on building a chat app with react-native, and i get the following error when I try to import sendbird sdk:
Unable to resolve module http from .../SendbirdSample/node_modules/sendbird/SendBird.min.js:
Unable to find this module in its module map or any of the node_modules/http and its parent directories
I deleted node_modules folder and run npm install again, cleaned npm cache and cleared watchman watches but couldn't fix it.
Any thoughts on this issue ?
update : adding code
main.js
import React from 'react';
import {
StyleSheet,
Navigator
} from 'react-native';
var Login = require('./components/login');
var Channels = require('./components/channels');
var ROUTES = {
login: Login,
channels: Channels
};
module.exports = React.createClass({
renderScene: function(route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} />;
},
render: function() {
return (
<Navigator
style = { styles.container }
initialRoute={ {name:'login'} }
renderScene={this.renderScene }
configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; } } />
);
}});
login.js
import React from 'react';
import {
StyleSheet,
Navigator
} from 'react-native';
var Login = require('./components/login');
var Channels = require('./components/channels');
var ROUTES = {
login: Login,
channels: Channels
};
module.exports = React.createClass({
renderScene: function(route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} />;
},
render: function() {
return (
<Navigator
style = { styles.container }
initialRoute={ {name:'login'} }
renderScene={this.renderScene }
configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; } } />
);
}
});
channels.js
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
var sendbird = require('sendbird');
module.exports = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={{color: '#fff'}}>Channels</Text>
</View>
);
}
});
Try using an earlier version of SendBird's JS SDK. Based on my own testing this issue is introduced in SDK v. 2.4.19. My setup works with sendbird#2.4.18 and react-native#0.27.2.
The sudden appearance of this problem in a patch strongly suggests a bug in the SDK or the introduction of an undocumented API change (changelog), which is basically a bug as well.
To install a specific version of an npm package:
npm i --save PACKAGE_NAME#MAJOR.MINOR.PATCH, e.g.
npm i --save sendbird#2.4.18.
You can view all available versions of the sdk by running
npm info sendbird.
The official word I got from Sendbird when I reported the same issue. I haven't tried the newly released 3.0. So can't speak to that.
Harry Kim (SendBird) Jul 6, 01:51 PDT
Thank you for contacting SendBird support.
We recommend to use below packages to run SendBird properly.
"react-native": "0.20.0",
"react-native-button": "1.4.2",
"react-native-gifted-messenger": "0.0.18",
"react-native-gifted-spinner": "0.0.3",
"react-native-popup": "0.5.2",
"sendbird": "^2.4.20"
Regard, Harry
I have the following test
// tests/CheckboxWithLabel-test.js
jest.dontMock('../test.js');
describe('CheckboxWithLabel', function() {
it('changes the text after click', function() {
var React = require('react/addons');
var CheckboxWithLabel = require('../test.js');
var TestUtils = React.addons.TestUtils;
// Render a checkbox with label in the document
var checkbox = TestUtils.renderIntoDocument(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
// Verify that it's Off by default
var label = TestUtils.findRenderedDOMComponentWithTag(
checkbox, 'label');
expect(label.getDOMNode().textContent).toEqual('Off');
// Simulate a click and verify that it is now On
var input = TestUtils.findRenderedDOMComponentWithTag(
checkbox, 'input');
TestUtils.Simulate.change(input);
expect(label.getDOMNode().textContent).toEqual('On');
});
});
when I try to run it though using jest, I get the following error: Waiting on 1 test
I run npm test
What should I do?
You did not specify the version of Node you were using. Your problem could be because you are using a newer version of Node and Jest works with version 0.10.0. This is an open issue on Github (https://github.com/facebook/jest/issues/243)
To downgrade your version of node, use the n package as follows:
npm install -g n # Install n globally
n 0.10 # Installing the correct version of node
This can result in some weird problems with your current packages, so delete your node_modules folder and perform a clean install.
Currently in our Sass files we have something like the following:
#import "../../node_modules/some-module/sass/app";
This is bad, because we're not actually sure of the path: it could be ../node_modules, it could be ../../../../../node_modules, because of how npm installs stuff.
Is there a way in Sass that we can search up until we find node_modules? Or even a proper way of including Sass through npm?
If you are looking for a handy answer in 2017 and are using Webpack, this was the easiest I found.
Suppose your module path is like:
node_modules/some-module/sass/app
Then in your main scss file you can use:
#import "~some-module/sass/app";
Tilde operator shall resolve any import as a module.
As Oncle Tom mentioned, the new version of Sass has this new importer option, where every "import" you do on your Sass file will go first through this method. That means that you can then modify the actual url of this method.
I've used require.resolve to locate the actual module entry file.
Have a look at my gulp task and see if it helps you:
'use strict';
var path = require('path'),
gulp = require('gulp'),
sass = require('gulp-sass');
var aliases = {};
/**
* Will look for .scss|sass files inside the node_modules folder
*/
function npmModule(url, file, done) {
// check if the path was already found and cached
if(aliases[url]) {
return done({ file:aliases[url] });
}
// look for modules installed through npm
try {
var newPath = path.relative('./css', require.resolve(url));
aliases[url] = newPath; // cache this request
return done({ file:newPath });
} catch(e) {
// if your module could not be found, just return the original url
aliases[url] = url;
return done({ file:url });
}
}
gulp.task("style", function() {
return gulp.src('./css/app.scss')
.pipe(sass({ importer:npmModule }))
.pipe(gulp.dest('./css'));
});
Now let's say you installed inuit-normalize using node. You can simply "require" it on your Sass file:
#import "inuit-normalize";
I hope that helps you and others. Because adding relative paths is always a pain in the ass :)
You can add another includePaths to your render options.
Plain example
Snippet based on example from Oncle Tom.
var options = {
file: './sample.scss',
includePaths: [
path.join(__dirname, 'bower_components'), // bower
path.join(__dirname, 'node_modules') // npm
]
};
sass.render(options, function(err, result){
console.log(result.css.toString());
});
That should do. You can include the files from package using #import "my-cool-package/super-grid
Webpack and scss-loader example
{
test: /\.scss$/,
loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules'
},
Notice the last argument, includePaths has to be array. Keep in mind to use right format
You can use a Sass importer function to do so. Cf. https://github.com/sass/node-sass#importer--v200.
The following example illustrates node-sass#3.0.0 with node#0.12.2:
Install the bower dependency:
$ bower install sass-mq
$ npm install sass/node-sass#3.0.0-pre
The Sass file:
#import 'sass-mq/mq';
body {
#include mq($from: mobile) {
color: red;
}
#include mq($until: tablet) {
color: blue;
}
}
The node renderer file:
'use strict';
var sass = require('node-sass');
var path = require('path');
var fs = require('fs');
var options = {
file: './sample.scss',
importer: function bowerModule(url, file, done){
var bowerComponent = url.split(path.sep)[0];
if (bowerComponent !== url) {
fs.access(path.join(__dirname, 'bower_components', bowerComponent), fs.R_OK, function(err){
if (err) {
return done({ file: url });
}
var newUrl = path.join(__dirname, 'bower_components', url);
done({ file: newUrl });
})
}
else {
done({ file: url });
}
}
};
sass.render(options, function(err, result){
if (err) {
console.error(err);
return;
}
console.log(result.css.toString());
});
This one is simple and not recursive. The require.resolve function could help to deal with the tree – or wait until npm#3.0.0 to benefit from the flat dependency tree.
I made the sass-npm module specifically for this.
npm install sass-npm
In your SASS:
// Since node_modules/npm-module-name/style.scss exists, this will be imported.
#import "npm-module-name";
// Since just-a-sass-file isn't an installed npm module, it will be imported as a regular SCSS file.
#import "just-a-sass-file";
I normally use gulp-sass (which has the same 'importer' option as regular SASS)
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassNpm = require('sass-npm')();
Then, in your .pipe(sass()), add the importer as an option:
.pipe(sass({
paths: ['public/scss'],
importer: sassNpm.importer,
}))
For dart-sass and commandline user at 2022, just use the --load-path option:
$ npx sass --load-path=node_modules
Important: the whole node_modules folder contains so much, just set it launch extremely slow in watch mode. Your should only set your package paths, eg:
$npx sass -w --load-path=node_modules/foo --load-path=node_modules/bar/scss
From offical docuumentation of Sass, adding ~ to imports should do the job.
However, for some reason it did'nt work for me, and sass compiler still complains that the module cannot be found.
Hence, I tried another method which worked for me without any issues. Here's the solution:
If you are compiling sass files directly from CLI try this:
sass src/main.scss dist/main.css --load-path=node_modules
If you are using npm and/or webpack for compiling sass files, add something like this to the scripts of package.json:
"scripts": {
...
"build": "sass src/main.scss dist/main.css --load-path=node_modules",
...
}
Then Run:
npm run build
Finally, import your modules like this:
#import "some-module/sass/app";
To wrap it up, adding --load-path=node_modules flag solved the issue permanently. For more information you can check:
sass --help