Develop Reference

Webpack Dependency Not Found

I am new to Webpack and am trying to set it up as a bundler for a relatively simple project (some JS and SASS).
The problems are that one of the dependencies is not being found and that the Bootstrap is not being applied.
The error(s) in the console is
Uncaught ReferenceError: Plyr is not defined
http://localhost:8000/static/index.js:58
n http://localhost:8000/static/index.js:1
http://localhost:8000/static/index.js:25
n http://localhost:8000/static/index.js:1
http://localhost:8000/static/index.js:1
http://localhost:8000/static/index.js:1
webpack.config.js
const path = require("path");
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
entry: { index: path.resolve(__dirname, "static_src", "index.js") },
output: {
path: path.resolve(__dirname, "static_compiled"),
publicPath: "/static/", // Should match Django STATIC_URL
filename: "[name].js", // No filename hashing, Django takes care of this
chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"]},
{test: /\.css$/, use: ["style-loader", "css-loader"]}
],
},
resolve: {
alias: {
shared: path.resolve(__dirname, 'node_modules', 'bower_components')
},
extensions: ['.js', '.ts', 'jsx', 'tsx']
},
devServer: {
writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
}
}
static_src/index.js
import "./sass/main.scss";
import 'bootstrap/dist/css/bootstrap.min.css';
//import "bootstrap/scss/bootstrap.scss";
import 'bootstrap';
import 'jquery';
import 'plyr/dist/plyr.polyfilled.js';
import "./js/custom.js";
import "./js/clean-blog.js";
from package.json
"dependencies": {
"bootstrap": "^4.4.1",
"jquery": "^3.5.1",
"node-sass": "^4.14.0",
"plyr": "^3.5.10",
"popper.js": "^1.16.1",
"sass-lint": "^1.13.1"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"babel": "^6.23.0",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"little-loader": "^0.2.0",
"react": "^16.13.1",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-bundle-tracker": "^1.0.0-alpha.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
static_src/custom.js
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
from base.html template
<!-- Custom styles for this template -->
<!-- <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet"> -->
<!-- <link href="{% static 'css/main.css' %}" rel="stylesheet"> -->
<script src="{% static 'index.js' %}" type="text/javascript"></script>
On a separate note, I am not sure whether I am including the bundle into HTML properly. Should I have a separate CSS and JS inclusion?

NodeJS + TypeScript + Webpack4: Access to webpack application variables for non-web NodeJS application

Because I don't want multiple output files (compiled TypeScript files), I am considering the webpack usage for non-web NodeJS applications. If just build below node_modules/some_dependency/index.ts by Webpack, Dependency class it will not available in index.babel.js because webpack application has not global variables by default.
index.babel.js
require('#babel/register');
// node_modules/some_dependency/index.js (compiled TypeScript)
import Dependency form 'dependency'; // Error!
new Dependency();
node_modules/some_dependency/index.ts
export default class Dependency() {
// ---
}
Could NodeJS module (index.babel.js) see Dependency if just to use ProvidePlugin?

The minimal webpack.confing.js will be:
module.exports = {
entry: './TypeScriptSource/index.ts',
output: {
filename: 'index.js',
path: __dirname,
libraryTarget: 'umd'
},
target: 'node',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
};
Now, if class Dependency in TypeScriptSource/index.ts has export default, below code in index.babel.js will work:
require('#babel/register');
import Dependency from 'some-depencency';
new Dependency();
Required dependencies for index.babel.js:
"#babel/core": "7.1.2",
"#babel/node": "7.0.0",
"#babel/preset-env": "7.1.0",
"#babel/register": "7.0.0",

webpack imported module is not a constructor

I created a small JS module which I intend to make an npm package, but for now is just on GitHub. This module is written in ES6 and SCSS, and is thus relying on webpack and babel for transpilation.
To test it, I created a separate project with a similar setup (webpack and babel). After npm installing my module, when trying to import it into my index.js, I get the following error in Chrome Developer Tools: (with x being my module's name)
index.js:11 Uncaught TypeError: x__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
at eval (index.js:11)
at Object../src/index.js (main.js:368)
at __webpack_require__ (main.js:20)
at eval (webpack:///multi_(:8081/webpack)-dev-server/client?:2:18)
at Object.0 (main.js:390)
at __webpack_require__ (main.js:20)
at main.js:69
at main.js:72
I've looked through countless answers and tried countless solutions, to no avail. My module's setup is as follows.
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["ie >= 11"]
}
}]
],
"plugins": [
"transform-es2015-modules-commonjs",
"transform-class-properties"
]
}
webpack.common.js
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const baseSCSS = new ExtractTextPlugin('main/_base.css')
const themeSCSS = new ExtractTextPlugin('main/_theme.css')
module.exports = {
entry: {
example: [
path.join(__dirname, 'src', 'example', 'index.js')
],
main: [
'idempotent-babel-polyfill',
path.join(__dirname, 'src', 'index.js')
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: path.join('[name]', 'index.js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}
)
},
{
test: /\_base-scss$/,
use: baseSCSS.extract(
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}
)
},
{
test: /\_theme-scss$/,
use: themeSCSS.extract(
{
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}
)
}
]
},
plugins: [
new cleanWebpackPlugin('dist', {}),
new ExtractTextPlugin({ filename: path.join('example', 'style.css') }),
baseSCSS,
themeSCSS,
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: path.join(__dirname, 'src', 'example', 'index.html'),
filename: path.join('example', 'index.html')
})
]
}
webpack.prod.js
const merge = require('webpack-merge')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const common = require('./webpack.common.js')
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
],
mode: 'production'
})
package.json
{
"name": "my-module-name",
"version": "1.0.0-beta.1",
"description": "",
"main": "dist/main/index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js",
"server": "node src/server",
"format": "prettier-standard 'src/**/*.js'",
"lint": "eslint src",
"build": "webpack --config webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Liran",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"idempotent-babel-polyfill": "^0.1.1",
"node-sass": "^4.9.0",
"prettier-standard": "^8.0.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.2"
}
}
Any help/pointers would be greatly appreciated. If you need more information, please let me know.

