webpack module not found - javascript

I am using webpack 1.13.1
I get this error when I want to run webpack
Module not found: Error: Cannot resolve 'file' or 'directory'
/home/tetar/grails-reactjs-master/src/main/js
resolve file
/home/tetar/grails-reactjs-master/src/main/js/undefined doesn't exist
/home/tetar/grails-reactjs-master/src/main/js/undefined.webpack-
loader.js doesn't exist [...]
[/home/tetar/grails-reactjs-master/src/main/js/undefined.js]
# ./src/main/js/test.js 3:0-21
In my test.js I only have 2 test line
require ('./test.css');
module.exports = "test fail"
and there is my webpack config
var path = require('path');
var root = path.resolve(__dirname);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('bundle.css');
module.exports = {
entry: {
index: ['./src/main/js/index.js']
},
output: {
path: path.resolve(__dirname, './grails-app/assets/javascripts'),
publicPath: '/assets/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include : root
},
{
test: /\.css$/,
loaders : extractCSS.extract(['css'])
}
]
}
};
do you have any idea how to solve this problem ?

Related

gulp-webpack error: Entry module not found: Error: cannot resolve module

When I try gulp scipts, it throws me the following error
ERROR in Entry module not found:
Error: Can't resolve 'C:/Users/milan/Local
Sites/project-university/app/public/wp-content/themes/fictional-university-theme/js/scripts.js'
in 'C:\Users\milan\Local Sites\project-university\app\public'
below is my webpack.config.js
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
App: settings.themeLocation + "js/scripts.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
mode: 'development'
}
and my settings.js :
exports.urlToPreview = 'http://project-university.local/';
exports.themeLocation =
'C:/Users/milan/Local Sites/project-university/app/public/wp-content/themes/fictional-university-theme/';
Below is my file directory,
Project---- app------ public----------(wordpress content files)
The problem is the compiling path defined in settings.js. Change the defined path from
exports.themeLocation = './public/wp-content/themes/fictional-university-theme/';
to
exports.themeLocation = './wp-content/themes/fictional-university-theme/';

module.exports error for webpack backend (node.js)

I'm trying to use webpack to bundle my backend code. It's currently using vanilla node.js where I'm using module.exports.x, and when I run webpack, it also outputs the export line i.e. module.exports.x. Now the problem is when I run nodemon on the file, it gives me the error TypeError: Cannot set property 'x' of undefined.
What's my resolution here?
my config file.
"use strict"
const path = require("path")
// const utils = require("./utils")
// const config = require("../config")
var fs = require("fs")
const NodemonPlugin = require("nodemon-webpack-plugin")
const nodeExternals = require("webpack-node-externals")
function resolve(dir)
{
return path.join(__dirname, "..", dir)
}
module.exports = {
context: path.resolve(__dirname, "../"),
entry: "./src/server/server.js",
output: {
path: path.resolve(__dirname, "../src/server"),
filename: "server-webpack.js",
},
plugins: [
new NodemonPlugin(),
],
resolve: {
extensions: [".js",".ts", ".tsx"],
alias: {
"#": resolve("src"),
"#": resolve("src/server")
}
},
devtool: "#inline-source-map",
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [resolve("src"), resolve("test")]
},
{
test: /\.tsx?$/,
loader: "ts-loader",
},
]
},
externals: [
nodeExternals()
],
target: "node"
}

Webpack cannot read property 'Blob' of undefined

Entry file will build literally just fine, but the error occurs on client side, which makes the whole bundle file doesn't work with this issue Uncaught TypeError: Cannot read property 'Blob' of undefined
and i have attached the webpack.config.js which i have tried too
const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const config = {
entry: './src/main-entry.js',
output: {
path: path.resolve(__dirname, 'views/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/, loader: 'url-loader?limit=100000' },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader', fallback: 'style-loader'
})
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
}
module.exports = config
I am using webpack latest version. But i don't know why this is happening? can you help me?

webpack output filename config error

When I try to run npm run webpack, this shows "Error: 'output.filename' is required, either in config file or as --output-filename."
The config file is named correctly as webpack.config.js and is also in the root directory.
Below is the content in the config file:
var path = require('path');
var webpack = require('webpack');
module.exports - {
entry: './app.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node-modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
Would really appreciate help
You have a syntax error.
module.exports -
should be:
module.exports =
And btw, you do not need to require webpack in the configuration file.

No such file or directory error in Webpack + highlight module

I'm working on an Electron app which requires the code highlighting feature. I installed highlight module as a node dependency and use webpack to bundle all the code into the app.bundle.js.
However, when I launch the Electron app, I notice an error from the highlight module complaining
Uncaught Error: ENOENT: no such file or directory, scandir '//vendor/highlight.js/languages/'
Inside app.bundle.js, the highlight module still uses the vendor/highlight.js/languages/ to search for its utilities files which I thought should be included into app.bundle.js with their paths updated.
var Highlight = module.exports
, fs = __webpack_require__(336)
, hljs = __webpack_require__(408).hljs
, langRelPath = "vendor/highlight.js/languages/"
, langPath = __dirname + "/" + langRelPath
, reEndsWithJs = /\.js$/i
, loadedMap = {}
, availableMap = {}
;
It's my first time to use webpack, so it might be caused by some webpack misconfigurations. I paste the webpack.config.js for your convenience.
'use strict'
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./app/app.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
include: [path.resolve(__dirname, 'app')],
exclude: /node_modules/,
loaders: ['babel?presets[]=es2015,presets[]=react']
}, {
test: /\.(scss|css)$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.json/,
loader: 'json'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader'
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.txt$/,
loader: 'text'
}]
},
target: 'electron'
};
Does anyone have some idea for this?
(Everything works fine when not bundle by webpack.)
Thank you in advance:)

Categories

Resources