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?

Handling undefined or null with ? throws SyntaxError: Unexpected token using webpack

I have handled undefined using ? on various places in my code. Earlier the code was directly added to html using the script tag. On browser the code works fine. Now am using webpack for my build process.
But I am getting following error while building:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (57:29)
55 | computed: {
56 | userRole(){
> 57 | return this.user?.role || 'N/A';
inside my webpack config, module is:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
}
I am using es2015 preset also. Any idea how can i fix this...
Thans in advance

I have managed to fix the optional chaining operator issue.
I have update dependencies in the package.json as following
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.6",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
& My webpack configuration is
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/preset-env'],
plugins: ["#babel/plugin-proposal-optional-chaining"]
}
},
},
],
},
Earlier I was using babel-cli, babel-core & so on. After changing to #babel/... & also the babel-loader to >8 made thing works. Babel-loader is very important here.

Webpack throws "Module parse failed with Unexpected token" error

I get Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type. error, though I already have webpack.js configured to work with ts/tsx files and all the app was working perfectly before I imported environment-dev.ts in ./src/service/transport-service.ts file.
Does any know what's the problem here? All help is very appreciated.
Error:
ERROR in ./src/services/transport-service.ts 5:24
Module parse failed: Unexpected token (5:24)
You may need an appropriate loader to handle this file type.
| import env from '../../environment-dev';
|
> export default abstract class TransportService {
| private static getCompleteUrl(endpoint: string): string {
| return env.baseUrl + env.prefix + endpoint;
# ./src/services/post-service.tsx 3:28-58
# ./src/pages/Post/index.tsx
# ./src/routes.tsx
# ./src/pages/Main/index.tsx
# ./src/components/app/index.tsx
# ./src/index.tsx
Minified app structure
├── environment-dev.ts
├── package.json
├── src
│ ├── services
│ └── transport-service.ts
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── yarn.lock
package.json devDependencies:
"devDependencies": {
"#babel/core": "^7.0.0-rc.1",
"#babel/plugin-transform-typescript": "^7.0.0-rc.1",
"#babel/preset-env": "^7.0.0-rc.1",
"#babel/preset-react": "^7.0.0-rc.1",
"#commitlint/cli": "^7.0.0",
"#commitlint/config-conventional": "^7.0.1",
"#types/react": "^16.4.12",
"#types/react-dom": "^16.0.7",
"#types/react-router-dom": "^4.3.0",
"awesome-typescript-loader": "^5.2.0",
"babel-loader": "^8.0.0-beta",
"commitizen": "^2.10.1",
"commitlint": "^7.0.0",
"css-loader": "^1.0.0",
"cz-customizable": "^5.2.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"standard-version": "^4.4.0",
"style-loader": "^0.22.1",
"tslint": "^5.11.0",
"tslint-config-airbnb": "^5.11.0",
"tslint-loader": "^3.6.0",
"tslint-react": "^3.6.0",
"typescript": "^3.0.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.js:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, "dist"),
port: 3000,
open: true
},
resolve: {
extensions: [
'.ts',
'.tsx',
'.js'
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
]
}
}
},
{
test: /\.ts?x$/,
enforce: "pre",
loader: 'tslint-loader'
},
{
test: /\.ts?x$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'sass-loader'
]
})
}
]},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new ExtractTextPlugin('style.css')
]
};
transport-service.ts:
import axios from 'axios';
import env from '../../environment-dev';
export default abstract class TransportService {
private static getCompleteUrl(endpoint: string): string {
return env.baseUrl + env.prefix + endpoint;
}
public static get(url: string, params: any = {}): Promise<any> {
return axios.get(this.getCompleteUrl(url), { params });
}
public static post(url: string, body: any = {}, params: any = {}): Promise<any> {
return axios.post(env.baseUrl, body, { params });
}
public static put(url: string, body: any = {}, params: any = {}): Promise<any> {
return axios.put(env.baseUrl, body, { params });
}
public static delete(url: string, params: any = {}): Promise<any> {
return axios.delete(env.baseUrl, { params });
}
}
environment-dev.ts:
export default {
baseUrl: 'http://localhost:3001',
prefix: ''
};

It looks like you have the question mark in the wrong place in test: /\.ts?x$/ and the pattern is not matching the .ts extension. Try replacing that with test: /\.tsx?$/.

In my case I included a file from /test in one of my src-Files. This caused the problem because the testfiles were handled differently by jest + bable

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.