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'.
Related
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"],
},
};
I'm using webpack programmatically, with typescript, ESM, and jest. In a jest test I'm getting errors for not including a .js file extension when importing ES modules. For example:
Module not found: Error: Can't resolve 'modulename' in '/path/components'
Did you mean 'modulename.js'?
BREAKING CHANGE: The request 'modulename' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
The module in question does indeed have "type": "module" set in its package.json. I have tried adding .js to the import, and it doesn't help.
I'm invoking jest with:
node --experimental-vm-modules --experimental-specifier-resolution=node node_modules/jest/bin/jest.js
as is recommended in the docs (everything else works except webpack). Note that I have tried with and without --experimental-specifier-resolution=node (this has helped in other similar circumstances).
Any thoughts on how to get webpack to work? Thanks in advance!
Note: everything was working until it was all converted to ESM! Now only programmatic webpack isn't working.
Webpack config:
{
entry,
target: 'web',
output: {
path: outputDir,
filename: '[name].js',
},
mode: process.env.NODE_ENV as 'development' | 'production' | 'none' | undefined,
resolve: {
extensions: [
'.ts',
'.tsx',
'.js',
'.jsx',
'.ttf',
'.eot',
'.otf',
'.svg',
'.png',
'.woff',
'.woff2',
'.css',
'.scss',
'.sass',
],
},
module: {
rules: [
{
test: /\.(ttf|eot|otf|svg|png)$/,
loader: 'file-loader',
},
{
test: /\.(woff|woff2)$/,
loader: 'url-loader',
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
sourceType: 'unambiguous',
presets: [
[
'#babel/preset-env',
{
corejs: '3.0.0,',
useBuiltIns: 'usage',
},
],
'#babel/preset-react',
'#babel/preset-typescript',
],
plugins: [
'css-modules-transform',
[
'babel-plugin-react-scoped-css',
{
include: '.scoped.(sa|sc|c)ss$',
},
],
'#babel/plugin-proposal-class-properties',
],
},
},
{
test: /\.(sc|c|sa)ss$/,
use: [
'style-loader',
'css-loader',
'scoped-css-loader',
'sass-loader',
],
},
],
},
}
Ok so I found the solution here.
Basically, had to add 2 things to the webpack config under module.rules:
{
test: /\.m?js/,
type: "javascript/auto",
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
#nerdlinger answer worked for me. I had this webpack.config.js
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
],
}
...
}
and i changed it to this
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
resolve: {
fullySpecified: false,
}
}
],
}
...
}
I'm trying to load a 3d scene in react with babylonjs. And this works excellently in my React app but I am getting failed tests from tests that have previously been passing with the following errors. I have tried exempting babylon from transformations but I am still failing.
● Test suite failed to run
Jest encountered an unexpected token
SyntaxError: Unexpected token export
at compileFunction (<anonymous>)
4 | import styled, { withTheme } from 'styled-components'
5 | import { observer, inject } from 'mobx-react'
> 6 | import * as BABYLON from '#babylonjs/core'
| ^
7 | import { GLTFFileLoader } from '#babylonjs/loaders/glTF/glTFFileLoader'
8 | import '#babylonjs/loaders/glTF'
9 | import '#babylonjs/materials/custom'
Here is my webpack configuration file
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
rootMode: 'upward',
presets: [
'#babel/preset-env',
'#babel/react',
{
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
],
},
},
],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
},
}
Here is my babel configuration.
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-transform-runtime",
[
"styled-components",
{ "ssr": false, "displayName": true, "preprocess": false }
]
],
"env": {
"production": {
"plugins": [
["react-remove-properties", { "properties": ["data-testid"] }]
]
},
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Here is my jest configuration
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": ["/node_modules/(?!#babylonjs)"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"globals": {
"NODE_ENV": "test"
}
}
I found since I was in a mono-repo structure, I had to change from .babelrc to babel.config.js as recommended in jest docs. This solved the issue of transforming the esNext syntax in the #babylonjs modules
For those who aren't using babel this can be achieved with vanilla ts-jest. Be warned, this can add up to a minute to the initial load time for your tests because jest has to transform the babylonjs library.
const config = {
...
//SLOW - transform javascript
preset: 'ts-jest/presets/js-with-ts-esm',
//SLOW - transform node modules
transformIgnorePatterns: []
}
``
I am writing a plugin for an app that runs Chromium Embedded Framework (CEF) with an older version of Node.
I threw webpack & babel into the app. When I run webpack, it fails on a file that has const fs = require('fs');, or any other default node package. This is happening both for my code and dependencies:
Module not found: Error: Can't resolve 'fs' in '/Users/me/repositories/myrepo/node_modules/chokidar'
My .babelrc is the following:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": true
}
}
]
]
}
My webpack config is essentially:
module.exports = {
entry: './src/main.jsx',
mode: process.env.NODE_ENV,
devtool: isDev ? 'eval-source-map' : false,
output: {
path: PLUGINDIR,
filename: 'main.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['transform-react-jsx']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.css']
}
};
webpack config also needs target: 'node'. Doing it just in .babelrc was not enough.
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?