Develop Reference

Running a webpack bundled JS library with "umd" module system in Nodejs throws error: "self" is not defined

Recently I have been developing a JavaScript library and now I want to publish it on npm.
Then I learned that I've to use a package bundler. So I started learning webpack and followed their guide Authoring a library form the docs.
In their guide they suggested using umd module type to support all module systems so I used "umd". But when I tried to run (via importing) the generated bundle file in Node.js, it throws an exception saying "self is not defined"! Then I opened the bundled file and found that there is a variable named self but I don't know what is its purpose.
Whatever long story short, then I tried commonjs and commonjs2 module type and published a test package and tried it in both react and node environment and it worked perfectly. Sadly then it didn't work in browser environment with the <script> tag. Now my question is what module type should I use?
Here is my webpack.config.js
const path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
library: {
type: "commonjs", // umd, commonjs2, ....
},
},
};
Here is my project structure
|- /dist
|- /src
|- package.json
|- webpack.config.json
Webpack versions:
"webpack": "^5.53.0"
"webpack-cli": "^4.8.0"
Thanks in advance. I highly appreciate your time on StackOverflow <3.

After lots of time wasting I found the answer in a github issue of webpack.
I can use library.type: "umd" but I just have to add the following in my webpack configuration.
module.exports = {
output: {
globalObject: 'this' // This line was missing
}
}

How to distribute package for expo? (.web.js, .js configuration)

I want to distribute a package for expo. This package was created while building my app in expo SDK36.
Like many expo dependencies, I use massively the .ios.js, .android.js and .web.js extensions.
While importing a source I have distributed on npm, resolver only import .js without any distinction.
As an example this package should work with expo:
This is the #expo/webpack-config resolved extensions:
[
".web.expo.ts",
".web.expo.tsx",
".web.expo.mjs",
".web.expo.js",
".web.expo.jsx",
".expo.ts",
".expo.tsx",
".expo.mjs",
".expo.js",
".expo.jsx",
".web.ts",
".web.tsx",
".web.mjs",
".web.js",
".web.jsx",
".ts",
".tsx",
".mjs",
".js",
".jsx",
".json",
".wasm"
]
But it does not, I have to manually import by suffixing in my sources with.web.
How can I configure expo or my distributed package in order to be able to import proper sources for each environment when sources are imported from node_modules ?
Edit
I was wrong to expect my extensions to work with the main field of my package.json, I have reconfigured my repo with :
/home/dka/workspace/github.com/yeutech-lab/react-cookiebot/src
├── CookieBot.js
├── CookieBot.native.js
└── index.js
Questions :
I have used .native.js so my reactjs users (not only expo and react-native users) will import the .js file by default
Because of (1), others react user's (neither react-native nor expo) don't need some sort of extra configuration to support react-native extensions .web.js, .ios.js, .android.is, .native.js and .js.
In case I do prefer .web.js instead of (1), it will not be possible for my react user to do as in (2), and in this case: what would be the way for them to configure react-native extensions in their project?
For all react-native users, may I know where the extension can be configured in native projects? (I believe web project can be configured in webpack with config.resolve.extensions)

