Develop Reference

Process.env undefined in vite

I trying to use Tesserract.js https://github.com/naptha/tesseract.js#documentation with Vue.js which uses Vite as bundler.
My problem is that I get this error:
Cannot read properties of undefined (reading 'TESS_ENV')
This error happens inside:
module.exports = {
...defaultOptions,
workerPath: (typeof process !== 'undefined' && process.env.TESS_ENV === 'development')
? resolveURL(`/dist/worker.dev.js?nocache=${Math.random().toString(36).slice(3)}`)
: `https://unpkg.com/tesseract.js#v${version}/dist/worker.min.js`,
/*
* If browser doesn't support WebAssembly,
* load ASM version instead
*/
corePath: `https://unpkg.com/tesseract.js-core#v${dependencies['tesseract.js-core'].substring(1)}/tesseract-core.${typeof WebAssembly === 'object' ? 'wasm' : 'asm'}.js`,
};
Well, in vite I need to use import.meta.env.MODE instead of process.env.TESS_ENV
I tried to change the tesseract.js code. I went inside:
node_modules -> tesseract -> src -> worker -> browser -> defaultOptions.js
And changed it to import.meta.env.MODE but for some reason the code does not get applied and it still displays me the old error.
How do I make this work?

I got it:
export default defineNuxtConfig({
vite: {
define: {
"process.env.TESS_ENV": process.env.ENV,
},
},
});
I need to defined it, now its not undefined anymore

Remember to use the correct prefixes for .env file used in Vite, Nuxt etc.
ex.:
Vite .env
//.env file
VITE_BASE_URL: 'example.com'
Nuxt3 .env
//.env file
NUXT_BASE_URL: 'example.com'
OR
define it straight inside defineNuxtConfig

webpack TypeError: Cannot read property 'resolved' of undefined

I'm currently working on a project with webpack (version 5.50.0) and Storybook (version 6.3.7). The stories directory in this project is within the storybook directory.
During an update of webpack to version 5.51.1 I came across the following error
when I run npm run storybook:
10% building 0/15 entries 21/55 dependencies 1/17 modules/Users/dsudol/development/projects/ca_projects/Test/node_modules/webpack/lib/FileSystemInfo.js:816
if (entry.resolved !== undefined) return entry.resolved;
^
TypeError: Cannot read property 'resolved' of undefined
at getResolvedTimestamp
Here's my main.js config
'use strict';
const path = require('path');
module.exports = {
stories: [
'./**/*.stories.#(js|jsx|ts|tsx|mdx)'
],
core: {
builder: 'webpack5'
},
addons: [
'#storybook/addon-links',
'#storybook/addon-docs',
'#storybook/addon-contexts/register',
'#storybook/addon-controls',
{
name: '#storybook/addon-essentials',
options: {
backgrounds: true
}
}
]
};
How can I solve this without moving the stories out of the storybook directory or using an explicit path like './stories/**/*.stories.#(js|jsx|ts|tsx|mdx)'.
Tipps to Reproduce
Create a simple app with react (I did it without npm install create-react-app), webpack and Storybook. Move the stories directory inside the .storybook directory. Then change the path in main.js accordingly and run npm run storybook.

This was fixed in Webpack 5.51.2, so you'll need to update.
Further reading:
Bug Report
Bug Fix

Webpack bundle error: cannot read property of undefined

My web app uses Webpack 5.45.1 as a module bundler and the only library - ethereum web3.js 1.4.0.
// webpack configuration file
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const path = require('path');
module.exports = {
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist/dev'),
filename: '[name].bundle.js',
},
entry: {
index: './src/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader'],
}
]
},
plugins: [
new NodePolyfillPlugin()
]
}
The entry point contains one single statement: import Web3 from 'web3';
Executing of the resulting bundle with a browser ends in the following error:
assertion_error.js:486 Uncaught TypeError: Cannot read property 'custom' of undefined
at eval (assertion_error.js:486)
at eval (assertion_error.js:500)
at Object../node_modules/assert/build/internal/assert/assertion_error.js (index.bundle.js:1063)
at __webpack_require__ (index.bundle.js:6721)
at eval (assert.js:38)
at Object../node_modules/assert/build/assert.js (index.bundle.js:1052)
at __webpack_require__ (index.bundle.js:6721)
at eval (index.js:3)
at Object../node_modules/console-browserify/index.js (index.bundle.js:1624)
at __webpack_require__ (index.bundle.js:6721)
I found it out, undefined is a value of this expression: require('util/').inspect.
Can anyone provide a hint on how it can be fixed?

This is because when you want to use web3 in the browser or in a client environment you have to manually include the prebuilt "node_modules/web3/dist/web3.min.js" in to your html with a script tag. That's the way it described in the documentation or you just get it from a cdn.
You should only do this:
import web3 from "web3";
if you want to run it in the nodejs runtime (Server side code or in the Command line).
If you insist on building this yourself then you have to clone the web3.js git repository and run npm run build, then get the /dist/web3.min.js file, and include it in a html script tag of your page, which is still pretty much the same thing and unnecessary.
Read the documentation carefully and see for your self.
web3.js github repo

