I have the following simple webpack.config.js file:
var webpack = require("webpack"); //LINE OF INTEREST
module.exports = {
entry: ["./main.js"],
output: {
path: "./build",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
When I comment out the top line defining webpack, I get an error because I reference webpack when defining the ProvidePlugin. When I include that 1st line however I get the following cryptic error:
ERROR in (webpack)/package.json
Module parse failed: /var/www/html/node_modules/webpack/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
First of all, I'm unsure why my node_modules folder is my apache root directory. Second of all, why am I getting a parse error? Isn't the package.json file something that was installed via npm? How could there be syntax errors in it?
webpack.config.js
const webpack = require("webpack");
const path = require('path');
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Working Example For more Information
Related
I am trying to run a watch command on my Webpack in order to compile my code but I always face an issue with my file. Even trying to change the relative paths with some ../ did not work
ERROR in code
Module not found: Error: Can't resolve '../src/code.ts' in '/Users/giardiv/Lines/f-variables'
ERROR in ui
Module not found: Error: Can't resolve '../src/ui.tsx' in '/Users/giardiv/Lines/f-variables'
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '/Users/giardiv/Lines/src/ui.html' in ' /Users/giardiv/Lines/f-variables':
Error: Can't resolve '/Users/giardiv/Lines/src/ui.html' in '/Users/giardiv/Lin es/f-variables'
ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/giardiv/Li nes/src/ui.html' in '/Users/giardiv/Lines/f-variables'
While my folder tree is quite basic, f-variables is the src and other files are directly in it
This is the webpack config
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: "../src/ui.tsx", // "./src/ui.tsx" calls the same error
code: "../src/code.ts" // "./src/code.ts" calls the same error
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
// Enables including CSS by doing "import './file.css'" in your TypeScript code
{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader' }] },
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/, loader: 'url-loader' },
],
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
publicPath: '/',
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: [
new HtmlWebpackPlugin({
template: '../src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
],
})
Because the paths in entry are wrong in your webpack.config.js file.
It should be set as below since you have webpack.config.js besides src directory.
entry: {
ui: "./src/ui.tsx",
code: "./src/code.ts"
},
I'm using webpack4 to bundle my vendor files. Everything works well and I included the bundle.js file on my webpage.
But the issue is that I can't access the socket.io from my js file. Am getting an error in the console as below:
main.js:276 Uncaught ReferenceError: io is not defined
at main.js:276
Here is my socket.io code
var socket = io().connect();
socket.on('logout', function (data) {
if (data.includes(userId))
window.location.href = '/auth/signout';
});
Here is my webpack.config.js file
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
module.exports = {
target: "web",
entry: {
page1: glob.sync('./public/js/vendor/*.js')
},
output: {
path: path.resolve(__dirname, "./public/build"),
filename: "bundle.js",
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: 'jquery',
"window.jQuery": 'jquery',
})
],
module: {
rules: [
{test: /modernizr/, loader: 'imports-loader?this=>window!exports-loader?window.Modernizr'},
{test: path.resolve(__dirname, './public/js/vendor/wow.min.js'), loader: 'imports-loader?this=>window!exports-loader?window.WOW'}
]
},
resolve: {
modules: [
path.resolve(__dirname, "./public/js/vendor")
]
},
externals: {
jquery: 'jQuery',
jspdf: 'jspdf',
moment: 'moment',
$: 'jQuery'
},
mode: 'development',
devtool: 'inline-source-map',
};
I don't know what am doing here. I searched a lot but not find anything helpful!
Thanks
Are you missing initialization of io ?
const io = require('socket.io')(app);
I'm trying to use react-syntax-higligther in an application built with webpack.
When I import
import SyntaxHighlighter from 'react-syntax-highlighter';
app compile and runs fine, but if I try to do an import for the styles:
import arta from 'react-syntax-highlighter/styles/hljs/arta';
the webpack compilation runs fine without errors, but when I try to run the application I have an error in the console:
index.bundle.js:35943 Uncaught Error: Module build failed:
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
I verified the imported file, and it is plain javascript, here below a portion:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
"hljs": {
"display": "block",
"overflowX": "auto",
"padding": "0.5em",
"background": "#222",
"color": "#aaa"
},
"hljs-subst": {
"color": "#aaa"
},
and furthermore usually these kind of errors arises during webpack compilation, this appear to be a message generated compile time and added to the generated code... I don't understand what is wrong.
ADDITION
Apparently the error is random, since I'm using webpack --watch to compile when file changes, if force recompile by exiting webpack --watch and running it again... it works! Any idea?
for completeness: webpack configuration here below:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Constant with our paths
const paths = {
DIST: path.resolve(__dirname, 'dist'),
JS: path.resolve(__dirname, 'src'),
SRC: path.resolve(__dirname, 'src'),
};
// Webpack configuration
module.exports = {
entry: path.join(paths.JS, 'index.js'),
output: {
path: paths.DIST,
filename: 'index.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
new ExtractTextPlugin('style.bundle.css'),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
// Files will get handled by css loader and then passed to the extract text plugin
// which will write it to the file we defined above
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
}),
} ,
{
test: /\.(eot|svg|ttf|woff|woff2|png)$/,
loader: 'file-loader',
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
};
I have been working on a project for about 2 months and used webpack-dev-middleware.
According to the WDM documentation, its just a wrapper for webpack and run the project in the memory to enable hot reloading.
But now when im trying to build and deploy with webpack and same webpack.config.js i get Uncaught ReferenceError: require is not defined error.
I have searched alot and couldn't find a right answer for my case.
I'd really appreciate any help :).
my webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var autoprefixer = require('autoprefixer');
const webpack = require('webpack');
var fs = require('fs')
module.exports = {
entry: './src/client.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
target: 'web',
// keep node_module paths out of the bundle
externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
'react-dom/server', 'react/addons',
]).reduce(function (ext, mod) {
ext[mod] = 'commonjs ' + mod
return ext
}, {}),
node: {
__filename: true,
__dirname: true
},
plugins: [
new ExtractTextPlugin('styles.css'),
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=100000&name=/[hash].[ext]',
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{ test: /\.json$/, loader: "json-loader"}
],
},
devtool: 'cheap-module-source-map'
}
I'm using webpack version : 1.13.3 as local.
In my case reason was:
...
module: {
noParse: /\.min\.js$/,
...
I've commented it out
I am trying to remove script tags for javascript libraries from my html, and so have removed underscore.js from a template page.
To replace this, within my index.js (webpack entry point), I have the following
import 'underscore';
The size of the webpack outputted bundle.js file increases by 50k when I do this, so I know that the library is in bundle.js. However, underscore is not available when I try to use it in the console on a page which has the bundle.js included.
Any thoughts would be appreciated.
const webpack = require('webpack');
const path = require('path');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssImport = require('postcss-import');
module.exports = {
context: __dirname + '/frontend',
devtool: 'source-map',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, './static'),
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') },
],
},
vendor: [
'underscore',
],
plugins: [
new ExtractTextPlugin('si-styles.css'),
new webpack.ProvidePlugin({
underscore: 'underscore',
}),
],
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }), // Must be first item in list
precss,
autoprefixer({ browsers: ['last 2 versions'] }),
];
},
};
In order to achieve that you can use this webpack plugin:
new webpack.ProvidePlugin({
underscore: "underscore"
})
by the way it is not necessary that you import the library in the index file of your directory. You will have access to the library also specifying a new entry point in your webpack config file.. You could then put all your vendor code in a vendor.js boundle like so:
entry: {
main: [
'./app/js/main.js'
],
vendor: [
'underscore',
'lodash',
'my-awesome-library!'
]
}
UPDATE: There is a very good tutorial in how to use webpack in production on egghead.io.. Try to check it out!