Develop Reference

Webpack 5 React component library UMD bundle with SourceMaps

I am attempting to make a webpack 5 build process to create a react component library I just had a couple of things cannot seem to get working.
#1) The webpack build command works fine, and when using the inline-source-map option I can
SEE the data URL embeded in the outputted build file but when I ever I attempt to publish and test this library on NPM I always get obfuscated errors without original lines of code so I can't even tell where the errors are; what else am I missing to activate source-maps? I am using Chrome dev tools and it doesn't even tell me a source map is available for that code...
#2) Another issue I am having is after building this with webpack into the dist folder; I start another CRA test app and try to pull components out of the built library but all I get are these errors.
./src/dist/index.js
Line 1:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:112: 'define' is not defined no-undef
Line 1:123: 'define' is not defined no-undef
Line 1:190: Unexpected use of 'self' no-restricted-globals
Line 1:466: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:631: Expected an assignment or function call and instead saw an expression no-unused-expressions
I am aware webpack 5 stopped bundling polyfills for Node but shouldn't this code run
if I place it in the src directory of a CRA application? This is bundled code shouldn't it work in the browser/ in another React application? I targeted UMD so I thought it would work in this environment
here is all the necessary info
Webpack.config.js
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
module.exports = {
entry: "./src/index.js",
devtool: "inline-source-map",
externals: [nodeExternals()],
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
library: {
name: "test",
type: "umd",
},
},
plugins: [new CleanWebpackPlugin()],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "./src"),
},
],
},
};
Package.json
{
"name": "test-lib",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "start-storybook",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#storybook/addon-knobs": "^6.3.1",
"#storybook/react": "^6.3.10",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"node-sass": "^6.0.1",
"path": "^0.12.7",
"sass-loader": "^12.1.0",
"webpack": "^5.58.0",
"webpack-cli": "^4.9.0",
"webpack-node-externals": "^3.0.0"
}
}
Button.js (sample component)
import React from 'react'
import PropTypes from 'prop-types';
const Button = ({message = 'Hello world'}) => (
<button>{message}</button>
)
Button.propTypes = {
message: PropTypes.string.isRequired
}
export default Button
Build entry point (index.js)
export { default as Button } from "./components/Button";

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7.
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask'
- If you want to resolve "react", use "module:react"
- Did you mean "#babel/react"?
at Function.module.exports [as sync] (/Users/me/Desktop/reflask/node_modules/resolve/lib/sync.js:43:15)
at resolveStandardizedName (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:58:96)
# multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
I've tried removing the node_modules folder and reinstalling dependencies with the following.
Terminal
rm -rf node_modules/
npm install
Configuration
package.json
{
"name": "reflask",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"prop-types": "^15.6.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"bootstrap": "^4.1.3",
"react": "^16.5.2",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['react']
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}

in your webpack config did you already try #babel/preset-react instead of just react?
Btw. you test for /\.js$/
Better test for /\.jsx?$/ (x? means x is optional), because you import a .jsx file in your index.js
Not
options: {
presets: ['react']
}
but
options: {
presets: ['#babel/preset-react']
}

place .babelrc file at root dir with this inside
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
and remove preset from babel-loader webpack cfg
options: {
presets: ['react']
}

I did it at the end with this settings, (becouse es2015 has been changed https://www.npmjs.com/package/babel-preset-es2015)
now!
And presets in package.json or .babelrc or babel.config ::
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/react', '#babel/preset-env'],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
and..
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/plugin-transform-react-inline-elements": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.1.5",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.0.4",
"babel-node": "^6.5.3",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.20",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.26.1"
}
and the code that you call to preset example:
"theme:build": "babel theme/src -d theme/dist --presets #babel/react --plugins transform-class-properties --quiet && npm run webpack:store",
presets #babel/react
in github very much forum about the subject!

I had the same error before, I just run the app on another port.
To do so run this command in ur terminal
npm start
Then it'll ask if u want to run the app on another port write
y

It worked for me, I had to change ['react'] to ['#babel/preset-react'] in .bablerc
If your are upgrading babel from 6.x to 7.x

