This is my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
Here's where the error comes from. \client\src\components\AddBook.js:
const { handleSubmit, pristine, reset, submitting } = this.props;
The error message
11 | }
12 |
> 13 | const { handleSubmit, pristine, reset, submitting } = this.props;
| ^
14 |
15 | const handleSubmit = (allValues) => {
16 | console.log('formData:', allValues);
I thought #babel/preset-env took care of all the latest JavaScript syntax. What does make the code break?
The complete repo is on https://github.com/ElAnonimo/booklist
Your .babelrc does not explicitly define which browsers/versions it is supposed to transpile code for.
Adjust the following sample .babelrc to your needs:
{
"presets": [
[ "#babel/preset-env", {
"targets": {
"browsers": [ "last 1 version", "ie >= 11" ]
},
"#babel/preset-react"
]
]
}
https://babeljs.io/docs/en/babel-preset-env#targets
Also when using webpack you need to tell babel-loader explicitly to respect .babelrc and where it is located.
loader: 'babel-loader',
options: {
babelrc: path.join(process.cwd(), './babelrc')
}
, assuming .babelrc is located in your project's root directory.
Related
It's my first time using webpack to compile my scss. I'm trying to start it but I get an error. It says:
Field 'browser' doesn't contain a valid alias configuration
And also:
Module not Found: Error: Can't resolve './src'
Furthermore, in red, it'll log my file directory with /index doesn't exist (.js / .json / .wasm). This is my current webpack.config.js file:
module.exports = [{
entry: 'mat-design.scss',
output: {
filename: 'style-bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'styles.scss',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
mode: development,
webpackImporter: false,
},
},
]
}
]
},
}];
Any help would be much appreciated.
Looks like you are missing the resolve module to inform webpack what file type to look for when you have a file name without an extension
Add the following block to your configuration
module.exports = [{
entry: 'mat-design.scss',
(...)
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
modules: ['src', 'node_modules'] // Assuming that your files are inside the src dir
}
}]
Ref - https://webpack.js.org/configuration/resolve/
When I tried to run unit tests using mocha, I got the following error:
> plan#1.0.0 test /root/project/plan
> NODE_PATH=app/scripts:test mocha
/root/project/plan/test/specHelper.js:3
import chai from 'chai';
^^^^^^
SyntaxError:
Unexpected reserved word
------------------------
Apparently mocha fails to apply babel to the new es6 syntax.
Here is the content of the specHelper file:
import chai from 'chai';
import sinonChai from 'sinon-chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(sinonChai);
chai.use(chaiEnzyme());
chai.config.includeStack = true;
GLOBAL.expect = chai.expect;
GLOBAL.AssertionError = chai.AssertionError;
GLOBAL.Assertion = chai.Assertion;
GLOBAL.assert = chai.assert;
Here is the content of mocha.opts
--reporter min
--ui bdd
--compilers js:babel-register,less:test/ignoreCompiler,css:test/ignoreCompiler
--recursive
When I run webpack to build source code, I do not encounter any issue.
NODE_ENV=production webpack -p --config webpack.config.js
Module part in the Webpack.config.js
config.devtool = 'cheap-module-eval-source-map';
config.entry.push('webpack-dev-server/client?http://127.0.0.1:8892');
config.entry.push('webpack/hot/only-dev-server');
config.entry.push('react-hot-loader/patch');
config.output.publicPath = 'http://127.0.0.1:8892/';
config.module.rules.push({
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
include: [path.join(__dirname, 'app'), path.join(__dirname, 'test')],
});
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
Content in .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}],
"react",
"stage-0"
],
"env": {
"es": {
"presets": [["env", { "loose": true, "modules": false }], "react", "stage-0"]
},
"test": {
"presets": [
["env", {
"targets": {
"node": "7.10.1"
}
}],
"react",
"stage-0"
]
}
}
}
What did I missed in term of configuration and caused this SyntaxError?
I'm trying to load a JSON file into my ReactJS application, but any of the following methods I've tried the following:
Require:
const countries =require('../../json/countries.json');
// Also fails the exact same way with redundant parse call:
const countries = JSON.parse(require('../../json/countries.json'));
Importing using json-loader:
import countries from '../../json/countries.json';
Using the following loader in loaders
{
test: /\.json$/,
loader: 'json-loader'
}
The JSON loads, but fails to parse:
./src/app/json/countries.json
Module build failed: SyntaxError: /src/app/json/countries.json:
Unexpected token, expected ; (2:6)
1 | {
> 2 | "BD": "Bangladesh",
| ^
3 | "BE": "Belgium",
4 | "BF": "Burkina Faso",
5 | "BG": "Bulgaria",
The countries.json file is valid JSON downloaded from http://country.io, but it seems the quotes are causing an issue. But this is valid JSON being loaded by JavaScript, so it should work together seamlessly.
Any idea what the problem is?
SOLVED
I solved this issue by changing the loader directive into use:
let config = {
module: {
loaders: [
...
{
test: /\.json$/,
use: {
loader: 'json-loader'
}
}
]
}
};
You are loading a json file already, no need to parse it.
If it was a string you could parse it.
Here is a small example to demonstrate the difference:
const json = {
"BD": "Bangladesh",
"BE": "Belgium",
"BF": "Burkina Faso",
"BG": "Bulgaria"
}
const strJson = `{
"BD": "Bangladesh",
"BE": "Belgium",
"BF": "Burkina Faso",
"BG": "Bulgaria"
}`
console.log('string parsed to a json',JSON.parse(strJson));
console.log('regular json',json);
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>
So ava comes with build-in ES2015 support, which works fine for my actual test files. However, when I do
import {newUser, createUser, login} from './helpers/user';
I can't use import and export in the helper file, I then get:
Users/rowe/Code/fv/foxvision-api/test/api/helpers/user.js:1
(function (exports, require, module, __filename, __dirname) { import request from 'supertest';
SyntaxError: Unexpected token import
I have no specific babel configuration set up as for the test files it works out of the box. Can anyone explain to me why the helper dependencies are not transpiled with babel? Using test/**/helpers is even following ava convention.
Thanks,
Robin
Solution
So based on thangngoc89's solution, what I did to make it work was:
Add a .babelrc with content:
{
"presets": [
"es2015",
"stage-2"
],
"plugins": [
"espower",
"transform-runtime"
]
}
Added to package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}
AVA only transpile the test files. Not test dependencies so you will need to setup babel in your project (I suppose you did it because you're using ES6 anyway).
Then in AVA's setting, add this :
"ava": {
...
"babel": "inherit"
}
It means that use your project babel setting to transpile the test dependencies. See more information in AVA docs: https://github.com/sindresorhus/ava/blob/master/docs/recipes/babelrc.md
Using rweng, my solution came out a bit simpler.
.babelrc
{
"presets": [
"es2015"
],
"plugins": [
"transform-runtime"
]
}
package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}
Unfortunately standard solution didn't work for my case.
Here is my solution which worked for ava + quasar + vue project
.babelrc
{
"presets": [
"es2017",
"#ava/stage-4",
"stage-3"
],
"plugins": [
"transform-runtime"
]
}
package.json
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
},
"scripts": {
"ava": "NODE_ENV=test ava",
"test": "ava",
"test:watch": "ava --watch --verbose"
}
install modules
yarn add babel-register babel-preset-es2017 #ava/babel-preset-stage-4 babel-plugin-transform-runtime babel-preset-stage-3 --dev