We Keep Coding

Uncaught ReferenceError: require is not defined, webpack error

I'm using node modules for a client application in the browser. I get
'Uncaught ReferenceError: require is not defined' when I try to require a constructor function from a neighbouring file into the app.js. app.js and Desktop.js are located in the same folder so the relative link path should be correct.
app.js
console.log('hello')
const Desktop = require('./Desktop')
let newVar = new Desktop()
console.log(newVar.height)
Desktop.js
function Desktop () {
this.height = 3
}
module.exports = Desktop
webpack is also installed with the following config settings:
var path = require('path')
module.exports = {
entry: './src/js/app.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, 'src'),
watchContentBase: true,
port: 4000,
public: 'localhost:4000'
},
devtool: 'cheap-eval-source-map',
module: {
rules: [
{
// set up standard-loader as a preloader
enforce: 'pre',
test: /\.jsx?$/,
loader: 'standard-loader',
exclude: /(node_modules)/,
options: {
// Emit errors instead of warnings (default = false)
error: false,
// enable snazzy output (default = true)
snazzy: true
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
Is there any way to solve this?

Webpack throws TypeError: Super expression must either be null or a function, not undefined when importing LESS file

I have the following in a file initialize.js:
import App from './components/App';
import './styles/application.less';
document.addEventListener('DOMContentLoaded', () => {
const app = new App();
app.start();
});
In webpack.config.js I have:
'use strict';
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const ProvidePlugin = webpack.ProvidePlugin;
const ModuleConcatenationPlugin = webpack.optimize.ModuleConcatenationPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractLess = new ExtractTextPlugin({
filename: 'app.css',
});
const webpackCommon = {
entry: {
app: ['./app/initialize']
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader?presets[]=es2015'
}]
}, {
test: /\.hbs$/,
use: {
loader: 'handlebars-loader'
}
}, {
test: /\.less$/,
exclude: /node_modules/,
use: extractLess.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader'
}],
// use style-loader in development
fallback: 'style-loader'
}),
}]
},
output: {
filename: 'app.js',
path: path.join(__dirname, './public'),
publicPath: '/'
},
plugins: [
extractLess,
new CopyWebpackPlugin([{
from: './app/assets/index.html',
to: './index.html'
}]),
new ProvidePlugin({
$: 'jquery',
_: 'underscore'
}),
new ModuleConcatenationPlugin(),
],
};
module.exports = merge(webpackCommon, {
devtool: '#inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 9000
}
});
I tried removing the the plugins and the contents of application.less, but I keep getting this error:
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./app/styles/application.less
Module build failed: TypeError: Super expression must either be null or a function, not undefined
at ...
# ./app/styles/application.less 4:14-127
# ./app/initialize.js
If I replace that LESS file with a CSS one and update the config it works fine, so I guess the problem has to do with less-loader.
I'm using Webpack 3.4.1, Style Loader 0.18.2, LESS Loader 4.0.5, Extract Text Webpack Plugin 3.0.0 and CSS Loader css-loader.

My bad, I didn't notice I was using an old less version. That was the culprit. Just updated it to 2.7.2 and the problem is gone.

Uncaught ReferenceError: require is not defined react + webpack

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

Exclude files (i.e. .DS_Store) with webpack and ManifestRevisionPlugin

When I run build or watch in my webpack app, it throws an exception when it tries to parse the macOS .DS_Store metadata files. How do I configure it to ignore those files?
ERROR in ./assets/preview/.DS_Store
Module parse failed: /Users/greg/projects/maven_book/assets/preview/.DS_Store Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)
at Parser.pp$4.raise (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.parse (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:515:10)
at Object.parse (/Users/greg/projects/maven_book/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/greg/projects/maven_book/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/Users/greg/projects/maven_book/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/greg/projects/maven_book/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/greg/projects/maven_book/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/greg/projects/maven_book/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3)
and here's my full webpack config:
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var rootAssetPath = './assets';
module.exports = {
context: __dirname,
entry: {
main_js: [
rootAssetPath + '/j/main.js'
],
main_css: [
rootAssetPath + '/c/main.scss'
]
},
output: {
path: './build/assets',
publicPath: 'http://localhost:2992/assets/',
filename: '[name].[chunkhash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.scss']
},
module: {
loaders: [
{
test: /\.js$/i,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style')
},
{
test: /\.scss$/i,
loader: ExtractTextPlugin.extract(
'style',
'css?sourceMap!sass?sourceMap'
)
},
{
test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
loaders: [
'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]',
'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
// loader: 'file?name=public/fonts/[name].[ext]'
loader: 'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]'
}
]
},
plugins: [
new ExtractTextPlugin('[name].[chunkhash].css'),
new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
rootAssetPath: rootAssetPath,
ignorePaths: ['/c', '/j']
})
]
};

I'm not quite sure what DS_STORE files are. But when you configure your loaders, provide an exclude for these files.
Could you provide your webpack config, specifically the loader config, and demo.css? I can provide you the configuration.

The issue here was that ManifestRevisionPlugin was reading the directory, and picking up .DS_Store files. To fix it, I added an exclude regex:
new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
rootAssetPath: rootAssetPath,
ignorePaths: ['/c', '/j', /.*\.DS_Store/]
})

Knex + Webpack: Cannot find module "../package.json"

I'm getting this issue with knex and webpack.
Error: Cannot find module "../package.json"
Knex.VERSION = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../package.json\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())).version;
Here's my webpack.config.js:
module.exports = {
entry: './index.js',
target: 'node',
output: {
path: './',
filename: 'main.js',
libraryTarget: 'commonjs2'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
}
I don't understand why the json loader isn't working.