Regarding the main field
In a node module, you can make the bundler resolve a platform specific "main" file by deleting the file extension in your package.json.
- "main": "index.js"
+ "main": "index"
I would advise against this though as the bundler resolution could work differently in bundlers other than Webpack and Metro. It would be safer to have one "main" file re-export the contents of other platform specific modules (It appears this is what you did in your edit, but I'll leave the explanation here for completeness):
index.js
export * from './module';
module.js Vanilla JS
module.web.js React Native for web
module.native.js React Native
In case I do prefer .web.js instead of (1), it will not be possible for my react user to do as in (2), and in this case: what would be the way for them to configure react-native extensions in their project?
It's important to remember that .web.js can still be resolved even if the project isn't a React Native web project. Create React App resolves .web.js extensions for every project.
On web, users can configure their platform extensions by modifying the config.resolve.extensions field of the Webpack config. In Expo this can be done by running expo customize:web.
Configure native extensions
This can be done by editing the project's Metro config: Example.

How to make Webpack use project's "node_modules" in js scripts located outside the project folder?

I have Node.js project and the following structure of folders:
lib
awesome-formatter.js
FrontEndApp
prettify.js
node_modules
awesome-parser
BackEndApp
...
I use awesome-parser module and awesome-formatter.js library in prettify.js script like this:
require('awesome-parser')
require('../lib/awesome-formatter.js')
awesome-formatter.js, in turns, should use awesome-parser too:
require('awesome-parser')
My FrontEndApp has been configured to use Webpack, and I'm trying to run it in dev mode using npm run dev command. However, I got the following error:
ERROR Failed to compile with 1 errors
These dependencies were not found:
* awesome-parser in /home/user/dev/lib/awesome-formatter.js
I don't want to move awesome-formatter.js inside the FrontEndApp because I also use it in BackEndApp project (and probably in some other projects) and I don't want to create separate "node_modules" in "lib" for it just not to duplicate installed modules on disk.
So, my question is, how to make Webpack use project's "node_modules" in js scripts located outside the project folder?
P.S. Of course there are workarounds like symlinks or making a full-featured module (with package.json etc.) from lib/awesome-fromatter and installing it into FrontEndApp/node_modules, but is there a direct way to solve this problem?

I've found a solution: resolve.modules sould be added to Webpack configuration file.
module.exports = {
...
resolve: {
...
modules: [
'node_modules',
resolve('node_modules')
]
},
...
}
This means that Webpack is searching modules in 'node_modules' as a relative subfolder (and it's the usual behavior), and at the absolute path to the project's 'node_modules' as well: resolve('node_modules'), so that scripts in folders outside the project (like lib in my structure) can find and use it.

webpack dll configuration not working

I'm trying to create dll configuration with webpack 4, but i keep getting:
Uncaught ReferenceError: React is not defined
My configuration is very simple:
module.exports = {
entry: {
vendor: ["react", "react-dom"]
},
output: {
filename: "[name]-manifest.dll.js",
path: base.path.project("build"),
library: "[name]",
libraryTarget: "umd"
},
plugins: [
new webpack.DllPlugin({
name: "[name]",
path: base.path.project("build/[name]-manifest.json"),
context: base.path.src("app")
})
]
};
In my development configuration I use the dllreferenceplugin.
new webpack.DllReferencePlugin({
context: base.path.src("app"),
manifest: require("../build/vendor-manifest.json")
})
and of course i define externals in development configuration, because I don't want to include them again when building my development js file:
externals: {
react: "React",
"react-dom": "ReactDOM"
}
In my code I import React.
import * as React from "react";
But in the browser I keep getting React is not defined.
I have googled everything and have not found any solution to this problem?
Thank you for any help!

Use import React, { Component } from 'react'; myself. JSX wants react to be in scope.
Largely only see externals being used when making a library, like a npm module that other folks consume that uses React. React would be marked as an external in that package to avoid double including React in the local application and inside the module.
If this is your app build process, and not an npm module then should not be marking react as externals. Your bundle needs to include react. Marking react as externals excludes it from the bundle and makes it your responsibility to manually load React before the bundle is loaded.
The externals configuration option provides a way of excluding
dependencies from the output bundles.
See the docs on webpack externals here.

Just Remove the external property from your app webpack config file.Also, Include the dll file in your index.html file.
I was also facing the same issue, because I was using both dllReference plugin and external at the same time.

How is import assets from './assets' resolved in React Starter Kit

In the server.js the assets are imported like this
import assets from './assets';
If I understood it correctly this path maps to build/public/assets which is generated through the webpack configuration here:
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
pathinfo: isVerbose,
},
Or am I mistaken on that? When I run webpack I still run into:
ERROR in ./src/server.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets
Basically the question here is not how to get it run, but why can the line import assets from './assets'; in the React Starter Kit be resolved even though there is no assets.js inside src.

you need to build the project first:
npm run build
this creates the build folder with the assets.js file in it.

Check out the webpack.config.js file in the /tools folder.
It's using assets-webpack-plugin to bundle assets into namespaced client and vender modules.
After running npm run build, webpack outputs the resulting builds to the build/public/assets folder. Since the src/server.js is referencing ./assets as a relative, not fixed path, it will work once it's bundled and you run server.js from the build/public dir.
This ReadMe is also helpful: Build Automation Tools.