why webpack does not like this expression - javascript

I tried to build my reactjs app using webpack and babel.
I started this app from react starter which comes with react-scripts build which worked before. However, it's a black box and didn't really provide all the features I need, especially when it comes to that a module doesn't like UglifyJS.
My webpack.config.js looks like this which is pretty simple:
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname, 'build_webpack');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
}
and I have this config in my package.js:
"scripts": {
"start": "react-scripts start",
"reactbuild": "react-scripts build",
"webpackbuild": "webpack --watch",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Also my .babelrc file only has this:
{
"presets" : ["es2015", "es2016", "react"]
}
However, the code that worked in react-scripts build failed here, and the error output says:
ERROR in ./src/Pages/SearchTool/SearchResult.js
Module build failed: SyntaxError: Unexpected token (100:13)
(the error is referring to the data input argument)
renderChip = (data) => {
return (
<Chip
key={data.key}
I don't really see what is so special about this expression. I don't think this is very commonly used but should be legal though. Also, one reason that I switched to webpack was that the previous react build doesn't like es6, but one of my module which is important is written in es6.
I wonder what was missing in my config or other places. Thanks for all the help!
Edit:
my package.js:
{
"name": "myCoolApps",
"version": "0.1.0",
"private": true,
"devDependencies": {
"css-loader": "^0.26.1",
"react-scripts": "0.7.0",
"webpack": "^1.13.3"
},
"dependencies": {
"ace": "git+https://github.com/ajaxorg/ace.git#master",
"antd": "^2.7.2",
"axios": "^0.15.3",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"card": "^2.2.1",
"card-react": "^1.2.6",
"chat-template": "0.0.22",
"codemirror": "^5.25.0",
"credit-card-type": "^5.0.1",
"css-loader": "^0.26.1",
"d3": "^4.7.4",
"firechat": "^3.0.1",
"firepad": "^1.4.0",
"flux": "^3.1.0",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0",
"history": "^1.17.0",
"little-loader": "^0.2.0",
"lodash": "^4.17.4",
"material-ui": "^0.16.6",
"moment": "^2.17.1",
"node-sass": "^4.5.0",
"quill": "^1.2.3",
"rc-calendar": "^7.6.5",
"react": "^15.5.4",
"react-autosuggest": "^7.0.1",
"react-cookie": "^1.0.4",
"react-credit-card": "^0.20.0",
"react-dom": "^15.5.4",
"react-dropzone": "^3.8.0",
"react-event-timeline": "^1.2.2",
"react-infinite": "^0.10.0",
"react-infinite-scroller": "^1.0.7",
"react-list": "^0.8.3",
"react-notification-system": "^0.2.12",
"react-router": "^3.0.0",
"react-tap-event-plugin": "^2.0.1",
"seedrandom": "^2.4.2",
"simplewebrtc": "^2.2.2",
"style-loader": "^0.13.1",
"superagent": "^3.3.1",
"webpack": "^1.15.0",
"y-array": "^10.0.6",
"y-indexeddb": "^8.1.9",
"y-leveldb": "0.0.1",
"y-map": "^10.0.5",
"y-memory": "^8.0.8",
"y-richtext": "^9.0.8",
"y-text": "^9.3.2",
"y-webrtc": "^8.0.7",
"y-websockets-client": "^8.0.15",
"yjs": "^12.1.7"
},
"scripts": {
"start": "react-scripts start",
"reactbuild": "react-scripts build",
"webpackbuild": "webpack",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
UPDATE:
I tried the env preset, and now my webpack.config.js looks like this:
{
"presets":
[
"react",
[
"env",
{
"targets": {
"uglify": false,
"node": "current",
"debug": true,
},
}
],
],
}
However, it still complains about this expression:
ERROR in ./src/Pages/SearchTool/SearchResult.js
Module build failed: SyntaxError: Unexpected token (100:13)
98 | }
99 |
> 100 | renderChip = (data) => {
| ^
101 | return (
102 | <Chip
103 | key={data.key}
# ./src/Pages/Connections/Connections.js 43:20-57
The function originally looks like this in the program (Note: it is inside a class):
renderChip = (data) => {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
And also I tried include plugins manually
The place this function in my class looks like:
class Name extends Component {
constructor(props) {...}
renderChip = (data) => {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
render() {...}
}
I manually included transform-es2015-function-name and transform-es2015-arrow-functions, but they didn't work. Are there some other plugins I need to include manually? Or is it caused by some other reason?
Solved
The solution is changing the function experssion to:
renderChip() {
...
}

Please add babel-preset-env package.
Your .babelrc should look something like this: (["env" ...] part is important here)
{
"presets": [
["env", {
"targets": {
"uglify": true,
"node": "current"
}
}]
]
}
Reading the docs I mentioned above. UglifyJS does not support ES6. It is recommended to use babel-minify instead.
UglifyJS does not currently support any ES6 syntax, so if you are
using Uglify to minify your code, targeting later browsers may cause
Uglify to throw syntax errors.
To prevent these errors - specify the uglify option, which will enable
all plugins and, as a result, fully compile your code to ES5. However,
the useBuiltIns option will still work as before, and only include the
polyfills that your target(s) need.
UPDATE:
Try installing/reinstalling these packages. you may not need all of them, but you may find use in them later on.
npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env babel-register babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-plugin-transform-regenerator
Write
renderChip(data) {
instead of
renderChip = (data) => {

You can't declare class methods with assignment operator directly in class body, instead you can do following.
renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
You can read about ES6 classes here.
Hope this helped!

Related

Module parse failed for wasm module generated by rust wasm-pack

I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.
When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.
I then import my rust function into a typescript file like:
import { run } from '../../../../Rust/skunk/pkg/skunk_lib';
My package.json looks like this:
{
"name": "skunk_interactive",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"primeicons": "^5.0.0",
"primevue": "^3.12.6",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.17",
"#vue/cli-plugin-eslint": "~4.5.17",
"#vue/cli-plugin-router": "~4.5.17",
"#vue/cli-plugin-typescript": "~4.5.17",
"#vue/cli-plugin-unit-jest": "~4.5.17",
"#vue/cli-plugin-vuex": "~4.5.17",
"#vue/cli-service": "~4.5.17",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^2.0.0-0",
"#wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
When I try to run npm run serve I get the following error:
Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| case 0:
| if (typeof input === 'undefined') {
> input = new URL('skunk_lib_bg.wasm', import.meta.url);
| }
|
I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.
I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.
Any thoughts on what might be going wrong?
I ran into a problem with the '#wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.
I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js
21 │ plugins: [
22 │ new WasmPackPlugin({
23 │ crateDirectory: __dirname,
24 + │ extraArgs: "--target web"
25 │ }),
26 │ ]
rust side preperation
in cargo.toml file
[dependencies]
wasm-bindgen="0.2.63"
[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]
inside rust file
use wasm_bindgen::prelude::*;
Inside .rs file you have to decorate any function or type with #[wasm_bindgen]
#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
Yes,
No,
}
Javascript preparation:
You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.
// package.json of your javascript project
"dependencies": {
// other dependencies
.....
// assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
"skunk_lib": "file:../pkg",
},
run npm install to load the pkg module. skunk_lib should be in the node_modules
Inside your javascript file:
// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";

Configure imports relative to root directory in create-react-library library

I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it between applications. I am able to create the library, publish to a private git registry, and consume it in other applications. The issue is that I have had to change all of my imports to relative imports which is rather annoying as I am planning on porting over a large amount of components, hocs and utils.
The entry point of the package is the src dir. Say I have a component in src/components/Text.js and a hoc in src/hoc/auth.js. If I want to import withAuthentication from src/hoc/auth.js into my Text component, I have to import it like import { withAuthentication } from "../hoc/auth" but I'd like to be able to import with the same paths I have in my existing application so it's easy to port over components, like import { withAuthentication } from "hoc/auth"
I have tried a lot of config options, jsconfig.json the same as my create-react-app application, manually building my library with rollup rather then using create-react-library so I'd have more config options but to no avail.
Below are the relevant bits from my package.json as well as my jsconfig.json, any help would be greatly appreciated, I am sure I am not the only person who's had this issue.
Here's the package.json
{
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0",
"react-html-parser": "^2.0.2",
"lodash": "^4.17.19",
"#material-ui/core": "^4.11.0",
"react-redux": "^7.1.1",
"redux": "^4.0.1",
"redux-localstorage": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"react-router-dom": "^5.1.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"react-svg": "^12.0.0",
"reselect": "^4.0.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4"
},
"dependencies": {
"node-sass": "^7.0.0"
}
}
and here's the jsconfig:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
The example from the following link maybe you should navigate to your src file from the BaseUrl, or if you "src" is in the same directory as your config it should be only "."
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
Example from link above:
{
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
}
}
}
You need to do 3 things
tsconfig.json this enables typescript autocomplete
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"],
"src": ["./src"]
}
}
}
babel.config.js this plugin resolves relative modules
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
src: './src'
}
}
]
]
}
package.json // install babel-plugin-module-resolver
{
//...
"devDependencies": {
//...
"babel-plugin-module-resolver": "^3.2.0",
// ...
}
}

