I'm attempting to use Rollup to generate a tree-shaken, minified script to deploy to AWS Lambda. However rollup seems to be choking on the continuation-local-storage library for some reason.
Error:
Error: Unexpected token
at error (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:5154:30)
at Module.error (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:9592:16)
at tryParse (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:9506:23)
at Module.setSource (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:9890:30)
at ModuleLoader.addModuleSource (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:17742:20)
at ModuleLoader.fetchModule (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:17796:9) {
code: 'PARSE_ERROR',
parserError: SyntaxError: Unexpected token (24:0)
at Object.pp$4.raise (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:15064:13)
at Object.pp.unexpected (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12835:8)
at Object.pp$1.parseStatement (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12975:120)
at Object.pp$1.parseIfStatement (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:13136:26)
at Object.pp$1.parseStatement (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12980:31)
at Object.pp$1.parseTopLevel (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12892:21)
at Object.parse (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12692:15)
at Function.parse (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:12715:35)
at tryParse (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:9493:23)
at Module.setSource (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:9890:30)
at ModuleLoader.addModuleSource (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:17742:20)
at ModuleLoader.fetchModule (/Users/chris/Code/box-stack/node_modules/rollup/dist/shared/rollup.js:17796:9) {
pos: 418,
loc: Position { line: 24, column: 0 },
raisedAt: 426
},
id: '/Users/chris/Code/box-stack/node_modules/continuation-local-storage/context.js',
pos: 418,
loc: {
file: '/Users/chris/Code/box-stack/node_modules/continuation-local-storage/context.js',
line: 17,
column: 0
},
frame: '15: if (!process.addAsyncListener) ' +
"require('async-listener');\n16: \n17: function " +
'Namespace(name) {\n ^\n18: this.name = name;\n19: // ' +
'changed in 2.7: no default context',
watchFiles: [
...
]
}
The offending code (continuation-local-storage/context.js line 17, position 0) is:
function Namespace(name) {
I don't see how there could be a syntax error here:
I'm running rollup through the javascript api since I need to programmatically generate the inputs here's the bit where I'm invoking the build:
try {
const build = await rollup({
external: ['aws-sdk', ...builtinModules],
input,
plugins: [
commonjs(),
nodeResolve({ extensions: ['.ts', '.js', '.json', '.node', '.mjs'] }),
json(),
babel({ extensions: ['.ts'], babelHelpers: 'bundled' })
]
});
await build.write({
dir: outDir,
format: 'cjs',
entryFileNames: '[name].js',
sourcemap: false
});
} catch (err) {
console.log(err);
throw err;
}
If anyone else comes across this, there is a workaround:
https://github.com/rollup/plugins/issues/202
Add a replace:
plugins: [
replace({"if (!process.addAsyncListener) require('async-listener": "require('async-listener"})
]
Related
I defined timeout 30 * 1000 for expect in playwright.config.ts file:
import type { PlaywrightTestConfig } from '#playwright/test';
import { devices } from '#playwright/test';
import * as os from 'os';
const config: PlaywrightTestConfig = {
globalSetup: require.resolve('./global-setup'),
testDir: './tests',
timeout: 30 * 1000,
expect: {
timeout: 30 * 1000,
},
fullyParallel: true,
forbidOnly: !!process.env.CI,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
reporter: process.env.CI ? [['dot'], ['html', { open: 'never' }]] : 'list',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
baseURL: process.env.BASEURL,
storageState: `${os.tmpdir()}/auth.json`,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
viewport: { width: 1920, height: 1080 },
},
},
],
};
export default config;
On my test I run this code and it's failed:
await expect(this.page.locator('data-test-id=side-bar')).toBeVisible();
Getting this error:
Error: expect(received).toBeVisible()
Call log:
expect.toBeVisible with timeout 5000ms
waiting for selector "data-test-id=side-bar"
But when running this code it works and the test passed:
await expect(this.page.locator('data-test-id=side-bar')).toBeVisible({
timeout: 30000,
});
What Am I doing wrong?
Why am I getting the following error when trying to create a metadata account using createCreateMetadataAccountV2Instruction from the #metaplex-foundation/mpl-token-metadata library?
SendTransactionError: failed to send transaction: Transaction simulation failed: Error processing Instruction 0: Program failed to complete
at Connection.sendEncodedTransaction (C:\xampp\htdocs\sol-tools\node_modules\#solana\web3.js\src\connection.ts:4464:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Connection.sendRawTransaction (C:\xampp\htdocs\sol-tools\node_modules\#solana\web3.js\src\connection.ts:4423:20)
at async Connection.sendTransaction (C:\xampp\htdocs\sol-tools\node_modules\#solana\web3.js\src\connection.ts:4411:12)
at async sendAndConfirmTransaction (C:\xampp\htdocs\sol-tools\node_modules\#solana\web3.js\src\util\send-and-confirm-transaction.ts:31:21)
at async addMetadataToToken (C:\xampp\htdocs\sol-tools\src\lib\metadata.ts:86:16)
at async Command.<anonymous> (C:\xampp\htdocs\sol-tools\src\cli.ts:48:7) {
logs: [
'Program metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s invoke [1]',
'Program log: Instruction: Create Metadata Accounts v2',
"Program log: panicked at 'range end index 36 out of range for slice of length 0', program/src/utils.rs:231:27",
'Program metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s consumed 6223 of 1400000 compute units',
'Program failed to complete: BPF program panicked',
'Program metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s failed: Program failed to complete'
]
}
Here's my code:
import {
createCreateMetadataAccountV2Instruction,
PROGRAM_ID,
} from '#metaplex-foundation/mpl-token-metadata'
import {
Connection,
Keypair,
PublicKey,
sendAndConfirmTransaction,
Transaction,
} from '#solana/web3.js'
export const addMetadataToToken = async (
connection: Connection,
tokenMint: PublicKey,
tokenOwner: Keypair,
name: string,
symbol: string,
arweaveLink: string
) => {
const seed1 = Buffer.from('metadata', 'utf8')
const seed2 = PROGRAM_ID.toBuffer()
const seed3 = tokenMint.toBuffer()
const [metadataPDA, _bump] = PublicKey.findProgramAddressSync(
[seed1, seed2, seed3],
PROGRAM_ID
)
const accounts = {
metadata: metadataPDA,
mint: tokenMint,
mintAuthority: tokenOwner.publicKey,
payer: tokenOwner.publicKey,
updateAuthority: tokenOwner.publicKey,
}
const dataV2 = {
name,
symbol,
uri: arweaveLink,
// we don't need these
sellerFeeBasisPoints: 0,
creators: null,
collection: null,
uses: null,
}
const args = {
createMetadataAccountArgsV2: {
data: dataV2,
isMutable: true,
},
}
const ix = createCreateMetadataAccountV2Instruction(accounts, args)
const tx = new Transaction()
tx.add(ix)
const txid = await sendAndConfirmTransaction(connection, tx, [tokenOwner])
console.log(txid)
}
Turns out I was on trying to create metadata for a token on devnet, but was using a mainnet-beta rpc endpoint for the Connection class. Thus the token I was trying to create metadata for didn't exist.
This is a really Common Error Message that occurs when there is some issue with what you are passing to the program. So make sure everything that you are input to the program is correct. In 90% of the cases, it gets resolved when checking the inputs correctly.
I'm trying to use an array of outputs using Rollup on Gulp.
The documentation only shows a basic example with a single output file. (Although it states that the output property can contain an array)
.then(bundle => {
return bundle.write({
file: './dist/library.js',
format: 'umd',
name: 'library',
sourcemap: true
});
});
If I replace that for an array, it will fail:
.then(bundle => {
return bundle.write({
file: './dist/library.js',
format: 'umd',
name: 'library',
sourcemap: true
},
{
file: './dist/file2.js',
format: 'umd',
});
});
Error: You must specify "output.file" or "output.dir" for the build.
at error (/Users/alvarotrigolopez/Sites/extensions/experiments/bundle/node_modules/rollup/dist/shared/rollup.js:158:30)
at handleGenerateWrite (/Users/alvarotrigolopez/Sites/extensions/experiments/bundle/node_modules/rollup/dist/shared/rollup.js:23403:20)
I've tried using the output option as well and using #rollup/stream instead of just rollup.
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var rollup = require('#rollup/stream');
gulp.task('js', function() {
return rollup({
input: './app.js',
output: [
{
file: 'bundle.js',
format: 'umd',
},
{
file: 'test.js',
format: 'umd',
}
]
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(gulp.dest('./build/js'));
});
Unknown output options: 0, 1. Allowed options: amd, assetFileNames, banner, chunkFileNames, compact, dir, dynamicImportFunction, entryFileNames, esModule, exports, extend, externalLiveBindings, file, footer, format, freeze, generatedCode, globals, hoistTransitiveImports, indent, inlineDynamicImports, interop, intro, manualChunks, minifyInternalExports, name, namespaceToStringTag, noConflict, outro, paths, plugins, preferConst, preserveModules, preserveModulesRoot, sanitizeFileName, sourcemap, sourcemapExcludeSources, sourcemapFile, sourcemapPathTransform, strict, systemNullSetters, validate
I am using Webpack 2 in my project to transpile and bundle ReactJS files along with a few other tasks. Here's what my config looks like:
var webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
module: {
loaders: [
{
exclude: /(node_modules)/,
loader: "babel-loader",
query: {
presets: ["es2015", "react"]
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new ExtractTextPlugin({
filename: "../../public/dist/main.css"
})
],
};
var indexConfig = Object.assign({}, config, {
name: "index",
entry: "./public/javascripts/build/index.js",
output: {
path: __dirname + "/public/dist",
filename: "index.min.js",
},
});
var aboutConfig = Object.assign({}, config, {
name: "about",
entry: "./public/javascripts/build/about.js",
output: {
path: __dirname + "/public/dist",
filename: "about.min.js"
},
});
// Return Array of Configurations
module.exports = [
indexConfig, aboutConfig
];
As evident, I am using multiple build configurations for JS, one for each page. Now, I need to add some Bootstrap JS to the mix for which I also need JQuery and Tether. Thus, I have the following 3 files in my library folder:
jquery-3.2.1.min.js
tether.min.js
bootstrap.min.js
I need these 3 files to be concatenated and bundled along with the main JS files being emitted by Webpack (e.g., index.min.js, etc.). To do so, I modified my entry item thus:
entry: {
a: "./public/javascripts/lib/jquery-3.2.1.min.js",
b: "./public/javascripts/lib/tether.min.js",
b: "./public/javascripts/lib/bootstrap.min.js",
c: "./public/javascripts/build/index.js"
}
However, doing so throws the following error:
ERROR in chunk a [entry]
index.min.js
Conflict: Multiple assets emit to the same filename index.min.js
ERROR in chunk b [entry]
index.min.js
Conflict: Multiple assets emit to the same filename index.min.js
ERROR in chunk c [entry]
index.min.js
Conflict: Multiple assets emit to the same filename index.min.js
Obviously this is because Webpack is expecting multiple output files for multiple entry items. Is there any way to overcome this problem? An existing question illustrating a similar problem doesn't seem to have any acceptable answer at the moment.
UPDATE:
Tried using the Commons chunk plugin as suggested by terales, but Webpack threw the following error this time:
ERROR in multi jquery tether bootstrap
Module not found: Error: Can't resolve 'jquery' in '/home/ubuntu/panda'
# multi jquery tether bootstrap
ERROR in multi jquery tether bootstrap
Module not found: Error: Can't resolve 'tether' in '/home/ubuntu/panda'
# multi jquery tether bootstrap
ERROR in multi jquery tether bootstrap
Module not found: Error: Can't resolve 'bootstrap' in '/home/ubuntu/panda'
# multi jquery tether bootstrap
ERROR in chunk vendor [entry]
index.min.js
Conflict: Multiple assets emit to the same filename index.min.js
Your libs shouldn't be entries. They called "vendors" in Webpack's terms.
See minimum working example repo.
In your code you should implicitly extract common vendor chunk:
var config = {
entry: { // <-- you could make two entries
index: './index.js', // in a more Webpack's way,
about: './about.js' // instead of providing array of confings
},
output: {
filename: '[name].min.js',
path: __dirname + '/dist'
},
module: {
loaders: [
// Fix error 'JQuery is not defined' if any
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
]
},
plugins: [
// this assumes your vendor imports exist in the node_modules directory
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
]
};
Trying to clean up my Rails asset pipeline with gulp. Tired of adding every npm package scss/css file to includePaths explicitly. I've searched thoroughly and read the docs, but I'm still having trouble getting Eyeglass to find my node_modules.
Here's the setup I have so far:
var sassPaths = [
'./app/assets/stylesheets/*',
publicAssets + '/stylesheets',
'./node_modules/magic.css/1.1.0/',
'./node_modules/colors.css/sass/'
],
sassOptions = {
indentedSyntax: true,
sourceComments: true,
errLogToConsole: true,
includePaths: sassPaths,
eyeglass: {
enableImportOnce: false,
buildDir: publicAssets + '/stylesheets',
assets: {
// prefix to give assets for their output url.
httpPrefix: "assets",
installer: function(assetFile, assetUri, oldInstaller, cb) {
// oldInstaller is the standard eyeglass installer in this case.
// We proxy to it for logging purposes.
oldInstaller(assetFile, assetUri, function(err, result) {
if (err) {
console.log("Error installing '" + assetFile + "': " + err.toString());
} else {
console.log("Installed Asset '" + assetFile + "' => '" + result + "'");
}
cb(err, result);
});
},
// Add assets except for js and sass files
// The url passed to asset-url should be
// relative to the assets directory specified.
sources: [{
directory: './node_modules/',
pattern: [
'**/dist/*',
'**/dist/{scss,sass,css}/*',
'**/{scss,sass,css}/*',
'**/*.{scss, sass, css}',
'**/{scss,sass,css}/*'
],
globOpts: { ignore: ["**/*.js"], root: '.', }
}]
},
importer: function(uri, prev, done) {
done(sass.compiler.types.NULL);
}
}
},
eyeglass = new Eyeglass(sassOptions);
console.log(eyeglass.modules);
console.log(eyeglass.assets.assetPath);
stream = gulp.src(sassSource)
.pipe(sourceMaps.init())
.pipe(sass(eyeglass.options).on("error", sass.logError))
.pipe(postcss([lost(), autoprefixer({ browsers: ['last 2 versions'] }) ]));
I'm trying to point Eyeglass to the './node_modules' path and use the pattern array to have it properly parse the installed packages for css/scss to import. As I look over the docs, it doesn't really seem necessary to even have to guide it with patterns, but that it'll know where to look once you point it to the right directory.
Is there a simple way to add all my --save-dev modules to eyeglass?