I have a very simple project to test run jQuery function with webpack. However I ran into errors at the bundle step. Here are the errors:
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 5:13-29
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 8:28-53
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 13:24-43
ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
# ./~/jQuery/lib/node-jquery.js 17:25-45
Here are my config files:
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"jquery": "^2.2.2",
"react": "file:node_modules/react",
"react-dom": "file:node_modules/react-dom",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
var webpack = require('webpack')
var path = require('path')
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: 'public',
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel'
},
{
test: /\.css/,
include: APP_DIR,
}
]
},
};
module.exports = config;
index.jsx:
import React from 'react'
import {render} from 'react-dom'
import $ from 'jQuery'
(function () {
$(document).ready(function() {
console.log("It works!");
});
})();
If I install the mentioned modules (jsdom, xmlhttprequest, ..), the errors will be replaced by very long errors.
You can use webpack.ProvidePlugin to resolve the jQuery as a global identifier. When you use ProvidePlugin you dont want to import jQuery into the modules since it would be available as global variable.
something like
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
Related
Update:
Code pushed to https://github.com/gsouvik/react_spa_experiment
Initial Post:
I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js.
What I did
I was following this video tutorial line by line:
React & Webpack 4 from scratch
My package.json
{
"name": "my_react_experiment_2",
"version": "1.0.0",
"description": "Basic react with webpack ",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot",
"build": "webpack --mode production"
},
"author": "Souvik Ghosh",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
My .babelrc
{
"presets": ["env", "react"]
}
My directory structure
Expected behaviour
I fire up the dev server npm run dev. Expected to see my shiny new React js page saying "My first React Webpack project" (from the component /components/App.js)
Actual Behavior
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App";
|
ReactDOM.render(, document.getElementById('root'));
| //ReactDOM.render('Hello User ', document.getElementById('root'));
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main2
If required I can share the codebase via a git repo. Any help is greatly appreciated.
The issue is with typo in your webpack config file.
You have module.export which is not correct. It should be module.exports
Working example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
I'm working on a project to integrate React and ASP.Net together. I've made the initial Hello World and every works as expected (not hard :p). I'm using webpack with babel-loader to generate my `bundle.js.
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>LPMU</h1>, document.getElementById('root'))
This is my webpack.config.js file:
module.exports = {
context: __dirname,
entry: "./App.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env', 'babel-preset-react']
}
}
}
]
}
}
After this worked out, I tried to add my App.js component and all other components into my react folder, inside Scripts on my ASP.NET project. I'm not doing the export default App since I'm using the ReactDOM.render(). I import my components into my App.js as usual:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Landing from './Landing';
import * as lpmuGlobal from './lpmu-global';
And then I just render the App component:
ReactDOM.render(<App />, document.getElementById('root'))
Now when I run npm run webpack again, I get 2 problems, which are the following:
size name module status
704 B 0 ./App.js built failed ✖
Δt 596ms (1 asset hidden)
./App.js
0:0 error Module build failed (from ./node_modules/babel-loader/lib/index.js):
configuration
0:0 warning The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
✖ 2 problems (1 error, 1 warning)
I've been searching for a solution, but since I'm really new to webpack, I don't know what happens, if I need anything else on my webpack.config.js, if I have to import my components in any other way or whatever.
ALso this is my json.package:
{
"name": "lpmu-react-app",
"version": "1.0.0",
"description": "Integración de ReactJS con ASP.NET",
"main": "App.js",
"scripts": {
"start": "react-scripts start",
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "DPS",
"license": "ISC",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"webpack-command": "^0.2.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.4"
}
}
Thanks
The error is because you have not added a .babelrc file or babel options to your package.json file to provide babel options.
In order to enable the preset you have to define it in your .babelrc
file
Add babel option to your package.json as such :
package.json:
{
"name": "lpmu-react-app",
"version": "1.0.0",
"description": "Integración de ReactJS con ASP.NET",
"main": "App.js",
"scripts": {
"start": "react-scripts start",
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel":{
"presets": ["env","react"]
}
"author": "DPS",
"license": "ISC",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"webpack-command": "^0.2.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.4"
}
}
Go through the below links for further clarification:
https://babeljs.io/docs/en/babelrc.html
https://babeljs.io/en/setup/#installation
About the warning :
Webpack 4 needs you to include the mode option to your configuration, as you would usually want to have development and production configurations separate.
Go through the link below which explains in detail how to set configurations.
https://www.valentinog.com/blog/webpack-4-tutorial/
module.exports = {
context: __dirname,
entry: "./App.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env', 'babel-preset-react']
}
}
}
]
}
}
Hope that helps :)
I want to use Webpack on my projects, but when I run
npm run dev
, I get this error.
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js Module not
found: Error: Cannot resolve 'file' or 'directory' ../package in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js 60:16-37
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/info.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/info.js 14:14-32
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/publish.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/publish.js 17:14-32
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js 15:14-32
ERROR in ./~/sqlite3/~/rc/index.js Module build failed: Error: Parse
Error: Line 1: Unexpected token ILLEGAL
at throwError (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
at scanPunctuator (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1011:9)
at advance (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1747:16)
at peek (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1773:21)
at parseProgram (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6535:9)
at Object.parse (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7713:23)
at getAstForSource (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/jstransform.js:244:21)
at Object.transform (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/jstransform.js:267:11)
at Object.transform (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/simple.js:105:28)
at Object.module.exports (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/index.js:15:31)
# ./~/sqlite3/~/node-pre-gyp/lib/info.js 11:13-26
This is my WEBPACK.CONFIG.js
var path = require ('path');
module.exports = {
entry: './server.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
fallback: path.join(__dirname, "node_modules"),
extensions : ['', '.js', '.jsx']
},
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
target: 'node'
};
This is package.json.
{
"name": "biocenter",
"version": "1.0.0",
"description": "",
"main": "server.js",
"directories": {
"test": "test"
},
"dependencies": {
"body-parser": "^1.15.0",
"express": "^4.13.4",
"request": "^2.72.0",
"sqlite3": "^3.1.4",
"querystring": "^0.2.0",
"should": "^8.3.2"
},
"devDependencies": {
"brfs": "^1.4.3",
"json-loader": "^0.5.4",
"mocha": "^2.4.5",
"transform-loader": "^0.2.3",
"webpack": "^1.13.1"
},
"scripts": {
"test": "mocha",
"start": "node server.js",
"dev": "webpack-dev-server --devtool eval --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FlowerHop/-DBLab-Alarm-Project-.git"
},
"author": "Flowerhop",
"license": "ISC",
"bugs": {
"url": "https://github.com/FlowerHop/-DBLab-Alarm-Project-/issues"
},
"homepage": "https://github.com/FlowerHop/-DBLab-Alarm-Project-#readme"
}
Can anybody help me fix this problem?
I encountered the similar problem with the lzma-native, which also uses node-pre-gyp. The problem is they all directly require the node-pre-gyp in the module. I try to replace the line of code that use node-pre-gyp
var nodePreGyp = require('node-pre-gyp');
var path = require('path');
var binding_path = nodePreGyp.find(path.resolve(path.join(__dirname,'./package.json')));
var native = require(binding_path);
into
var native = require('pre-gyp-find')('lzma_native');
// notice that the parameter here is the binary module name in package.json of lzma-native
And that finally works for me. Though, this solution requires us to modify the source code, and add an additional dependency 'pre-gyp-find'. Maybe you could send a PR to author about this.
This is not the best solution, since it doesn't actually solve but avoid the problem.
I noticed everything seems right during npm install, but actually there is some error during install. My problem was fixed with npm install sqlite3 --build-from-source.
I've just started following this tutorial.
I've gone through the first video three or four times now. When I try to run the application, I get the following error in the console:
ERROR in ./main.js
Module parse failed: /Users/newuser/projects/js101/react-egghead/main.js Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:16)
at Parser.pp.raise (/Users/newuser/projects/js101/react-egghead/node_modules/acorn/dist/acorn.js:920:13)
...
I've looked at similar questions on SO but none seem to have an answer for me.
Here's my webpack.config.js file:
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
moudle: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
This is what package.json looks like:
{
"name": "react-egghead",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.2",
"react-dom": "^15.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
And, although it's not mentioned in the video, I've added a .babelrc file: (which I have now removed)
{
"presets": ["es2015", "stage-0", "react"]
}
This is where the parse fails (line 5):
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('app'))
I really don't know what to try next. Is it a problem with my environment set up or is it a problem with the code in main.js?
Any help would be appreciated.
You have a typo in your webpack config. Instead of module you typed moudle, so your loader configs are actually ignored by webpack :)
I am using webpack this is my
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
watch: true,
watchOptions: {
aggregateTimeout: 100
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: "babel-loader"
}]
}
}
and this my file from entry point
app.js
import React from 'react'
without anything, just simple line of code.
When i am trying to run webpack from command line and i got the next error
app.js Line 1: Unexpected token You may need an appropriate loader to
handle this file type. | import React from 'react';
package.json
{
"name": "a-b-c",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"babel-loader": "^6.0.0",
"react": "^0.14.1",
"webpack": "^1.12.2"
},
"devDependencies": {
"babel-core": "^6.0.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Also, when i changed ES6 syntax in my app.js file to ES5 then it works well.
Any suggestions?
Thanks in advance.
I've found out. The problem was with babel-loader and to fix this issue you need to install
npm install babel-loader babel-core babel-preset-es2015
and add to your webpack.config.js file next lines
loader: 'babel?presets[]=es2015'
Source of information
Thanks