getting rid of relative path react (removing "../..")

I have downloaded a react project with the following package.json :
{
"private": true,
"main": "src/index.js",
"dependencies": {
"#material-ui/core": "4.10.0",
"#material-ui/icons": "4.9.1",
"classnames": "2.2.6",
"history": "4.10.1",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"react-slick": "0.26.1",
"react-swipeable-views": "0.13.9"
},
"devDependencies": {
"#babel/cli": "7.10.1",
"#babel/plugin-proposal-class-properties": "7.10.1",
"#babel/preset-env": "7.10.1",
"#babel/preset-react": "7.10.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-react": "7.20.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "2.0.5"
},
"optionalDependencies": {
"typescript": "3.9.3"
},
"scripts": {
"start": "NODE_PATH=src/ react-scripts start",
"build": "react-scripts build && gulp licenses",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist",
"compile-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css",
"minify-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css --source-map true"
}
}
I dont know how the developer got rid of relative path in his code.
for example he imports modules like:import Header from "components/Header/Header.js";
although if I try to the same , i should do it like:import header from "../../../src/components/Header/header.js".
the link to the original github:
https://github.com/creativetimofficial/material-kit-react/
i have downloaded and installed this one , it works fine.
but when i try to copy some of the codes,it doesnt work.
use the jsconfig.json to set absolute path instead of reletive , as described in documentation
in the provided project he used
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
so he could accees all files using a absolute path , in all folder and subfolders of the project like
import file from "component/file/file.js"
In the root directory of your project, create a jsconfig.json file and save this;
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"exclude": ["node_modules"]
}
If you are using eslint in your project, you'll need to add this in your .eslintrc.js file;
...
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
...
You should be able to import files by their absolute path now.

