We Keep Coding

Webpack authored library ReferenceError: react is undefined

I've searched and searched, but can't find an answer. Losing hope.
Here's the issue:
I have a component library that's built on React 17. I've bundled it using webpack 4.
The bundle gets generated and there don't seem to be any issues with it, until I tag it and attempt to use it in my work app.
Then I get the following error:
ReferenceError: react is not defined
The app compiles just fine, no errors. It only crashes when trying to use it.
Here's my webpack config for the library:
/* eslint-disable #typescript-eslint/no-var-requires */
const path = require('path');
const flexBugFixes = require('postcss-flexbugs-fixes');
const presetEnv = require('postcss-preset-env');
const autoprefixer = require('autoprefixer');
const normalize = require('postcss-normalize');
const nodeExternals = require('webpack-node-externals');
// const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
target: 'web',
mode: 'production',
entry: './src/index.tsx',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
library: 'RenezaComponents',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
[
'#babel/preset-react',
{
runtime: 'automatic'
}
]
]
}
},
'ts-loader'
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
flexBugFixes,
presetEnv({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
autoprefixer,
normalize()
]
}
}
}
],
sideEffects: true
},
{
test: /\.s(a|c)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
flexBugFixes,
presetEnv({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
autoprefixer,
normalize()
]
}
}
},
'sass-loader'
]
},
{
test: /.(woff(2)?|ttf)/,
loader: 'file-loader'
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader'
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
externals: nodeExternals()
};
The library gets installed using npm from our work private repository.
Example:
import { Button } from 'reneza-components'; // package.json has this as the library name
I've tried mucking about with externals, but none of them work. It always complains about the same thing.
The only other solution right now that I can come up with is just bundling react with it so it'd shut up. But that's not optimal.
I'm out of ideas. Perhaps anyone here would be a bit more clever than me?
Edit: Even bundling it together makes it throw the same error. So I'm all out of ideas.

How to handle import of SASS when building isomorphic React app?

I currently have the current setup for my React app with SSR support:
React app
Express server that compiles the React app via webpack
Using babel-node to run the Express app with ES6 features etc
Everything is working fine, I fire up the Express app and it compiles my React app etc. However - then I started to CSS modules to the React app, and then of course it all broke down, on the server side only of course. It does not know how to handle my .scss files when they are being imported in the React app.
If we forget about the CSS part, everything is working as I want it to. I can run the whole application in "dev-mode", where I have hot reloading etc, babel-node is transpiling my ES6 node code etc.
And I have setup a build script which is compiling the node source to valid ES5, and the React app gets bundled into a single file. All good.
But how should I be able to keep my setup, but with the CSS modules working without Node is complaining it does not understand that code?
My half-way-solution I came up with was when I build everything for production I tell babel to skip my serverRender.js file (which is the one that imports my App.js, uses renderToString etc, and instead compile that specific file with Webpack (using isomorphic-style-loader, css-loader etc), and outputs it in the right folder for my "server" folder/structure. That works, but it just feels wrong.
And then if I come back to running in dev mode, I basically have the same issue again, if I dont setup Webpack for that part of the development too...
Any one that can tell me the better way to do this setup?

I had the same issue working on isomorphic React app. Whatever I tried, I either had a problem described in here: SCSS compilation in an isomorphic React app or the error below:
Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
I was able to solve the problem by adding isomorphic-style-loader package to my server configs in the webpack.
Here is the client configs for the webpack:
var browserConfig = {
//usual stuff
module: {
rules: [{
//... ,
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true, //turns on the CSS Module mode
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]', //generates CSS class names
sourceMap: true
}
},
{
loader: 'sass-loader'
}
]
}
]
}
};
And server configs:
var serverConfig = {
//...
module: {
rules: [{
//... ,
{
test: /\.scss$/,
use: [
{
loader: 'isomorphic-style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
sourceMap: true
}
},
{
loader: 'sass-loader'
}
]
}
]
},
}
With these configs in place, I was able to create styles.scss with simple styles:
$blueColor: #2196F3;
.component {
background: $blueColor;
}
Import it in the JS file:
import myStyles from './styles.scss';
And use it inside the React component in render():
<div className={ myStyles.component }>
This solution was kindly provided by DigitalKwarts, you can find more details about this solution here: https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/
Let me know if it worked for you or of you were able to come up with a better solution.

I read #Galina answer and it's great. I set up a boilerplate using the article he has mentioned:
https://stackoverflow.com/a/68600509/6200607
Its config for webpack.config.js:
const path = require('path');
const isDevelopment = true;
module.exports = [
{
name: 'client',
target: 'web',
entry: './client.jsx',
output: {
path: path.join(__dirname, 'static'),
filename: 'client.js',
publicPath: '/static/',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [
{
loader: 'babel-loader',
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: isDevelopment,
}
},
{
loader: 'sass-loader'
}
]
}
],
},
},
{
name: 'server',
target: 'node',
entry: './server.jsx',
output: {
path: path.join(__dirname, 'static'),
filename: 'server.js',
libraryTarget: 'commonjs2',
publicPath: '/static/',
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [
{
loader: 'babel-loader',
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'isomorphic-style-loader',
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: isDevelopment,
}
},
{
loader: 'sass-loader'
}
]
}
],
},
}
];

react production build, assets not loading

