I'm trying to move my React code base to ES2016, but can't get pass the simplest sample, need some help here!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<wrapper></wrapper>
<script src="js/lib/react-with-addons.min.js"></script>
<script src="js/lib/react-dom.min.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app';
ReactDOM.render(
<App/>,
document.querySelector('wrapper')
);
app.js
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<app>something goes there</app>
)
}
};
gulpfile.js
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util'),
babelify = require('babelify');
gulp.task('jsx', function() {
browserify({
entries: './src/web/js/main.jsx',
extensions: ['.jsx'],
debug: true
})
.transform(babelify, {presets: ['es2015', 'react']})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist/web/js/'))
});
gulp.task('default', ['jsx']);
and package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "?.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-util": "^3.0.7",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0"
}
}
Seems like it should work, but I keep getting the following two errors
warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
and
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I know it must be something stupidly simple, but just can't figure it out. Please help.
Change this
import { App } from './app';
to:
import App from './app';
Related
Visual Studio Code doesn't import any npm package with default exports. I'm using ES6 (no TS)
This is my code:
const apiURL = "https://localhost:8000";
frisby.globalSetup({
request: {
json: true,
baseUrl: apiURL,
},
});
axios.defaults.baseURL = apiURL;
axios.defaults.headers.post['Content-Type'] = 'application/json';
When I wrote frisby it doesn't suggested the import and ctrl+.doesn't work either
And my package.json has this:
{
"name": "ApiTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "Luis",
"license": "MIT",
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/preset-env": "^7.3.1",
"#types/frisby": "^2.0.5",
"#types/jest": "^24.0.6",
"babel-jest": "^24.1.0",
"eslint": "^5.14.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.16.0",
"faker": "^4.1.0",
"frisby": "^2.1.1",
"jest": "^24.1.0"
},
"dependencies": {
"axios": "^0.18.0",
"dotenv": "^6.2.0"
}
}
I want that VSCode suggest me to import
import axios from 'axios';
import frisby from 'frisby';
I installed auto import and npm intellisense but doesn't work for me, what can I do?
I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},
I have been killing myself over this to work for days, but to no avail.
I am using ReactJS and Babel. I have node JS installed as well as webpack.
It is a simple Hello World app.
The error I get is:
Uncaught SyntaxError: Unexpected token import
Here is the source code:
package.json
{
"name": "app",
"version": "1.0.0",
"main": "webapp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-react": "^6.3.13",
"express": "^4.15.3",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.5.1"
},
"description": ""
}
webpack.config.js
var path = require('path');
module.exports = {
entry: './webapp.js',
output: {
path: './',
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
webapp.js
var express = require('express')
var app = express();
app.use(express.static('static'));
var server = app.listen(3000, function() {
var port = server.address().port;
console.log("Started server at port", port);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="App.js">
</script>
</body>
</html>
App.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Your webpack is configured to build webapp.js source. This is server side node applications. So add this:
target: "node"
to your webpack config.
This option enable node build environment.
In order to build client application you need another configuration.
The webpack config must have
target: "web"
entry: './App.js',
And your html must have:
<script type="text/javascript" src="index.js">
instead of
<script type="text/javascript" src="App.js">
Because browser can not understand modern syntax. And you need to build and load compiled js bundle.
To add to what oklas mentioned,
I noticed that you have:
test: /\.js$/,
instead you should have:
test: /\.jsx?/,
(because the react preset is looking for jsx in order to transpile it to js)
If after that change you still have issues, I'd recommend npm i -D the latest babel presets, as follows:
module.exports = {
mode: 'development',
target: 'web',
entry: `${SRC_DIR}\\app.jsx`,
output: {
filename: CHANGE_ME,
path: DIST_DIR
},
module: {
rules: [
{
test: /\.jsx?/,
include: SRC_DIR,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-react', '#babel/preset-env']
}
},
I have a project that is using ES2015 for the code, and also using Riot.
(The Riot components, however, do not need to be in ES2015, just old JS)
I am also using Webpack to build the project.
The problem I am getting is :
"ERROR in ./src/test-tag.tag
Module parse failed:
.../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag
Unexpected token (5:18) You may need an appropriate loader to handle
this file type."
It is complaining because of the way riot component script code looks, ie. a function must have just this for it's declaration functionName() { /* the code */ } , ie. there is no keyword function.
Here is my full project
app.js
import 'riot';
import 'test-tag.tag';
riot.mount("*");
test-tag.tag
<test-tag>
<h1>This is my test tag</h1>
<button onclick{ click_action }>Click Me</button>
<script>
//click_action() { alert('clicked!'); }
</script>
</test-tag>
index.html
<html>
<head></head>
<body>
<test-tag></test-tag>
<script src="app_bundle.js"></script>
</body>
</html>
package.json
{
"name": "riot_and_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015-riot": "^1.1.0",
"riot": "^2.5.0",
"riotjs-loader": "^3.0.0",
"tag": "^0.3.0",
"tag-loader": "^0.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
const path = require('path');
const PATHS = {
src: path.join(__dirname + '/src'),
dist: path.join(__dirname + '/build'),
};
module.exports = {
entry: [path.join(PATHS.src, '/app.js')],
resolve: {
modulesDirectories: ['node_modules', '.'],
extension: [ '.js' ]
},
output: {
path: PATHS.dist,
filename: 'app_bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
riot: 'riot'
})
],
module: {
preLoaders: [
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{ test: /\.tag$/, loader: 'tag' },
]
}
};
Now - that will all work as expected, except that clicking the button does nothing because that code is commented out.
If the click_action line in test-tag.tag is uncommented, then $ webpack results in the error quoted at the top of this (horribly huge) question.
Is there any way I can get webpack to accept the standard riot code?
OR
Is there a different way I can define riot internal functions in a way that webpack will not complain about?
Have in mind that the "ES6 like" method syntax is something added by Riot, is not standard ES6.
This will be the standard js syntax
this.click_action = function() {
alert('clicked!')
}
And this the es6 syntax
this.click_action = () => {
alert('clicked!')
}
Also you have a typo in your button definition, it will be like this
<button onclick={click_action}>Click Me</button>
I am trying to get basic karma-jasmine test running but I get the following error.
Chrome 51.0.2704 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Unexpected anonymous System.register call.
at D:/git/ui-components/jspm_packages/system.src.js:2891
Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Test doesn't seem to be running as well.
Folder structure is as following:
components
-[individual components]
-tests folder with simple test
-app.js(includes master component which calls all child components)
Application is working fine, but I am running into lot of problems with testing.
Any kind of help is appreciated.
Following is my package.json file
{
"name": "ui-components",
"version": "1.0.0",
"description": "POC",
"main": "index.js",
"scripts": {
"install": "jspm install && typings install",
"start": "gulp serve"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-typescript": "^2.12.2",
"gulp-watch": "^4.3.5",
"jasmine": "^2.4.2",
"jasmine-core": "^2.4.1",
"jspm": "^0.16.30",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "file:C:\\Users\\*********\\Downloads\\karma-cli-master",
"karma-jasmine": "^0.3.6",
"karma-jspm": "^2.0.2",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
},
"jspm": {
"dependencies": {
"angular": "github:angular/bower-angular#^1.5.0",
"angular-route": "github:angular/bower-angular-route#^1.5.0",
"bootstrap": "github:twbs/bootstrap#^3.3.6",
"css": "github:systemjs/plugin-css#^0.1.20"
},
"devDependencies": {}
}
}
karma.config.js file
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'jspm'],
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
firstTest.spec.js file
import angular from 'angular';
describe("Hello World Tests", () => {
it("First", () => {
expect("TestString").toEqual("");
});
});
Index.html file
<html ng-app="app">
<head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script>
System.import("components/app.js");
</script>
</head>
<body>
<main-component></main-component>
</body>
</html>
app.ts file
import * as angular from 'angular'
import 'components/mainComponent/mainComponent'
angular.module("app", ['mainComponent']);
I figured out that I needed to pass in my .ts files in JSPM array object in karma.config.js file. I couldn't just pass files into following block.
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
]`
instead this is what it required.
jspm: {
config: "config.js",
packages: "jspm_packages/",
loadFiles: ['components/**/*spec.js'],
serveFiles: ['components/**/*.js']
},
Hopefully this helps someone else.