this project has been given to us to extend by adding new functionality. I am still an undergrad student and have never developed a web app of this scale 🙂 and have never worked with the used technologies and node modules before.
I tried using this preact library in a stand-alone default preact app and it works just fine, but doesn’t when integrating it in our project.
I’m still a newbie but I guessed, according to this article, that babel configuration is causing the problem.
I’d be very grateful for any info about the used packages or if u could just point me in the right direction to debugging this problem.
Here is the function that bundles JavaScript source files:
module.exports = function createBundle(config, buildOpts) {
fs.mkdirSync(config.path, { recursive: true });
buildOpts = buildOpts || { watch: false };
// Use a custom name for the "require" function that bundles use to export
// and import modules from other bundles. This avoids conflicts with eg.
// pages that use RequireJS.
const externalRequireName = 'hypothesisRequire';
const bundleOpts = {
debug: true,
// Browserify will try to detect and automatically provide
// browser implementations of Node modules.
//
// This can bloat the bundle hugely if implementations for large
// modules like 'Buffer' or 'crypto' are inadvertently pulled in.
// Here we explicitly whitelist the builtins that can be used.
//
// In particular 'Buffer' is excluded from the list of automatically
// detected variables.
//
// See node_modules/browserify/lib/builtins.js to find out which
// modules provide the implementations of these.
builtins: ['console', '_process', 'querystring'],
externalRequireName,
// Map of global variable names to functions returning _source code_ for
// the values of those globals.
insertGlobalVars: {
// Workaround for Hammer.JS on pages that use RequireJS. Hammer doesn't
// set `module.exports` if a global variable called `define` exists.
define: () => 'undefined',
// The Browserify polyfill for the `Buffer` global is large and
// unnecessary, but can get pulled into the bundle by modules that can
// optionally use it if present.
Buffer: undefined,
// Override the default stub for the `global` var which defaults to
// the `global`, `self` and `window` globals in that order.
//
// This can break on web pages which provide their own definition of
// `global` or `self` that is not an alias for `window`. See
// https://github.com/hypothesis/h/issues/2723 and
// https://github.com/hypothesis/client/issues/277
global: function () {
return 'window';
},
},
};
if (buildOpts.watch) {
bundleOpts.cache = {};
bundleOpts.packageCache = {};
}
// Specify modules that Browserify should not parse.
// The 'noParse' array must contain full file paths,
// not module names.
bundleOpts.noParse = (config.noParse || []).map(function (id) {
// If package.json specifies a custom entry point for the module for
// use in the browser, resolve that.
const packageConfig = require('../../package.json');
if (packageConfig.browser && packageConfig.browser[id]) {
return require.resolve('../../' + packageConfig.browser[id]);
} else {
return require.resolve(id);
}
});
// Override the "prelude" script which Browserify adds at the start of
// generated bundles to look for the custom require name set by previous bundles
// on the page instead of the default "require".
const defaultPreludePath = require.resolve('browser-pack/prelude');
const prelude = fs
.readFileSync(defaultPreludePath)
.toString()
.replace(
/typeof require == "function" && require/g,
`typeof ${externalRequireName} == "function" && ${externalRequireName};`
);
if (!prelude.includes(externalRequireName)) {
throw new Error(
'Failed to modify prelude to use custom name for "require" function'
);
}
bundleOpts.prelude = prelude;
const name = config.name;
const bundleFileName = name + '.bundle.js';
const bundlePath = config.path + '/' + bundleFileName;
const sourcemapPath = bundlePath + '.map';
const bundle = browserify([], bundleOpts);
(config.require || []).forEach(function (req) {
// When another bundle uses 'bundle.external(<module path>)',
// the module path is rewritten relative to the
// base directory and a '/' prefix is added, so
// if the other bundle contains "require('./dir/module')",
// then Browserify will generate "require('/dir/module')".
//
// In the bundle which provides './dir/module', we
// therefore need to expose the module as '/dir/module'.
if (req[0] === '.') {
bundle.require(req, { expose: req.slice(1) });
} else if (req[0] === '/') {
// If the require path is absolute, the same rules as
// above apply but the path needs to be relative to
// the root of the repository
const repoRootPath = path.join(__dirname, '../../');
const relativePath = path.relative(
path.resolve(repoRootPath),
path.resolve(req)
);
bundle.require(req, { expose: '/' + relativePath });
} else {
// this is a package under node_modules/, no
// rewriting required.
bundle.require(req);
}
});
bundle.add(config.entry || []);
bundle.external(config.external || []);
(config.transforms || []).forEach(function (transform) {
if (transform === 'babel') {
bundle.transform(babelify.configure({
presets: ["es2015"]
}));
}
});
// Include or disable debugging checks in our code and dependencies by
// replacing references to `process.env.NODE_ENV`.
bundle.transform(
envify({
NODE_ENV: process.env.NODE_ENV || 'development',
}),
{
// Ideally packages should configure this transform in their package.json
// file if they need it, but not all of them do.
global: true,
}
);
if (config.minify) {
bundle.transform({ global: true }, minifyStream);
}
function build() {
const output = fs.createWriteStream(bundlePath);
let stream = bundle.bundle();
stream.on('error', function (err) {
log('Build error', err.toString());
});
if (config.minify) {
stream = stream.pipe(minifyStream());
}
stream = stream.pipe(exorcist(sourcemapPath)).pipe(output);
return streamFinished(stream);
}
if (buildOpts.watch) {
bundle.plugin(watchify);
bundle.on('update', function (ids) {
const start = Date.now();
log('Source files changed', ids);
build()
.then(function () {
log('Updated %s (%d ms)', bundleFileName, Date.now() - start);
})
.catch(function (err) {
console.error('Building updated bundle failed:', err);
});
});
build()
.then(function () {
log('Built ' + bundleFileName);
})
.catch(function (err) {
console.error('Error building bundle:', err);
});
return waitForever();
} else {
return build();
}
};
These are the dependencies in package.json in case it offers any help:
"dependencies": {
"alert": "^5.0.10",
"axios": "^0.21.1",
"babel-preset-env": "^1.7.0",
"express-fileupload": "^1.2.1",
"express-rate-limit": "^5.2.6"
},
"devDependencies": {
"@actions/core": "^1.2.6",
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@hypothesis/frontend-shared": "^1.4.0",
"@octokit/rest": "^18.0.0",
"@sentry/browser": "^6.0.2",
"approx-string-match": "^1.1.0",
"autoprefixer": "^10.0.1",
"axe-core": "^4.0.0",
"babel-plugin-inject-args": "^1.0.0",
"babel-plugin-istanbul": "^6.0.0",
"babel-plugin-mockable-imports": "^1.5.1",
"babel-plugin-transform-async-to-promises": "^0.8.6",
"babel-preset-es2015": "^7.0.0-beta.0",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"browserify-versionify": "^1.0.6",
"chai": "^4.1.2",
"chance": "^1.0.13",
"classnames": "^2.2.4",
"codecov": "^3.1.0",
"commander": "^7.0.0",
"core-js": "^3.4.1",
"cross-env": "^7.0.0",
"diff": "^5.0.0",
"dompurify": "^2.0.1",
"enzyme": "^3.8.0",
"enzyme-adapter-preact-pure": "^3.0.0",
"escape-html": "^1.0.3",
"escape-string-regexp": "^4.0.0",
"eslint": "^7.3.1",
"eslint-config-hypothesis": "^2.4.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mocha": "^8.0.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^4.0.4",
"exorcist": "^1.0.1",
"express": "^4.14.1",
"fancy-log": "^1.3.3",
"fetch-mock": "9",
"focus-visible": "^5.0.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-changed": "^4.0.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sourcemaps": "^3.0.0",
"hammerjs": "^2.0.4",
"karma": "^6.0.1",
"karma-browserify": "^8.0.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.2",
"karma-mocha": "^2.0.0",
"karma-mocha-reporter": "^2.0.4",
"karma-sinon": "^1.0.5",
"katex": "^0.12.0",
"lodash.debounce": "^4.0.3",
"loose-envify": "^1.4.0",
"mocha": "8.3.0",
"mustache": "^4.0.1",
"mustache-express": "^1.3.0",
"npm-packlist": "^2.0.1",
"postcss": "^8.0.3",
"postcss-url": "^10.0.0",
"preact": "^10.4.0",
"preact-cli": "^3.0.0",
"preact-material-components": "^1.6.1",
"prettier": "2.2.1",
"puppeteer": "^8.0.0",
"query-string": "^3.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.1.0",
"reselect": "^4.0.0",
"retry": "^0.12.0",
"sass": "^1.23.0",
"scroll-into-view": "^1.8.2",
"shallowequal": "^1.1.0",
"showdown": "^1.6.4",
"sinon": "^9.0.0",
"stringify": "^5.1.0",
"terser": "^5.0.0",
"through2": "^4.0.1",
"tiny-emitter": "^2.0.2",
"typescript": "^4.0.2",
"vinyl": "^2.2.0",
"watchify": "^3.7.0",
"wrap-text": "^1.0.7"
},
Thanks in advance 🙂