I am experiencing annoying problem, when i run my react app in development environment it all works ok, but when i try to build to production, all the links are wrong.
assume this tree:
main_directory
public/
svg/
some_img.svg
src/
components/
some_component.jsx
App.js
index.js
Now in some_component.jsx i am referencing svg file in this way:
src="/public/svg/some_img.svg"
however after building to production this path is untouched and therefore cannot access file anymore, as there i would need it to be changed to this:
src="svg/some_img.svg"
i was playing in the webpack config file, i thought that maybe by setting:
publicPath: "/"
to:
publicPath: "/public/"
would resolve the problem but the only thing it did was error during application start:
CANNOT GET/
my webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
});
module.exports = {
output: {
filename: "main.[hash:8].js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader?presets[]=react"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sass|scss)$/,
use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"]
},
{
test: /\.svg$/,
loader: "svg-sprite-loader"
}
]
},
plugins: [htmlPlugin],
devServer: {
historyApiFallback: {
rewrites: [{ from: /^\/$/, to: "/index.html" }]
}
},
resolve: {
extensions: [".js", ".jsx", ".json"]
}
};
How does one resolve this problem, so for both dev and production paths are unified?

How about importing the svg and then referencing the imported variable:
import someImg from "../../public/svg/some_img.svg"
src={someImg}

this is the solve for the question, config required for to specify path:
module: {
...
rules: [
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
query:{
outputPath: './img/',
name: '[name].[ext]?[hash]'
}
}
...
]
}

Shimming Highcharts in Webpack

I have got this webpack.config.js definition:
module.exports = {
context: __dirname + "/app",
output: {
path: path.resolve(__dirname, "../Scripts"),
filename: "bundle.js"
},
entry: ["./app.ts", "angular", "angular-ui-router", "jquery", path.join(__dirname, "vendor", "highcharts.src.js"), path.join(__dirname, "node_modules/angular-local-storage/dist", "angular-local-storage.js")],
stats: "minimal",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
},
plugins: [
// new webpack.optimize.UglifyJsPlugin(),
new webpack.ProvidePlugin({
"Highcharts": "imports?this=>global!exports?global.Highcharts",
})
],
devtool: "source-map",
module: {
loaders: [
{ test: /\.html$/, loader: "raw", exclude: exclusionRegexs },
{ test: /\.css$/, loader: "style!css", exclude: exclusionRegexs },
{ test: /\.ts$/, loader: "ng-annotate!ts-loader", exclude: exclusionRegexs }
]
/*preLoaders: [
{
test: /\.js$/, // include .js files
exclude: /node_modules/, // exclude any and all files in the node_modules folder
loader: "jshint-loader"
}
]*/
}
};
this line is supposed to export highcharts and then import highcharts directly onto the window object, which is what I want to do, but it is not quite there. There is an example which demonstrates how to do it.
new webpack.ProvidePlugin({
"Highcharts": "imports?this=>global!exports?global.Highcharts",
})
In the highcharts src is:
Highcharts = win.Highcharts = win.Highcharts ? error(16, true) : {};
So evidently it is being put onto the window.
I assume it's go something to do with the entry stuff, there is a path in that array which points directly to the correct place where highcharts is defined, and it is bundling it correctly.
I think somewhere I haven't linked ProvidePlugin highcharts entry with the source entry?
The current error I'm getting from the webpack build output is:
Module not found: Error: Cannot resolve module 'exports'

Use webpack with jade-loader without explicitly requiring assets

I am trying to use Webpack jade-loader in combination with html-loader to be able to omit requires in jade templates + use a path relative to a certain folder. I have tried a few things, none of them worked.
By default jade-loader works when using img(src=require("../../../../assets/images/imac.png") alt="computer"), with the following webpack config:
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/app.js'
],
context: path.resolve(__dirname + "/client"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
// placed here so we know that it is done before transpiling
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: [/node_modules/, /\.config\.js/, /\.conf\.js/ ] }
],
loaders: [
{ test: /\.html$/, loader: 'raw' },
{ test: /\.jade$/, loader: 'jade-loader' },
{ test: /\.less$/, loader: 'style!css!less' },
{ test: /\.css/, loader: 'style!css' },
{ test: /\.(png|jpg|jpeg|svg)$/, loader: 'file' },
{ test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
]
},
eslint: {
configFile: './.eslintrc'
}
};
If I add the html-loader ({ test: /\.jade$/, loader: 'html-loader!jade-loader' }) which is supposed to require sources by default, I keep getting the 'Error: Module not found'. The console logs all the paths that it tried, all relative to the current working file.
I tried to give it some context, with context: path.resolve(__dirname + "/client"). It didn't work either.
I also tried to combine with the raw loader: raw-loader!html-loader!jade-loader. I don't get the error but the wepback output that is served is not my app at all, but instead something along the lines of:
var jade = require(/......) ....
Do you have any idea ?
Thanks for your help

Had the same Problem.
https://www.npmjs.com/package/pug-html-loader worked for me:
module.exports = {
// your config settings ...
module: [
//your modules...
loaders: [{
include: /\.jade/,
loader: 'pug-html-loader'
}]
]
};

I don't know what do you want. My need is to load a template from a directive (component in 1.5)
angular.module('app').component('myComponent', {
bindings: {},
template: require('./mytemplate.jade')()
});
You can to note that I'm invoking the returned function.