Webpack-bundled files not defining 'require' - javascript

I'm using web pack bundle some js & jsx files to load them unto the browser. All runs well but the moment the browser opens them it logs an error ReferenceError: Can't find variable: require.
My current configuration is the following:
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = [
{
name: 'server',
target: 'node',
context: path.join(__dirname, 'src', 'cloud'),
entry: ['babel-polyfill', './app.js'],
output: {
path: __dirname,
filename: 'app.bundle.js'
},
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'}
]
},
externals: nodeModules,
node: {
__dirname: true
}
},
{
name: 'client',
target: 'web',
context: path.join(__dirname, 'src', 'static', 'scripts'),
entry: {
index: ['babel-polyfill', './index.js']
},
output: {
path: path.join(__dirname, 'src', 'public', 'bundles'),
filename: '[name].bundle.js'
},
module: {
loaders: [
{test: /\.html$/, loader: 'raw'},
{test: /\.css$/, loader: 'style'},
{test: /\.css$/, loader: 'css'},
{test: /\.jsx?$/, loader: 'babel'}
]
},
externals: nodeModules
}
];
Any idea as to why could this be happening? Thanks in advance

Related

Issue with integrating cortex-js/compute machine in react application

I am trying to use compute machine provided by the cortexjs. https://cortexjs.io/compute-engine
I saved this dependency using
npm i #cortex-js/compute-engine
After I ran npm start, I am getting this error:
ERROR in ./node_modules/#cortex-js/compute-engine/dist/compute-engine.min.js 2:1360
Module parse failed: Unexpected token (2:1360)
You may need an appropriate loader to handle this file type.
Following is my webpack file:
var webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
module.exports = {
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
// publicPath: '/'
// },
mode : 'production',
devServer: {
historyApiFallback: true,
},
devtool: "source-map",
module: {
rules: [
{
test: /\.(png|jpg|woff|woff2|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
import: true,
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Please can someone suggest which loader should I add to webpack.config file to make this work.

Nodejs, Webpack4

i want to build 1 nodejs app. I do not understand why when I build a version and copy to another place and run the node can not run because of the lack of modules.
this is file webpack:
const nodeExternals = require('webpack-node-externals')
const fs = require('fs')
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
mode: 'development',
target: "node",
entry: {
server: './src/index.js',
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
node: {
__gloabal: true,
__filename: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules',
use: {
loader: "babel-loader"
}
},
{
test: /\.json$/,
loader: "json"
}
]
},
resolve: {
extensions: [".js", ".json"],
},
externals: [nodeModules],
optimization: {
minimize: true
}
}
and here when i'm running in folder before coppy:

Because you use Externals configuration option
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. This feature is typically most useful to library developers, however there are a variety of applications for it.
module.exports = {
mode: 'development',
target: 'node',
entry: {
server: './src/index.js'
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
node: {
__gloabal: true,
__filename: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules',
use: {
loader: 'babel-loader'
}
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: ['.js', '.json']
},
optimization: {
minimize: true
}
};

vuejs npm dev server does not show updated output

I am using vuejs in wordpress theme, everything is properly setup and working.
npm run build works perfectly and creates dist and wordpress picks up all content from it.
What's the issue then?
npm run dev also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.
Please guide and help.
webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env.example'),
path.resolve(__dirname, '../.env'),
);
}
module.exports = (options = {}) => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://localhost:9000/',
filename: 'js/[name].js',
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
exclude: /node_modules/,
},
{
test: /\.js|\.vue$/,
use: [{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
}, ],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
use: [
'vue-style-loader?sourceMap',
'css-loader?sourceMap',
'postcss-loader?sourceMap',
'sass-loader?sourceMap',
],
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
},
exclude: /node_modules/,
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
],
devServer: {
compress: true,
contentBase: path.join(__dirname, '../dist'),
headers: {
'Access-Control-Allow-Origin': 'http://localhost',
},
hot: true,
public: 'localhost:9000',
port: 9000,
overlay: {
errors: true,
warnings: true,
},
},
devtool: 'eval-source-map',
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
watch: options.watch === 'true',
};
return config;
};
webpack.vue.build.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env'),
path.resolve(__dirname, '../.env.example'),
);
}
module.exports = () => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
scss: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.js|\.vue$/,
use: [
{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
},
],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
loader: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader!postcss-loader!sass-loader',
}),
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
publicPath: '../',
},
exclude: /node_modules/,
},
],
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'),
verbose: true,
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new ExtractTextPlugin('css/[name].css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.optimize.ModuleConcatenationPlugin(),
],
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
};
return config;
};
Screenshot to get some idea about folder structure:
http://prntscr.com/n0cbg1

add --watch in start field in package.json file.
or use this command for executing:
npm run build -- --watch

Webpack doesn't compile on linux

I developed a program on windows
It successfully compiles and runs now
However, when I want to deploy it to my linux server， I get some errors:
This problem is very strange, can you help?
My webpack.config.js
let webpack = require('webpack'),
path = require('path'),
fs = require('fs'),
manifest = require('./manifest.json'),
{resolve, join} = path,
env = process.env.NODE_ENV;
let plugins = [
new webpack.BannerPlugin(
fs
.readFileSync('./LICENSE')
.toString('utf-8')),
new webpack.DllReferencePlugin({context: __dirname, manifest})
];
// if (env === 'pro') {
// } else {
// plugins.push()
// }
let config = {
// context: resolve(__dirname, 'src'),
entry: {
app: [
'./src/jsx/app.jsx',
'./src/style/app.less'
]
},
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: false,
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
'stage-2',
'es2015',
'react'
]
}
},{
test: /\.less$/,
loader: 'style!css!autoprefixer!less'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins
}
module.exports = config;

webpack dev middleware, how to autoreload when HMR fails

I am getting the following message in my browser's console when I change my javascript source:
[HMR] The following modules couldn't be hot updated: (Full reload
needed) This is usually because the modules which have changed (and
their parents) do not know how to hot reload themselves. See
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
for more details.
My question is how can I tell webpack to just auto reload the page when this happens?
Here is my server set up:
app.use(morgan('dev'));
// Disable views cache
app.set('view cache', false);
var webpack = require('webpack');
var webpackConfig = require('../client/webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
and my webpack.config:
var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');
module.exports = {
entry: {
main: [
'webpack-hot-middleware/client',
'./client/src/main'
]
},
resolve: {
alias: {
breeze: 'breeze-client/build/breeze.debug',
resources: path.resolve( __dirname, 'src', 'resources'),
utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
}
},
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: 'eval',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new AureliaWebpackPlugin()
],
module: {
//preLoaders: [
// {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
//],
loaders: [
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'style!css' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
]
}
};
Thanks in advance?

You can pass parameter reload to webpack-hot-middleware/client:
entry: {
main: [
'webpack-hot-middleware/client?reload=true',
'./client/src/main'
]
},

Categories