Develop Reference

Error displaying when run npm React JS

I followed a react configuration steps. And i finally try to run it is showing an error. Anyone who can help me please.
this is the config file webpack.config.js
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
> reactapp#1.0.0 start C:\Users\Muhammed Suhail\Desktop\reactApp
> webpack-dev-server --hot
× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp#1.0.0 start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactapp#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Muhammed Suhail\AppData\Roaming\npm-cache\_logs\2018-04-30T12_46_31_216Z-debug.log
This is the error message

This is the right way to do
module: {
rules: [ // Change this line
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
}
]
}
This should fix the issue if not write that down below.
Official webpack docs for babel-loader
How to use webpack loader?
Reference to use loaders with webpack
Babel loader with webpack
Usage for babel-loader plugin

Webpack babel-loader runtime: Module build failed: TypeError: this.setDynamic is not a function

I'm trying to use the babel-loader with the babel-plugin-transform-runtime.
I've followed the instructions at:
https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code
The relevant code:
rules: [
// the 'transform-runtime' plugin tells babel to require the runtime
// instead of inlining it.
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/transform-runtime']
}
}
}
]
And I get the following error on build:
Module build failed: Error: Cannot find module '#babel/plugin-transform-runtime'
If I'm changing the plugin name to: plugins: ['transform-runtime'], I get the following error:
Module build failed: TypeError: this.setDynamic is not a function
What is the problem?

After a struggle I've found the right way to do it.
Tl;dr
If you install the new babel loader, you should load the new babel plugins.
Full story
The install in the official docs:
npm install babel-loader#8.0.0-beta.0 #babel/core #babel/preset-env webpack
In the github page, these were the instructions for the runtime plugin:
NOTE: You must run npm install babel-plugin-transform-runtime
--save-dev to include this in your project and babel-runtime itself as a dependency with npm install babel-runtime --save.
Instead, you should use the new version like this:
npm install --save-dev #babel/plugin-transform-runtime
npm install --save #babel/runtime
Then it would work with the configuration in the documentation.

