Develop Reference

Error: Cannot read property 'PureComponent' of undefined

I am creating a external npm package .My package bundle is successfully created but when I am putting the bundle.js on console it give is this error
Error: Cannot read property 'PureComponent' of undefined
here is my webpack config
const config = {
// TODO: Add common Configuration
mode: "production",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
};
const fooConfig = Object.assign({}, config, {
name: "header_react_next",
entry: "./src/index.js",
output: {
path: path.resolve("build"),
libraryTarget: "umd",
library: "header",
filename: `index.js`,
},
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
plugins: [
]
});
module.exports = [
fooConfig
];
it create the bundle but when I am putting that bundle file on console it give me above error
here is my code with bundle.
these are my devdependancs
"devDependencies": {
"#babel/core": "^7.13.1",
"#babel/preset-env": "^7.13.5",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"react": "^17.0.1",
"webpack": "^5.24.1",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"axios": "^0.21.1",
"react-input": "^3.2.3"
}

PureComponent is imported from react package.
But in your Webpack config you've declared it as external.
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
This declaration means that Webpack does not need to bundle 'react' and 'react-dom' packages (from your node_modules) into bundle.js and expects those libraries to be pre-loaded in your HTML.
Please update Webpack config to include React and ReactDOM (those variable names are used by default in react and react-dom)
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
and include react and react-dom in your HTML (before bundle.js)
<!-- Load React. -->
<script src="https://unpkg.com/react#17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js" crossorigin></script>
<!-- Load your Webpack bundle -->
<script src="bundle.js"></script>

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 won't output css file when building less [duplicate]

This is my webpack.config.js file:
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
webpack = require('webpack');
module.exports = {
entry: [
'./src/app.js',
],
output: {
path: __dirname + '/../web/js',
filename: 'build.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ExtractTextPlugin('build.css')
]
}
This is my package.json file:
"dependencies": {
"angular": "^1.6.4",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"jquery": "^3.2.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.1"
}
This is my app.js file:
import 'babel-polyfill';
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';
After trying to start the webpack I get an error.
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css Module parse failed:
/var/www/dcracks/app/webpack/node_modules/bootstrap/dist/css/bootstrap.css
Unexpected token (7:5) You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3
| MIT License
| github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-42
# ./src/app.js # multi ./src/app.js
I reread already a bunch of material and shoveled a bunch of posts in various forums.
What am I doing wrong?

The signature of ExtractTextPlugin.extract is:
ExtractTextPlugin.extract(options: loader | object)
As there is no second argument, your css-loader is not being used. The most common configuration is to use css-loader to process the CSS files and style-loader as a fallback, which is used when it shouldn't be extracted (the configured loaders are still applied, but instead of being extracted the fallback loader is used).
You can use the rule that is shown in the Readme - Usage.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}

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.