I have a webpack file that looks like the one below, and I have a line in my handler.ts which looks like this:
import { PayoutEntity, IPayout, payoutEntityManager } from "/opt/nodejs/orm";
However I get the following error as the module/path for "/opt/nodejs/orm" doesn't exist locally:
Module not found: Error: Can't resolve '/opt/nodejs/orm'
The webpack build is for a lambda and the files for "/opt/nodejs/orm" are in a lambda layer that will only be accessable from the application once it's deployed to aws.
So in fact I would like webpack to ignore completely /opt/nodejs/orm and not even try to pack it.
I've tried using the ignore plugin with const ignore = new webpack.IgnorePlugin({resourceRegExp:/^(\/opt\/nodejs\/search|\/opt\/nodejs\/orm|\/opt\/nodejs\/put-event)$/}) but this just results in baking the "module not found" error into the bundled output file.
"use strict";
const path = require("path");
module.exports = {
devtool: "source-map",
entry: "./src/handler.ts",
mode: "production",
target: "node",
externals: [nodeExternals()],
node: {
__dirname: true,
},
output: {
filename: "index.js",
libraryTarget: "commonjs2",
path: path.resolve(__dirname, ".build"),
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
loader: "graphql-tag/loader",
exclude: /node_modules/,
},
{
test: /\.(tsx?)$/,
loader: "ts-loader",
exclude: [
[
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, ".serverless"),
path.resolve(__dirname, ".webpack")
],
],
options: {
transpileOnly: false,
experimentalWatchApi: true,
},
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
};
Related
I've got a lambda function which is connecting to some layers. It's built using nodejs/typescript and I'm trying to get it built using webpack.
My problem is that I can't seem to figure out how to package the app using webpack with my layer module imports.
For example, I have a reference like this in my application:
import { ProductEntity, IProduct, productEntityManager } from "/opt/nodejs/orm";
If I try to run webpack normally, i'll get a Module not found error saying it can't find "/opt/nodejs/orm".
So I've added in the ignore plugin as below:
"use strict";
const path = require("path");
const webpack = require('webpack')
const ignore = new webpack.IgnorePlugin({resourceRegExp:/^(\/opt\/nodejs\/search|\/opt\/nodejs\/orm|\/opt\/nodejs\/put-event)$/})
module.exports = {
devtool: "source-map",
entry: "./src/handler.ts",
mode: "production",
target: "node",
plugins: [ignore],
node: {
__dirname: true,
},
output: {
filename: "index.js",
libraryTarget: "commonjs2",
path: path.resolve(__dirname, ".build"),
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
loader: "graphql-tag/loader",
exclude: /node_modules/,
},
{
test: /\.(tsx?)$/,
loader: "ts-loader",
exclude: [
[
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, ".serverless"),
path.resolve(__dirname, ".webpack")
],
],
options: {
transpileOnly: false,
experimentalWatchApi: true,
},
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
};
And now I get the same error, but it's just baked in to my packaged js file.
I get something like this appear in that bundled js file:
...
var e=new Error("Cannot find module '/opt/nodejs/orm'")
...
So my question is... How do I build my lambda function using webpack and get it to not try and resolve or import the lambda layer modules?
I can see a lot of examples using serverless but I'm not using it (and not planning to because I'm using terraform).
I'm trying to transpile code down to node v10.
It seems to mostly be working, however it seems to leave Promise.allSettled in the bundle and doesn't transpile it in a way that node v10 can interpret.
This is my webpack:
var path = require("path")
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
target: "node",
mode: "production",
module: {
rules: [{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"#babel/preset-env", {
targets: { node: "10.15.0" },
}
]
],
},
},
}],
},
}
What can I do in order to get it to transpile down Promise.allSettled?
I have tried to follow this SO answer by changing the #babel/preset-env to this:
[
"#babel/preset-env", {
targets: { node: "10.15.0" },
useBuiltIns: 'usage',
corejs: {version: 3, proposals: true}
}
]
However, that just gives me the error: Module not found: Error: Can't resolve 'core-js/modules/esnext.promise.all-settled'.
My webpack.config.js is :
const path = require('path');
module.exports = {
entry: './app.ts',
target: 'node',
node: {
__dirname: true
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
When I build my project and run it I am getting the following error:
(node:51071) UnhandledPromiseRejectionWarning: Error: Cannot find module '../gather/gatherers/css-usage'
at webpackEmptyContext (webpack:///./node_modules/lighthouse/lighthouse-core/config_sync?:2:10)
at Function.requireGathererFr
This error is raised from a 3rd party library I am using - lighthouse.
How to fix this error ?
For target as node, you might have to use this package webpack-node-externals in order to ignore all modules in node_module folder. Then declare as externals:
const nodeExternals = require('webpack-node-externals');
module.exports = {
externals: [nodeExternals()],
// ...
};
It happens on a build for server side, i am already using a lot of external modules and everything worked great until now.
I am trying to add the module auth0-js and the error happens when i add the import on this lib var crypto = require('crypto'); TypeError: require is not a function.
Here is my webpack config (for server side):
const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');
module.exports = {
entry: './handler.js',
target: 'node',
profile: false,
output: {
path: path.resolve(__dirname, '../dist-server'),
publicPath: '/',
filename: 'handler.js',
libraryTarget: 'commonjs'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, '..'),
use: 'babel-loader'
},
{
test: /\.pug$/,
use: 'pug-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
__CLIENT__: false,
__SERVER__: true
}),
new StatsPlugin('stats.json', {
chunkModules: true,
exclude: [/node_modules[\\\/]react/]
})
],
resolve: {
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
},
devtool: 'source-map'
};
My .babelrc file is:
{
"presets": [
"react",
"latest"
],
"plugins": [
"transform-object-rest-spread",
"transform-runtime"
]
}
I tried to remove the exclude node_modules but i get other errors.
I am curious to know how a single library can break everything, what should i do?
I tried to get webpack, typescript and react.js working together via awesome-typescript-loader, but I constantly get errors.
I am using awesome typescript loader at Version 0.3.0-rc.2 and webpack 1.8.9
This is my webpack.config.js:
module.exports = {
entry: './ui/index.ts',
output: {
path: __dirname + '/build-ui',
filename: 'app.js',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.ts']
}
};
When I run the webpack dev server and my index.ts looks like this:
alert('hello');
It states the following error:
ERROR in ./ui/index.ts
/Users/..../typings/node/node.d.ts:29:12
Subsequent variable declarations must have the same type. Variable 'require' must be of type 'WebpackRequire', but here has type '{ (id: string): any; resolve(id: string): string; cache: any; extensions: any; main: any; }'.
Same when I put in the reference path.
When I try to import the React.js via import React = require('react'); it states:
ERROR in ./ui/index.ts
Module build failed: Cannot resolve module 'child_process' in /..../typings/node
Required in /..../typings/node/node.d.ts
I copied the node.d.ts file from the loader repo, still no luck.
Has anybody been able to get this combination work smoothly? Or should I just use a different web packager?
I'd really would like to get it to work with webpack.
All you're missing is a key target: 'node'.
This makes sure that the environment you are targeting is Node.js and not the browser, and will therefore ignore native dependencies.
Final Config:
module.exports = {
entry: './ui/index.ts',
target: 'node',
output: {
path: __dirname + '/build-ui',
filename: 'app.js',
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.ts']
}
};
You could consider using a different webpack TypeScript loader. I know a few had issues with node stuff. There are also a couple starter kits that may help out.
Disclaimer: I'm the maintainer of ts-loader.
Try creating a tsconfig.json file.
For example, as you are using awesome-typescript-loader this should work:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}