I have set up a React environment with webpack and babel. However, when I run webpack-dev-server --progress --colors, I get error like this:
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 E:/src/index.js
Module not found: Error: can't resolve 'E:\src/index.js' in 'E:\personal_projects\web-site-name'
...
(2:1) Unknown word
1: var url = require("url");
^
My webpack.config.js file is this:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, '/public');
var APP_DIR = path.resolve(__dirname, '/src');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /(\.css$)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
}
]
}
};
module.exports = config;
I think there is some problem with babel and it compiling my index.js to my bundle.js file. Any advice on this?
You either need to use path.join or remove your slashes, e.g.
path.resolve(__dirname, '/src');
and other lines using resolve should be
path.resolve(__dirname, 'src');
or
path.join(__dirname, 'src');
or even
path.join(__dirname, '/src');
Your usage of .resolve passes an absolute path /src, meaning that the first argument is essentially discarded.
Related
webpack-dev-server is getting compiled but not creating any output file while using simple webpack it is creating the file. Why?
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, "/public/"), //file path name
filename: "bundles.js" //this is not getting created
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_ modules/,
loader: "babel-loader" //loader
}
]
},
devtool: "cheap-module-eval-source-map",
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 9000
}
};
It should create bundle.js
and it is not giving any compile time error as well it shows it's compiled successfully.
There's an option called writeToDisk
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
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.
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 have a file call abc.jsx like this
var MyTitle = require('./MyTitle')
but I have to do require('./MyTitle)
coz I run webpack it throw me error.
ERROR in ./js/MyTitle.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./MyTitle in /Users/username/Documents/intro-to-react/js
# ./js/MyTitle.jsx 5:14-34
You should have set webpack config to resolve jsx file using babel-loader. The following line test: /\.js?$/, in module loader tells webpack to resolve both .js and .jsx file types.
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: "inline-sourcemap",
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
}
};
I've installed extract-text-webpack-plugin using this command in terminal sudo npm install -g extract-text-webpack-plugin and imported in webpack.config.js file, still i'm getting the error.
I also referred this question but didn't found any solution so i've posted new question.
Webpack - extract-text-webpack-plugin Cannot find module
Webpack.config.js file source code:
/* Custom Config */
var ProgramID = '1111';
/* Default Config */
var webpack = require('webpack');
var path = require('path');
var polyfill = require("babel-polyfill");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BUILD_DIR = path.resolve(__dirname, 'build/Programs/' + ProgramID);
var APP_DIR = path.resolve(__dirname, 'src/import');
module.exports = {
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://localhost:8080/',
APP_DIR + '/import.js'
],
output: {
path: BUILD_DIR + '/',
filename: '/js/bundle.js',
publicPath: '../Programs/' + ProgramID
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,plugins[]=transform-runtime'],
exclude: /node_modules/
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}, {
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}, {
test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
loader: 'file-loader?name=/images/[name].[ext]'
}]
},
plugins: [
new ExtractTextPlugin("style.css"),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
process: function(path, filename) {
if (filename.indexOf('node_modules') === -1) {
path = babelJest.process(path, filename);
path = webpackAlias.process(path, filename);
}
return path;
},
externals: {
"jquery": "jQuery"
}
};
You have installed it for root, but not globally. Add -g flag to install or create package.json with npm init inside you project directory and then do npm install --save extract-text-webpack-plugin