Plugin/Preset files are not allowed to export objects, only functions. Removing and keeping babel installs? Selection with webpack?

I'm trying to learn how to write a React App and set up from practically scratch.
I keep trying to run webpack --config webpack.dev.config.js.
I keep getting this error. And I've tried using different loaders and presets.
What is wrong with my setup? Is it my npm node modules are outdated?
I've tried updating all my presets, loaders and even babel itself.
Error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
webpack.dev.config.js:
var path = require('path');
module.exports = {
mode: 'development',
// context: path.resolve(__dirname, 'src'),
entry: path.resolve(__dirname,'src/index.js'),
output: {
filename: 'main.js',
libraryTarget: "commonjs2"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ['transform-class-properties']
}
}
]
}
]
},
resolve: {
extensions: ['.js']
}
};
package.json :
{
"name": "react-imgur-album",
"version": "0.0.1",
"description": "React Component for displaying images in an Imgur Album",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.config.js --progress --display-error-details"
},
"keywords": [
"imgur",
"react",
"react-components",
"component",
"images",
"photos",
"pics"
],
"author": "Kyle Calica",
"license": "ISC",
"dependencies": {
"#babel/preset-react": "^7.0.0",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"fixed": "^0.3.0",
"it": "^1.1.1",
"path": "^0.12.7",
"react": "^16.5.2",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
index.js:
import React, { Component } from 'react';
var imgurAPI = 'https://api.imgur.com/3/album/';
export default class ImgurAlbum extends Component {
constructor(props){
super(props);
this.state = {
imgurPosts: [],
isLoading: true
};
}
componentDidMount(){
fetch(imgurAPI + this.props.album + '/images',{
'headers':{
'Authorizathion': 'client-id'
}
}).then(res => res.json())
.then(data => console.log(data));
}
render(){
return(
<div>
<h1>hi!</h1>
</div>
);
}
}
I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?
I found my solution!
It's a babel mismatch.
I had an old babel-core and babel-presets installed.
In Babel 7, it is best to install using:
npm i #babel/preset-react #babel/preset-env
then in your .babelrc:
{
"presets" : ["#babel/preset-env","#babel/preset-react"]
}
I also uninstalled the old babel-preset-react and babel-preset-es2015 for safe measure.
Still learning so I might be missing steps or understanding here. Please add if you believe you need more information or if I am wrong about anything, but I was able to get mine to build

Babel Decorators transform, constantly get unexpected token (with react project) no matter what I try

I've done a fair amount of searching through StackO trying to find an answer but I keep coming up with the same error, unexpected token
Whenever I use the text decorator transpile to correct the error, I still get the same problem in my component.
My error is this:
./src/components/pages/projectpages/dnd2/Card.js
Syntax error: Unexpected token (71:0)
69 | };
70 |
> 71 | #DropTarget(ItemTypes.CARD, cardTarget, connect => ({
| ^
72 | connectDropTarget: connect.dropTarget(),
73 | }))
74 | #DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
and this is how I have it setup in my package.json (and I've tried Stage 1 with no success either)
{
"name": "my-app",
"version": "0.1.0",
"babel": {
"plugins": [
"transform-decorators"
]
},
"stage": 0,
"private": true,
"dependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"date-fns": "^1.28.5",
"dragula": "^3.7.2",
"flexbox-react": "^4.3.3",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"react": "^15.6.1",
"react-css-transition-replace": "^2.2.1",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dom": "^15.6.1",
"react-dragula": "^1.1.17",
"react-fa": "^4.2.0",
"react-flexbox-grid": "^1.1.3",
"react-fontawesome": "^1.6.1",
"react-image-compare": "0.0.1",
"react-jsonschema-form": "^0.49.0",
"react-modal": "^1.9.4",
"react-moment": "^0.2.4",
"react-router-dom": "^4.1.1",
"react-toggle-display": "^2.2.0",
"react-transition-group": "^1.2.0",
"simple-react-forms": "^1.3.0",
"styled-components": "^1.4.6",
"styled-props": "^0.2.0"
},
"devDependencies": {
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
What else am I missing here?
In your package.json file
"babel": {
"plugins": [
"transform-decorators"
]
},
should be replaced with
"babel": {
"plugins": [
"transform-decorators-legacy"
]
},
Bear in mind that decorators can be written as simple JS functions.
#DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))
is the equivalent to
DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))(YourClassName)
In other word, # symbol acts as (YourClassName) for whatever class that comes after the decorator.
You can read more about EcmaScript decorators here.
EDIT:
If you want to apply to or more of these you can either nest them like this
DropTarget(...)(DragSource(...)(YourClassName))
or like this
const withDropTarget = DropTarget(...)(YourClassName)
const withDragSource = DragSource(...)(withDropTarget)
export default withDragSource
or use a compose helper, which would allow you to write your code like this
const enhance = compose(
DropTarget(...),
DragSource(...)
)
export default enhance(YourClassName)
To enable decorators using Babel 6 and ES6 (annotations are a draft specification of ES7), you must do the following:
Firstly, install babel support for decorators using ES6:
npm i -S babel-plugin-transform-decorators-legacy
In case you used an old version of create-react-app for creating your app, you must also install support for decorators to react-scripts compiler:
npm i -S decorators-react-scripts
Then, modify the babelrc file to look like this:
{
"presets": ["es2015", "react"],
"plugins": ["transform-decorators-legacy"]
}

Categories