As it turned out, in my case the problem was in NodePolyfillPlugin, which has a bug related to a circular dependency. I opened the issue on github.

How do I correctly configure mocha tests with ts_transformer_keys?

I can't seem to set the custom transformer for ts-transform-keys with my mocha tests.
I’m using mocha 6.1.4
ts-node 8.3.0 https://www.npmjs.com/package/ts-node
ts-trasnformer-keys 0.3.5 https://github.com/kimamula/ts-transformer-keys
ttypescript 1.5.7 https://github.com/cevek/ttypescript
The ts-node documentation says that you cannot set a custom transformer on the CLI, only programatically. So I'm trying to use ttypescript to get around that restriction.
I've tried the following...
Note: test.ts contains the following
import { keys } from 'ts-transformer-keys';
describe("xyz"), () => {
it("123", (done) => {
keys<CustomInterface>();
});
});
Attempt 1) - Set the ts-node with an environment variable
TS_NODE_COMPILER="ttypescript" mocha test/test.ts --require ts-node/register
Then I have the following in test/tsconfig.json
{
"compilerOptions": {
"plugins": [
{ "transform": "ts-transformer-keys/transformer" }
]
}
}
This results in Uncaught TypeError: ts_transformer_keys_1.keys is not a function which indicates that the custom transformer wasn't used at compile time.
Attempt 2) Following the typescript API example from ts-transformer-keys
I added a mocha.opts file with the following
--file test/transformer-config.js
and a transformer-config.js file with the following
const ts = require('typescript');
const keysTransformer = require('ts-transformer-keys/transformer').default;
const program = ts.createProgram(['test/test.ts'], {
strict: true,
noEmitOnError: true,
target: ts.ScriptTarget.ES5
});
const transformers = {
before: [keysTransformer(program)],
after: []
};
const { emitSkipped, diagnostics } = program.emit(undefined, undefined, undefined, false, transformers);
if (emitSkipped) {
throw new Error(diagnostics.map(diagnostic => diagnostic.messageText).join('\n'));
}
Then I invoke it like this mocha test/test.ts --require ts-node/register
This results in the following error
/Users/jjohnson/Documents/OCS/hmp/git/hmp-server/server/test/ttypescript-register.js:17
throw new Error(diagnostics.map(diagnostic => diagnostic.messageText).join('\n'));
^
Error: [object Object]
[object Object]
[object Object]
at Object.<anonymous> (/Users/jjohnson/Documents/OCS/hmp/git/hmp-server/server/test/ttypescript-register.js:17:9)
at Module._compile (internal/modules/cjs/loader.js:777:30)
...
It feels like in Attempt 1 it wasn't ever calling the code that sets the custom transformer in tsconfig.json or if it was getting called the code was failing silently.
It feels like in Attempt 2 I'm creating a new instance of the typescript program and then that fails for some reason. And even if it succeeded I'm not sure that this is the right way to go about configuring things since the ts.createProgram wants a list of RootNames for the files it will transpile.
Maybe my entire approach is wrong.
All I really want is a way that in my mocha tests I can verify that the expected result type is what the method returned. And I'd like to be able to do this w/out touching too much of the source code.

you should be able to define your required module (see below) and run ts-node programmatically. In this way, you can safely use any customer transformer.
// tsnode.js
const transformer = require('ts-transformer-keys/transformer').default;
require("ts-node").register({
transformers: program => ({
before: [
transformer(program)
]
})
});
then you can run mocha with require
mocha --require './tsnode.js' --watch-extensions ts,tsx "test/**/*.{ts,tsx}

You can tell ts-node which compiler to use in tsconfig.json. This is covered in the ts-node docs. If your using transformers presumably your also using ttypescript compiler. You just need to add this:
"ts-node": {
"compiler": "ttypescript"
}

Browserify shim doesn't seem to attach Tether to window object

I have the following in my package.json file:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"tether": "./node_modules/tether/dist/tether.js"
},
"browserify-shim": {
"jquery": "$",
"tether": "Tether"
}
And then this in one of my JS modules:
const $ = require('jquery');
const Tether = require('tether');
I then get the following error in the browser:
tether.min.js:1 Uncaught TypeError: Cannot set property 'Tether' of undefined
However, if I don't try to shim Tether and just use window.Tether in the module that requires it, it works fine.
const $ = require('jquery');
window.Tether = require('tether');
Does anyone know why the browserify-shim wouldn't work for Tether in this way?

You're correct - you need to manually specify the window object from your bundle.
I'm not 100% sure, but my understanding is that this part of the documentation, when it says
x exports window.$
actually means that $ is available to all modules within the bundle as $ - this does not mean the window object of your webapp.
See for instance this issue.
The problem is in that section of the documentation where it seems people believe the object should be part of the window - might be a good idea to change the wording of that.