Develop Reference

Ignore variable dependency of node_module webpack

I have built a library that I want to use in a Next.JS project. Within this library a certain dependency is using an import via a string passed into a require statement within the source code where the import is taking place. This is causing webpack to not recognize the import. I don't want to change code within any node_modules as this is not a preferred approach but how can I ensure that my project using the library I built is able to compile and run?
Within file_using_string_passed_into_require_to_get_import.js:
let importName = "./potential_import_A.js"
if(condition){
importName = "./potential_import_B.js"
}
module.exports = require(importName)
This is the folder structure:
Project/
| node_modules
| my-library
| node_modules
| library-dependency
| file_using_string_passed_into_require_to_get_import.js
| potential_import_A.js
| potential_import_B.js

To create a local (unpublished) library package
Create a 'my-library' folder (outside your current project dir).
Do npm init (Folder must include the 'package.json' )
Include source code (potential_import_A), exporting any desired functions.
In the actual project folder:
cd into the folder of the project that needs to use your library.
Run npm install --save local/path/to/my-library.
The --save will add the package to your dependencies in the project's package.json file, as it does with 3rd party published packages. It will also add a copy of the source code to the node modules folder of the project, as always.
Importing your new library:
import/require the package as you would normally, from any project.
For example
import { myFunction } from "my-library"

I got it to work by excluding node_modules from the webpack build. Since I am using Next.JS this is within my next.config.js
const nodeExternals = require('webpack-node-externals');
module.exports = {
webpack: (
config,
{
buildId, dev, isServer, defaultLoaders, nextRuntime, webpack,
},
) => {
if (isServer) {
config.target = 'node';
config.node = {
__dirname: true,
global: true,
__filename: true,
};
config.externals = [nodeExternals()], // in order to ignore all modules in node_modules folder
config.externalsPresets = {
node: true, // in order to ignore built-in modules like path, fs, etc.
};
}
return config;
},
};

How to debug import of a javascript function in React?

I have some functions in a javascript file (helpers.js) that are imported into a react file (caller.jsx).
helpers.js:
async function one() {
// ...
}
function two() {
// ...
}
module.exports = { one, two }
caller.jsx:
const { one, two } = require("../utils/helpers")
When I run my local React server (npm run start), everything works fine. I can use the app and it works.
When I run a production build (npm run build) and serve up the javascript from that build, it doesn't work, and there's an error message in the console:
main.d780c23e.chunk.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Module.<anonymous> (main.d780c23e.chunk.js:1)
at Module.228 (main.d780c23e.chunk.js:1)
at i ((index):3)
at Module.375 (main.d780c23e.chunk.js:1)
at i ((index):3)
at t ((index):3)
at Array.r [as push] ((index):3)
at main.d780c23e.chunk.js:1
And the compiled code in the browser shows the problem at the exports of helpers.js, right at the equals sign (=):
b.exports = {
one: function() { ... },
two: function() { ... }
}
}
I have also tried importing the symbols in caller.jsx:
import { one, two } from "../utils/helpers"
In that case, the production build complains that the symbol is not exported.
./src/hooks/caller.jsx
Attempted import error: 'two' is not exported from '../utils/helpers'.
And if I delete two, then it complains about one.
It seems the CommonJS style of code (with module.exports) isn't working in the ESModule style of code (with import).
However, I have some other files (call them caller2.jsx and helper2.js) where it is working for helper2.js to use module.export and caller2.jsx to use an import statement.
I am flummoxed about how to tell what's going in.
It IS exported, damnit! Why does only the production compiler say it's not?
Versions: node v16.10.0, npm 7.24.0, react 17.0.2, react-scripts 4.0.3.
EDIT: Some build info: we build using npm. Here are the scripts in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
}
As an example, here is the full output of build:
$ npm run build
> myapp#0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
421.79 KB build/static/js/2.9462f3d3.chunk.js
23.57 KB build/static/css/2.0a9ec390.chunk.css
20.85 KB (+1 B) build/static/js/main.2d21dfa5.chunk.js
2.49 KB build/static/css/main.8d569477.chunk.css
1.73 KB build/static/js/3.2618e91d.chunk.js
1.17 KB build/static/js/runtime-main.2616b467.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
EDIT 2: We are using hardhat, so we cannot use ESModule exports. See for example this github issue, or this stackoverflow question.

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

Typescript module, require external node_modules

I need to use a simple node_module inside a simple typescript file, but it seems that the compiler doesn't want to get it.
Here's my simple ts file :
import glob = require('glob');
console.log(glob);
And I've got this error :
[13:51:11] Compiling TypeScript files using tsc version 1.5.0
[13:51:12] [tsc] > F:/SkeletonProject/boot/ts/Boot.ts(4,23): error TS2307: Cannot find external module 'glob'.
[13:51:12] Failed to compile TypeScript: Error: tsc command has exited with code:2
events.js:72
throw er; // Unhandled 'error' event
^
Error: Failed to compile: tsc command has exited with code:2
npm ERR! skeleton-typescript-name#0.0.1 start: `node compile && node ./boot/js/Boot.js`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the skeleton-typescript-name#0.0.1 start script.
However, when I use a simple declaration in this same script, it works :
var x = 0;
console.log(x); // prints 0 after typescript compilation
What am I doing wrong in this case ?
EDIT:
Here's my gulp file :
var gulp = require('gulp');
var typescript = require('gulp-tsc');
gulp.task('compileApp', ['compileBoot'], function () {
return gulp.src(['app/src/**/*.ts'])
.pipe(typescript())
.pipe(gulp.dest('app/dist/'))
});
gulp.task('compileBoot', function () {
return gulp.src(['boot/ts/*.ts'])
.pipe(typescript({
module:'commonjs'
}))
.pipe(gulp.dest('boot/js/'))
});
gulp.start('compileApp');
Thanks for advance
Thanks for advance

You are using the correct syntax:
import glob = require('glob');
But the error: Cannot find external module 'glob' is pointing out that you are using a special case.
By default, the compiler is looking for glob.ts, but in your case you are using a node module, not a module that you have written. For this reason, the glob module will need special treatment...
If glob is a plain JavaScript module, you can add a file named glob.d.ts with type information that described the module.
glob.d.ts
declare module "glob" {
export class Example {
doIt(): string;
}
}
app.ts
import glob = require('glob');
var x = new glob.Example();
Some Node modules already include the .d.ts in the package, in other cases you can grab it from Definitely Typed.

Here is the error with your code
import glob = require('glob');
Because in node.js import is not a reserved keyword. If you require any module in your application, you simply require it using the statement
var glob = require('glob');
Once done you can then use
console.log(glob);
To print the value of glob.Replacing import will hopefully do the job for you.

Can't require Underscore with CasperJS

I'm using CasperJS to run automated frontend tests but have run in to an issue with using other npm modules in my tests. I'm aware of patchRequire however I believe that is only to be called outside of the test environment as the test runner patches require automatically. I did include it but the results were the same. It says it can't find the module. I have confirmed the underscore module is installed in node_modules in the projects root folder.
Code
'use strict'
_ = require 'underscore'
testConfig =
testPageUrl: ''
testSearchTerm: 'the'
config = _.extend testConfig, require 'common/config'
Code in Javascript
'use strict';
_ = require('underscore');
testConfig = {
testPageUrl: '',
testSearchTerm: 'the'
};
config = _.extend(testConfig, require('common/config'));
Error
CasperError: Can't find module underscore

So solution I eventually found was to create proxy modules that import the npm module and export it out to the casper script.
./proxies/underscore.js:
module.exports = require('underscore');
./tests/test.js
var _ = require('../proxies/underscore');