If your are upgrading babel from 6.x to 7.x, It worked for me, I had to change in .bablerc :
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}

error on react: Plugin/Preset files are not allowed to export objects, only functions

I am trying to install new react project but have encountered some issues.
Now after resolving many issues, I'm stuck with this issue:
ERROR in ./script.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\react_project\node_modules\babel-preset-es2015\lib\index.js
I have encountered this issue after installing #babel/core version 7.
Here's my package.json:
{
"name": "react_project",
"version": "1.0.0",
"description": "first project on react",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server --hot"
},
"author": "azima",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.7"
},
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack-cli": "^3.1.0"
}
}
webpack.config.js:
var path = require('path');
module.exports = {
entry: './script.jsx',
output: {
path: path.resolve(__dirname,''),
filename: 'transpiled.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
loaders: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}
What does the error mean and how can I resolve it?

Sorry I didn't see this question earlier, but here is the problem and the solution for it:
"babel-loader": "^8.0.1" works with "#babel/core": "^7.0.0". Babel 7 moved to scoped packages and introduced some changes in the plugin API, so your problem is you are mixing old and new babel.
babel-preset-es2015 is no longer needed, since there is a #babel/preset-env which takes care of all the new features you may need based on the target platform (see the link for configuration options).
babel-preset-react (which is a babel v6 preset) is now #babel/preset-react (a v7 preset).
And your webpack loader configuration should now look like this:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}

`document` is null after webpack vue.js

I try to build a project with vuejs and webpack.
this is my index.js
import Vue from 'vue'
import App from './app.vue'
console.log(document.body)
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h) => h(App)
}).$mount(root)
after webpack it to bundles.js, and run it on a browser, it rises:
as you can see,document beacames null.
why document does not works? this bug is my problems or from vue.js?
this is my webpack.config.js:
const path = require("path")
module.exports = {
entry:path.join(__dirname,"./src/index.js"),
output: {
path: path.join(__dirname,"dist"),
filename: "bundle.js"
},
module:{
rules:[
{
test: /\.vue$/,
loader:"vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
"css-loader"
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
"limit":1024,
name:"[name]-aaa.[ext]"
}
}
]
}
]
}
}
this is package.json
{
"description": "todolist",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"vue": "2.5.16"
},
"devDependencies": {
"webpack-cli": "^3.0.3",
"webpack": "^4.11.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",/*15. 版本不行*/
"vue-template-compiler": "^2.5.16"
}
}

I assume your index.js is placed in the head of your HTML and because the JavaScript resource is blocking, your body has not even been defined yet.
You need to either put the JavaScript after your elements that you are targeting, or you need to use the onload event.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Webpack css-loader: "Module not found: Error: Can't resolve 'main.css' in ..."

I am trying to include my css in the server hosted by webpack-dev-server. For that to happen, I apparently have to use style-loader and css-loader together, in order to bundle the css into the JavaScript.
I can't get it to work.
I follow the instructions here, yet I get the following error:
ERROR in ./src/index2.js
Module not found: Error: Can't resolve 'main.css' in C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src'
# ./src/index2.js 1:0-27
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index2.js
I know for certain that main.css is in the same folder as index2.js
My Settings
index2.js
import css from 'main.css';
// ...much more code
webpack.config.js
module.exports = {
entry: {
app: './src/index2.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'src/index.html',
inject: 'head'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index2.js",
"dependencies": {
"rxjs": "^5.5.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.1.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildb": "babel src --watch --out-dir built --copy-files",
"watch": "webpack --watch",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
One Fix
One fix is to use import css from './main.css'; instead of import css from 'main.css'; (note the ./ infront of the file name).
That does not feel right though, because the css-loader site shows that it should be the latter, not the former.
Is it a typo in the docs?
Thank you.

It is not really a typo. If you import it like this:
import css from 'main.css';
Webpack thinks, that you want to import a module, and searches for this file under node_modules. This is necessary, when you for example installed the bootstrap package and want to import its css. So when your css file comes from a dependency, you import that dependency like this. But when you want to import a lokal file, always use relative paths.
So it must be: import css from './main.css';
Further Reading:
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolve-modules