react, wepack, babel, node, npm start error - javascript

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-es2015' from 'F:\reactapp'
at Function.module.exports [as sync] (F:\reactapp\node_modules\resolve\lib\sync.js:43:15)
at resolveStandardizedName (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (F:\reactapp\node_modules#babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:154:9)
at items.map (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:109:50)
at Array.map ()
at createDescriptors (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:101:10)
at passPerPreset (F:\reactapp\node_modules#babel\core\lib\config\config-descriptors.js:58:96)
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./main.js main[2]
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ?wdm?: Failed to compile.
Terminate batch job (Y/N)?
package.json file:
package json file is as follows. I followed https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
{
"name": "reactapp",
"version": "1.0.0",
"description": "demo project",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [
"[]"
],
"author": "manjunathan g",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.2.3",
"#babel/preset-env": "^7.2.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
babel config:
Babel config file is as below; followed as per https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
{
"presets":["env", "react"]
}
webpack config
webpack config is as follows:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/es2015'],
plugins: ['#babel/proposal-class-properties']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}

The #babel/preset-es2015 package has been deprecated and you can no longer install it from NPM.
The recommendation now is to use #babel/preset-env instead.

There are a lot of mistakes in your file configuration. Let me try to solve it:
.babelrc
You don't need the following devDependencies: babel-core, babel-preset-env, babel-preset-react and babel-preset-es2015. They are deprecated since Babel 7 was realeased. Substitute your code to this:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
webpack.config.js
Since webpack 4 was released, you don't need to inform the entry and output fields (You can do it for custom configurations). By default, webpack will look for index.js file located in the src/ directory (this directory must be in the root of your project). Webpack will create the module dependency graph from this file and output the bundled file to the dist/ directory. Try to configure your webpack.config.js like this:
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: { loader: "html-loader" } //Install it: 'npm i -D html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html" // Put the index.html in the src/ directory
})
]
}
I'm not an expert in configuring webpack and I don't know if I could help you. I wrote an article on medium setting the environment to work with react, babel and webpack, but it is in portuguese. If you want to check: https://medium.com/#brunonakayabu/react-webpack-e-babel-configurando-o-ambiente-de-desenvolvimento-c7ee8a994222

Related

Webpack css-loader: "Module not found: Error: Can't resolve 'main.css' in ..."

I am trying to include my css in the server hosted by webpack-dev-server. For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript.
I can't get it to work.
I follow the instructions here, yet I get the following error:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
# ./src/index2.js 1:0-27
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
I know for certain that main.css is in the same folder as index2.js
My Settings
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
One Fix
One fix is to use import css from './main.css'; instead of import css from 'main.css'; (note the ./ infront of the file name).
That does not feel right though, because the css-loader site shows that it should be the latter, not the former.
Is it a typo in the docs?
Thank you.
It is not really a typo. If you import it like this:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. This is necessary, when you for example installed the bootstrap package and want to import its css. So when your css file comes from a dependency, you import that dependency like this. But when you want to import a lokal file, always use relative paths.
So it must be: import css from './main.css';
Further Reading:
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolve-modules

Module functions after bundle with Webpack aren't recognized

