I am used to create react projects using create-react-app but i decided to create one without it but i am stuck in webpack configuration as i am new to it:
This is my package.json file:
{
"name": "package.json",
"version": "1.0.0",
"description": "Demo",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"server": "^1.0.30",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js file:
const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rules = [
{
test: /\.js$/,
exclude: /node-modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
exclude: /node-modules/,
use: ['style-loader', 'css-loader']
}
]
module.exports = {
entry: path.join(__dirname, 'src', index.js),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/build')
},
module: {rules},
plugins: [
new HtmlWebpackPlugin({template: './public/index.html'})
]
}
.babelrc.json file:
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
this is my whole project folders and files tree:
When i run npm run start or npm run build, it fails:
with npm run start, i get this error:
internal/modules/cjs/loader.js:968
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
With npm run build:
[webpack-cli] ReferenceError: index is not defined
I am new to webpack and i can't figure out where the problem is, i think i have installed all files and configurations required to make it work, so where is the problem exactly??
I think the problem is, you wrote index without string quotes.
entry: path.join(__dirname, 'src', index.js)
This should be
entry: path.join(__dirname, 'src', 'index.js')
It is like a variable when you write without string quotes. You can try the same this on console.log.
Because index is not defined.
There is an open bug report stating webpack-server 3.11 is not compatible with with webpack-cli v4.
The report can be found here: Issue 2759
Yes - webpack-dev-server does not work with webpack-cli v4
Link to comment: https://github.com/webpack/webpack-dev-server/issues/2759#issuecomment-706668920
The solution is to revamp your project.json file by changing to compatible versions (and welcome to Webpack :-) )
"main": "index.js" in package.json should be "main" : "src/index.js"
Related
I'm trying to get more familiar with modern javascript and am following a tutorial. Early setup includes running a file from another file. I have a server.js file with a simple 'import './config'; command. As a test that repo setup is correct, I should be able to run 'babel server.js'. But I keep returning the error shown below. How do I troubleshoot so that I can successfully run babel commands?
myName#SE-C02YNKJ9LVCF in ~/Linkedin_Learning/modern_javascript_app_example (main) > babel src/server.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
}
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#babel/plugin-proposal-class' imported from /Users/myName/Linkedin_Learning/modern_javascript_app_example/babel-virtual-resolve-base.js
at new NodeError (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:2795:5)
at packageResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3451:9)
at moduleResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3485:18)
at defaultResolve (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3524:13)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:3547:14
at Generator.next (<anonymous>)
at asyncGeneratorStep (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:63:103)
at _next (/usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:194)
at /usr/local/lib/node_modules/#babel/cli/node_modules/#babel/core/lib/vendor/import-meta-resolve.js:65:364
at new Promise (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
Things I've tried so far
as per tutorial, tried updating my bash_profile w/ 'export PATH=$PATH:./node_modules/.bin'
tried setting it in global PATH variable
setting all devDependencies in package.json file that mention #babel to consistent version.
After updating package.json file, new error is below:
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/robertgorowsky/Linkedin_Learning/modern_javascript_app_example/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///Users/myName/Linkedin_Learning/modern_javascript_app_example/babel.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
When I run babel --version, it returns '7.19.3 (#babel/core 7.19.3)' matching package.json file.
contents of files:
content.js
console.log('config test')
server.js
import './config';
package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning fullstack JavaScript Dev with MongoDB, Node.js, React.js",
"main": "index.js",
"type": "module", //added this line after first answer
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rgorowsky/modern_javascript_app_example.git"
},
"author": "",
"license": "GPL-3.0",
"bugs": {
"url": "https://github.com/rgorowsky/modern_javascript_app_example/issues"
},
"homepage": "https://github.com/rgorowsky/modern_javascript_app_example#readme",
"dependencies": {
"express": "^4.18.1",
"mongodb": "^4.10.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#babel/node": "^7.19.1",
"#babel/core": "^7.19.3",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-plugin-react": "^7.31.8",
"nodemon": "^2.0.20",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /|.js$/,
exclude: /.node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
babel.config.js
module.exports = {
presets: ['#babel/react', '#babel/env'],
plugins: ['#babel/plugin-proposal-class-properties'],
};
A picture of my repo file structure for reference:
please do the following step
add "type": "module" in package.json
{
"name": "modern_javascript_app_example",
"version": "1.0.0",
"description": "Learning ...",
"main": "index.js",
"type": "module",
"scripts": {
and use import './content.js'; not import './config'; in serer.js file
I have faced problem when I command npm start and it throws errror
$ npm start
> chapter_15_2#1.0.0 start E:\js\stack-learner\chapter_15_2
> webpack-dev-server
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- E:\Js\Stack-Learner\chapter_15_2\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (E:\Js\Stack-Learner\chapter_15_2\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'E:\\Js\\Stack-Learner\\chapter_15_2\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chapter_15_2#1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chapter_15_2#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\neloy\AppData\Roaming\npm-cache\_logs\2021-02-18T06_10_09_676Z-debug.log
code of Package.json .
{
"name": "chapter_15_2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.12.16",
"#babel/core": "^7.12.16",
"#babel/node": "^7.12.16",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.12.16",
"#babel/register": "^7.12.13",
"babel-loader": "^8.2.2",
"babel-register": "^6.26.0",
"html-webpack-plugin": "^5.1.0",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
Code of webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
require('babel-register')
module.exports = {
entry: ['#babel/polyfill', './src/app.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
template: "./index.html"
})
],
mode: 'development',
devtool: 'inline-sourse-map',
devServer:{
open: true,
contentBase: './dist'
}
}
You need to use npm#6
It's temporary compatibility issue, caused by npm#7 (it was released less then month ago)
Just use 6 branch and everything will work for now.
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
I have a new project and setup webpack to use as a module bundler but when I start the webpack-dev-server using npm start script , I got an error
Error can't find module :
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
although I wrote everything correct and I don't get the point of why this happened ? can any one tell me why this happen ?
this is my package.json file
{
"name": "simple-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webapck.common.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
and this is my webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') ;
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output: {
path: path.join(__dirname,'dist'),
filename: "[name].js"
},
module: {
rules: [
{
test :/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
chunks:['app'],
template:'./index.html'
}
)
],
devServer: {
port:4000
}
}
I tried your project setup in my IDE and I think I found the solution of your problem , I think you wrote the wrong config name in package.json file
your file in the disk called webpack.common.js
the file name in package.json webapck.common.js
so to solve the problem
change the file name in package.json to webpack.common.js instead of webapck.common.js this will solve the problem I think , change the package.json start script to
"start": "webpack-dev-server --config ./webpack.common.js"
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'));