If you are not the library author and are having a problem consuming another library, you may be seeing an error like this:
TypeError: [LIBRARY_NAME]__WEBPACK_IMPORTED_MODULE_3__ is not a constructor
If that's the case, you may be importing the library incorrectly in your code (it may be a problem with default exports). Double check the library docs for usage.
It may be as simple as changing this:
import Foo from 'some-library/Foo';
to this:
import { Foo } from 'some-library';

It is not working because it is missing libraryTarget and library properties. By doing that webpack know which format of module you would like to create, i.e: commonjs (module.exports) or es (export).
I would do something like:
...
output: {
path: path.join(__dirname, 'dist'),
filename: path.join('[name]', 'index.js'),
library: "my-library",
libraryTarget: "umd" // exposes and know when to use module.exports or exports.
},
...

Besides setting the libraryTarget, it may also be necessary to move the export in the JavaScript file to the default.
function MyClassName() {
...
}
export default MyClassName;
And then in the webpack configuration the library type umd ...
(Note that I have used the newer library.type instead the older libraryTarget (see https://webpack.js.org/configuration/output/#outputlibrarytarget).
const path = require('path');
module.exports = {
mode: "production",
entry: '../wherever/MyClassName.js',
output: {
library: {
name: "MyClassName",
type: "umd", // see https://webpack.js.org/configuration/output/#outputlibrarytype
export: "default", // see https://github.com/webpack/webpack/issues/8480
},
filename: 'MyClassName.min.js',
path: path.resolve(__dirname, '../wherever/target/')
},
optimization: {
minimize: true
}
};
The export default makes the class available in JavaScript like the file was embedded directly, i.e.,
<script type="text/javascript" src="MyClassName.min.js"></script>
<script type="text/javascript">
<!--
var myInstance = new MyClassName();
// -->
</script>
Disclaimer: I added this answer even though the original question is three years old by now. After encountering the "is not a constructor" issue, it took me hours of searching to find the default solution. And that was the second time, I searched and found it :D

Cf. David Calhoun's answer, if you run into this with a third-party library, you may be trying to import a CommonJS module as an ECMAScript module. The workaround there seems to be to use require instead of import, e.g., instead of
import { Foo } from 'bar'
you need to write
const Foo = require('bar')
(There may be a more elegant way to handle this, but this is what worked for me.)

For me, it was the cache issue. Just cleared the cookies, cache data and closed, reopened the browser. It worked.

In my case, the error was being caused in React when trying to invoke JS's built-in Error constructor, or in other words, basically when calling throw new Error("something").
On inspection of my code, I realised I had a component called Error in my project which was being imported into the same file. The name clash between this component and JS's built-in Error constructor was causing the error mentioned in the question.

In case something is using wepack 5 + babel 7
"webpack": "5.73.0",
"#babel/core": "7.4.4",
"#babel/preset-env": "7.4.4",
"babel-loader": "8.0.5",
AND want to use class instead function, this worked for me:
class Person {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}
export default Person;
In my case .babelrc was not necesary

tl;dr
Make sure that you import properly through index files.
Explanation
For me, this error was caused by importing through index files. I had multiple directories with their index.ts files that exported all the files inside the directory. These index files were accumulated/reexported by a main index.ts file so everything can be imported through it.
src/
├── index.ts
├── module1/
│ ├── index.ts
│ ├── file1.ts
│ └── file2.ts
└── module2/
├── index.ts
├── file3.ts
└── file4.ts
In file4.ts I had an import like this:
import { file1Class, file2Class, file3Class } from "src";
I had to split it into two separate imports:
import { file1Class, file2Class } from "src/module1";
import { file3Class } from "src/module2";

Webpack: cannot reach my imported module

The problem:
I import a .js module in my entry file.
It is included in the bundle.js.
It is still undefined and cannot figure out why.
My webpack config file:
module.exports = {
entry: {
// Entry points for pages:
signup: './signup.js',
activate: './activate.js'
},
output: {
path: __dirname + '/build',
filename: '[name].page.bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
},
{
test: /\.json$/,
loader: 'json',
},
{
test: /\.vue$/,
loader: 'vue',
}
],
},
vue: {
loaders: {
js: 'babel',
}
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
};
Signup.js:
import Vue from 'vue';
import _ from 'lodash';
import axios from 'axios';
import Signup from './vue-components/page-signup-form.vue';
import UrlFunctions from './js/urlFunctions';
if (typeof UrlFunctions === "undefined") {
console.log("Still not reachable!");
}
Outputs: "Still not reachable"
Lodash and axios work as expected.
Vue + Vue Component works.
UrlFunctions module is seemingly imported into the bundle.js, however it says it is not declared.
excerpt from bundle.js:
...
var UrlFunctions = exports.UrlFunctions = {
...
In the module file it's correctly exported.
I don't have one clue.
I have created a single file like:
// sg.js
export var sg = "something";
I tried to import that in my entry file, the signup.js and this also wasn't declared! ...
npm-deps:
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"json-loader": "^0.5.4",
"script-loader": "^0.7.0",
"vue-loader": "^10.0.2",
"vue-template-compiler": "^2.1.6",
"webpack": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"lodash": "^4.17.2",
"vue": "^2.1.6"
}

It seems that for some reason when exporting a module:
export myModule; // nOK
export { myModule }; // nOK
export default myModule; // OK!
module.exports = myModule; // OK!
I tried to add include the folder for Babel from I am importing the Module from: didn't help.
Reinstalled node and npm completely, switched to Webpack 2: wasn't the problem.
It's welcome if you have any insight on that.

Webpack, React-router and React from CDN

I use Webpack for bundling my React application and react-router for routing. ReactJs is loaded from CDN as external library. I get this error message from react-router and I am not sure if it possible to use React loaded from CDN with other react libraries.
PropTypes.js:8
Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…)
(anonymous function) # PropTypes.js:8
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # index.js:15
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # index.jsx:3
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # bootstrap 2b8bebf…:39
(anonymous function) # bootstrap 2b8bebf…:39
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Experiment</title>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/main.js"></script>
</body>
</html>
index.jsx
import {Router, Route, useRouterHistory, browserHistory} from 'react-router';
ReactDOM.render(
<h1>hello</h1>, document.getElementById('content')
);
webpack.config.js
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
console.log("target event is " + TARGET);
var common = {
cache: true,
debug: true,
entry: './src/script/index.jsx',
resolve: {
extensions: ['', '.js', '.jsx']
},
externals: {
// Adapt React to different environments.
'react': {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React'
}
},
output: {
filename: '[name].js',
sourceMapFilename: '[file].map'
},
module: {
loaders: [{
test: /\.js[x]?$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
exclude: /(node_modules)/
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.less$/,
loaders: ['style', 'css', 'less']
}, {
test: /\.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
}, {
test: /\.woff2$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
}, {
test: /\.(eot|ttf|svg|gif|png)$/,
loader: "file-loader"
}]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
if(TARGET === 'dev' || !TARGET) {
module.exports = merge(common,{
devtool: 'eval-source-map',
devServer: {
historyApiFallback: false
},
entry: './src/script/index.jsx',
output: {
filename: '[name].js',
publicPath: 'http://localhost:8090/assets'
},
plugins: [
new NpmInstallPlugin({
save: true // --save
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('dev')
})
]
});
}
if (TARGET === 'build') {
module.exports = merge(common, {
devtool: 'source-map',
output: {
path: './dist'
}
});
}
package.json
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"history": "^2.0.1",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.10.1",
"npm-install-webpack-plugin": "^4.0.4",
"react": "^15.3.2",
"react-datagrid": "^2.1.1",
"react-dom": "^15.3.2",
"react-router": "^3.0.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.15.0"
}

Can you actually specify the environment like that in externals? The docs seem pretty straightforward on how to use it. This is what my externals looks like, and I use React/ReactDOM from CDN and with other libraries no problem:
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
It seems to set the environment you need to use the output.library and output.libraryTarget options, specifically the libraryTarget option as shown in the doc examples.