I'm trying to bundle my node.js project into one single file, which would contain all the modules that it needs, by using webpack.
After creating a bundle.js file, I cannot run it because some functions from required modules are not recognized:
In the Server.js file I had required 'http' , and used http.createServer() function.
When I'm running the file, it says: TypeError: r.createServer is not a function
How can I bundle the project with all of it's modules correctly?
Relevant parts of my Package.json file:
"dependencies": {
"lodash": "4.17.4"
},
"devDependencies": {
"babel-loader": "^7.1.4",
"eslint": "^4.19.1",
"jasmine": "^3.1.0",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
},
"scripts": {
"test": "npm run lint && jasmine",
"lint": "sh util/lintRunner.sh",
"fix": "sh util/lintFixer.sh",
"build": "webpack -p",
"clean": "rm -rf dist/"
}
My webpack.comfig.js file:
const path = require('path');
module.exports = {
entry: [
'./Server/Server.js',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
node: {
fs: 'empty',
dns: 'empty'
}
};
You need to tell WebPack where your bundled javascript is going to run; in this case in a nodejs environment.
Try adding target: 'node' to your configuration.
Read more about the target attribute: https://webpack.js.org/concepts/targets/

Can't resolve "app.js" - Webpack

Problem
So, i'm working a web app using Webpack and ES6. When I try to run Webpack, it tells me that it can't resolve "app.js". I've looked all across the internet for a solution, but I just couldn't find one, can someone help me?
The Full error is:
ERROR in ./assets/js/main.js
Module not found: Error: Can't resolve 'app.js' in 'C:\Users\sidna\Dropbox\Dev Stuff\Web Apps\Mondrian Generator\assets\js'
# ./assets/js/main.js 4:0-17
webpack.config.js
module.exports = {
entry: './assets/js/main.js',
output: {
filename: 'assets/js/build.js',
},
watch: true,
module: {
loaders: [
{
test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
}
};
app.js (Empty)
main.js
// SCRIPTS
require("app.js");
// STYLES
require("../css/large.scss");
package.json
{
"name": "mondrian-generator",
"version": "1.0.0",
"description": "Create your own Mondrian",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"webpack": "^2.4.1"
}
}
When the import is neither an absolute path (starting with /) nor explicitly a relative path (starting with ./ or ../), it is resolved as a module, which means it's Loading from node_modules Folders.
Your app.js is not in node_modules, so you need to change it to a relative path (assuming it's in the same directory as main.js):
require("./app.js");
Webpack follows the import behaviour of Node.js, but it also allows you to change it with the resolve.modules option.

Webpack can't handle JSX even with appropiate loaders

First of all, i know that there are various questions like this in SO. I followed them but i'm still getting an error. I'm learning React.js with gulp, and now i wanted to move to webpack to have hot code reloading on browser. I'm learning to configure webpack based on this code:
https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react
When i run webpack --watch command, i get this error:
Hash: 826e21c818de1882d366
Version: webpack 1.13.1
Time: 42ms
[0] ./js/scripts.js 0 bytes [built] [failed]
ERROR in ./js/scripts.js
Module parse failed: C:\Users\Oscar\Documents\Proyectos\react_webpack/src\js\scripts.js Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:16)
at Parser.pp$4.raise (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\Users\Oscar\Documents\Proyectos\react_webpack\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
This is the structure of my project:
|-- node_modules
| |-- //I have all the libraries listed in package.json below
|-- src
| |-- js
| | |-- comments.jsx
| | |-- scripts.js
| |-- index.html
|-- .babelrc
|-- package.json
|-- webpack.config.js
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var SRC_FOLDER = __dirname + "/src";
module.exports = {
context: SRC_FOLDER,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /js\/\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: SRC_FOLDER + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
package.json
{
"name": "react_webpack",
"version": "1.0.0",
"description": "Learn how to use webpack",
"main": "webpack.config.js",
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.13.1",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {
},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
.babelrc
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
And the entry point which trows the error, scripts.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Comment, CommentsList} from 'comments';
ReactDOM.render(<CommentsList />, document.getElementById("app"));
I don't think is necessary to post comments.jsx, since i already tested it in my app when i was using gulp and works without problems.
What i have tried to fix it, but hasn't worked:
Create the .babelrc file, even when i set the presets in webpack.config.js
Execute webpack with --config flag to check if it can find the config file
Using the same libraries used in the github repo project (when i download that source code and execute webpack --watch it works)
Check that it founds every file (comments.jsx, scripts.js)
Changed extension to js or jsx (and updating webpack.config.js) to check if it is because of file extension
All the problem is caused in scripts.js in this line:
ReactDOM.render(<CommentsList />, document.getElementById("app"));
Exactly when < starts. It can't handle JSX even when i added necessary presets and have all dependencies.What could be happening?
In this case you need remove js\/ from RegExp
test: /\.jsx?$/
because /js\/\.jsx?$/ matches files like this
console.log(/js\/\.jsx?$/.test('js/.jsx'));
console.log(/js\/\.jsx?$/.test('js/.js'));

Webpack and React -- Unexpected token

I am new to React and Webpack. I am setting up my first project, when I try to run the webpack-dev-server my code does not compile!
Update
Answer below is correct. I needed to add 'react' to babel loader presets. You can see the full source for project here: https://github.com/cleechtech/redux-todo
Error:
$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./dist
Hash: d437a155a1da4cdfeeeb
Version: webpack 1.12.14
Time: 5938ms
Asset Size Chunks Chunk Names
bundle.js 1.51 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] multi main 28 bytes {0} [built] [1 error]
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/connorleech/Projects/redux-todo/src/index.js: Unexpected token (7:16)
console.log(ReactDOM);
ReactDOM.render(<App />,document.getElementById('root'));
src/index.js:
var react = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');
console.log(ReactDOM);
ReactDOM.render(<App />,document.getElementById('root'));
src/components/App.js
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>
<h1>I am app!</h1>
</div>
);
}
});
console.log(App);
module.exports = App;
dist/index.html
<!doctype html>
<head>
<title>Redux todo</title>
</head>
<body>
<h1>Hello world</h1>
<div id='root'></div>
<script src='bundle.js'></script>
</body>
And finally here is my webpack config and package.json:
module.exports = {
// starting point
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
// create bundle.js file
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
package.json
{
"name": "redux-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cleechtech/redux-todo.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/cleechtech/redux-todo/issues"
},
"homepage": "https://github.com/cleechtech/redux-todo#readme",
"dependencies": {
"react": "^0.14.8",
"react-dom": "^0.14.8",
"react-redux": "^4.4.1",
"redux": "^3.3.1"
},
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"webpack": "^1.12.14"
}
}
You also need to add the react preset into your babel-loader config
And it must come after the es2015
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015', 'react']
}
}
The problem you're experiencing happens because for babel to know how to transpile JSX - it should know its syntax, which it does not out of the box.
As it was mentioned in the comments - you would also have to install the babel-preset-react npm package (which would obvious anyway since the babel would tell it to you on the first run anyway).
References:
https://babeljs.io/docs/plugins/preset-react/

Categories

Resources