First, as #yccteam pointed one needs to have installed
npm install --save-dev #babel/plugin-transform-runtime
npm install --save #babel/runtime
.babelrc file should have
{
"presets": [
["#babel/preset-env", {
"debug": false,
"modules": false,
"useBuiltIns": false
}],
"#babel/preset-react"
],
"plugins": [
"#babel/syntax-dynamic-import",
"#babel/plugin-transform-runtime",
[ "#babel/plugin-proposal-class-properties", { "loose": true } ],
"#babel/transform-async-to-generator"
],
"env": {
"production": {
"presets": ["react-optimize"]
}
}
}
webpack.js file should look like
module: {
rules: [
{
test: /(\.js[\S]{0,1})$/i,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-react', '#babel/preset-env'],
plugins: ['#babel/proposal-class-properties']
},
},
...

Your webpack entry looks the same as the example, so I wonder what happens if you use .babelrc.
{
"plugins": ["transform-runtime"]
}
Do you have the env preset installed as well?

npm link with webpack - cannot find module

I'm trying to npm link a module to a project using webpack as its bundler. Of course, after trying many things, I keep getting this error:
ERROR in ./src/components/store/TableView.jsx
Module not found: Error: Cannot resolve module 'react-bootstrap-table'
Here are the exact steps I take when doing this:
1.) cd ../forks/react-bootstrap-table
2.) npm link
(success, checked ~/.nvm/.../node_modules/react-bootstrap-table for symlink and it's there)
3.) cd ../../projRoot/
4.) npm link react-bootstrap-table
(no errors thrown?, says successful link)
5.) node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
Solutions I've tried:
- https://webpack.github.io/docs/troubleshooting.html
- How to make a linked component peerDepdencies use the equivalent node_modules of the script being linked to?
- And many purple links on google serps
webpack.config.js
const webpack = require('webpack')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname)
module.exports = {
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
entry: [
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot','babel']
},
{
test: /\.scss$/,
loaders: ['style','css','sass'],
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: ['style','css']
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
fallback: path.resolve(__dirname, './node_modules')
},
resolveLoader: {
fallback: path.resolve(__dirname, './node_modules')
},
output: {
path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(ROOT_PATH),
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
stats: 'errors-only',
host: '192.168.1.115'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
Notes:
1. this is the only symlink in the project
2. I run npm install inside forked version (also tried without, doesn't work)
3. I use NVM, but I have used symlinks before without webpack successfully.
I've been at this for a few days now, any help will be much appreciated.

I was facing a similar issue with webpack and ended up by adding this my webpack.config.js:
module.exports = {
resolve: {
symlinks: false
}
};
Here is the link to webpack docs. Since your question there happened a lot to webpack and their api, so I do not know how much relevance my answer still has according to your question. But for people facing this or a similar issue today this could be a solution. As to be seen, there are still people complaining about:
Webpack GitHub Issue 1643
Webpack GitHub Issue 1866

Also make sure you have bundle and yarn installed and executed in the linked package

Okay guys, this is specific to my use case, but make sure to follow all the instructions to completely build the library you are symlinking. Initially, I a npm install and gulp build, but that wasn't enough. I had to run a few extra commands to get the library to fully build.
Now it works! If you are still having issues, go through the documentation for each library you are symlinking, and use my webpack config as a template for resolving external libraries.

Just in case it's useful for others, the solution of adding the resolve.symlinks configuration to false suggested by #Beat was not enough in my case, I had to perform the following steps to solve it:
In the library:
Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:
"peerDependencies": {
"react": "^16.8.6",
...
}
run npm install
build the library (in my case, with a rollup -c npm script
In my main app:
change the version of my library to point to my local project with a relative path in package.json, e.g.
"dependencies": {
"my-library": "file:../../libraries/my-library",
...
}
Add resolve.symlinks = false to my main app's webpack configuration
Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:
"scripts": {
"build": "set WEBPACK_CONFIG_FILE=all&& webpack",
"start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
run npm install
run npm run start

How to use babel-polyfill in gulpfile.js

In Babel docs they just say that to include import "babel-polyfill"; so that I can use ES6 generators but after I included that line in my gulpfile.js I still gen an exception : Uncaught ReferenceError: regeneratorRuntime is not defined
This is my gulpfile.js
import 'babel-polyfill';
var gulp = require("gulp"),
babel = require("gulp-babel"),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
gulp.task("babel", function() {
return gulp.src(jsSrc)
.pipe(concat('Main.js'))
.pipe(babel())
.pipe(gulp.dest(jsDest))
.pipe(rename('Main-min.js'))
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
jsSrc have maines6.js and other .js files. In maines6.js here is my generator:
function* anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
I don't know how to use this.. can you help me?

Since you're just using gulp and not some sort of module bundler(webpack for e.g)
You should follow this guide https://github.com/babel/gulp-babel#runtime
npm install --save-dev babel-plugin-transform-runtime
and then use it like this
.pipe(babel({
plugins: ['transform-runtime']
}))
Should do the trick :)
EDIT:
Seems that babel-plugin-transform-runtime add require calls to the transformed file, so I guess you'll need to use a module loader. I would suggest webpack, although there are alternative like browserify and jspm.
You'll need
npm install -g webpack
npm install babel-loader babel-core babel-polyfill babel-preset-es2015 --save-dev
Then you'll need to create a webpack.config.js file. Here's a very primitive setup.
module.exports = {
context: __dirname + '/app',
entry: ['babel-polyfill', './entries/index.js'],
output: {
path: 'dist',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
};
With the config above the file structure should looke like this
project/
node_modules/
app/
entries/
main.js
dist/
main.js
webpack.config.js
package.json
Then just run webpack from your command line. If you want to get the minified version run webpack -p

to include the polyfill you need to require it at the top of the entry point to your application.
import 'babel/polyfill' would need to go at the top of your jsSrc entry file

"Warning: Task "babel" not found. Use --force to continue."

I have this simple code on my gruntfile.js:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
babel: {
options: {
sourceMap: true
},
dist: {
files: {
"dist/app.js": ["src/app.js"]
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
But show me this error when run:
Warning: Task "babel" not found. Use --force to continue.
Aborted due to warnings.
Process finished with exit code 3
Any help? Never convert from ecmascript 6 to 5 :(
Here My files:
http://www.mediafire.com/download/nabq78bs323u47b/DemoBable.zip

I downloaded your code to try to help you. I did it. Please see my steps belows:
Step 1: Go to the root project directotry
cd DemoBable
Step 2: Install grunt
npm install --save-dev grunt
Step 3: Install load-grunt-tasks
npm install --save-dev load-grunt-tasks
Step 4: Install grunt-babel
npm install --save-dev grunt-babel
Step 5: Finaly, run it
grunt
The output should be:
Running "babel:dist" (babel) task
Done, without errors.
EDITED
To convert to code to ecma 5. Your gruntfile.js should be:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
"babel": {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: {
"dist/app.js": "src/app.js"
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
And you have to install babel-preset-es2015:
npm install --save-dev babel-preset-es2015