Cannot find module 'C:\dist\server.generated.js' - node.js

I'm trying to learn how to set up a small web app using node.js, Express, and yarn.
I've already used yarn install on the project working directory.
Upon running yarn development I get the following error:
Error: Cannot find module 'C:\dist\server.generated.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
at Function.Module._load (internal/modules/cjs/loader.js:859:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
[nodemon] app crashed - waiting for file changes before starting...
I don't understand why it's looking for server.generated.js in C:\dist, as this is something which it autogenerated within the cwd of my project (C:\Users\name\Desktop\Coding\MERNing\MERN-Skeleton-Application\dist) upon running yarn development.
All of my Webpack files specify using the cwd for producing server.generated.js.
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const CURRENT_WORKING_DIR = process.cwd()
console.log(CURRENT_WORKING_DIR+'!')
const config = {
name: "server",
entry: [ path.join(CURRENT_WORKING_DIR , './server/server.js') ],
target: "node",
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist/'),
filename: "server.generated.js",
publicPath: '/dist/',
libraryTarget: "commonjs2"
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'babel-loader' ]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}
}
module.exports = config

The problem was that I had a typo in my nodemon.json file.
My code was
{
"verbose": false,
"watch": [ "./server" ],
"exec": "webpack --mode=development --config webpack.config.server.js && node/dist/server.generated.js"
}
the correct code would be:
{
"verbose": false,
"watch": [ "./server" ],
"exec": "webpack --mode=development --config webpack.config.server.js && node ./dist/server.generated.js"
}
I completely left out the ./ earlier, which explains why it was looking for 'server.generated.js' in C: rather than in the current working directory.

Related

TypeError: webpack.DefinePlugin is not a constructor

I am trying to add a plugin to my webpack.config.js file but when I do I get this error.
[webpack-cli] Failed to load '/Users/slatifi/git/hcah/webpack.config.js' config
[webpack-cli] TypeError: webpack.DefinePlugin is not a constructor
at Object.<anonymous> (/Users/slatifi/git/hcah/webpack.config.js:44:8)
at Module._compile (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1322:31)
at WebpackCLI.resolveConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1454:44)
at WebpackCLI.createCompiler (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1839:33)
This is my webpack.config.js file:
const { webpack } = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.jsx$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
resolve: {
extensions: [".js", ".jsx", ".css", ".png"],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
I am trying to add this env variable to solve another issue I am getting with my react app (trying to use rsuite which is causing these issues), see below:
defaultProps.js:34 Uncaught ReferenceError: process is not defined
at eval (defaultProps.js:34)
at eval (StepItem.js:99)
at Module../node_modules/rsuite/es/Steps/StepItem.js (main.js:5094)
at __webpack_require__ (main.js:6051)
at eval (Steps.js:18)
at Module../node_modules/rsuite/es/Steps/Steps.js (main.js:5105)
at __webpack_require__ (main.js:6051)
at eval (index.js:5)
at Module../node_modules/rsuite/es/Steps/index.js (main.js:5116)
at __webpack_require__ (main.js:6051)
Any advise would be much appreciated.
I had encountered same problem before, the problem is this line of code:
const { webpack } = require("webpack");
All you need to do is to remove the curly brackets {}, and the rest code will be working fine:
const webpack = require("webpack");
I had the same issue. The offered solution in the accepted answer to remove curly brackets works. But you could also just simple do this instead of removing brackets.
const { webpack, DefinePlugin } = require("webpack");
it's the same.

NodeJS+Webpack+Docker project on WSL throwing errors with native 'fs' library

I have a NodeJS project that I'm building with Webpack and running inside a Docker container. This was being developed in a Linux environment, but I decided to try to move it to WSL (Windows subsystem for Linux) because that would make things easier for the dev team. Getting it to run on WSL has been difficult though.
Currently the project builds with no problems, and Docker also seems to be running smoothly. However, when I open the project on a browser, nothing loads. On the console is the following error message:
Uncaught TypeError: Cannot read property 'native' of undefined
at Object../node_modules/fs-extra/lib/fs/index.js (index.js:107)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/fs-extra/lib/index.js (index.js:6)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (RollingFileWriteStream.js:2)
at Object../node_modules/streamroller/lib/RollingFileWriteStream.js (RollingFileWriteStream.js:265)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/streamroller/lib/index.js (index.js:2)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (file.js:3)
When I check index.js:107, I see the following lines:
// fs.realpath.native only available in Node v9.2+
if (typeof fs.realpath.native === 'function') {
exports.realpath.native = u(fs.realpath.native)
}
However, all node versions I have running are 10+. My base image is node:12 (more specifically, version 12.13.0). Nodejs and npm versions on WSL are:
me#computer:.../addin$ nodejs --version
v12.11.1
me#computer:.../addin$ npm --version
6.12.0
And NodeJS on windows is:
PS H:\> node --version
v10.15.3
I'm not sure if this is relevant, but here are my webpack config files:
webpack.server.config.js:
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
entry: {
server: './src/server/server.js',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
fs: 'empty'
},
externals: [nodeExternals()], // Need this to avoid error when working with Express
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
webpack.config.js:
const path = require("path")
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
main: './src/js/index.tsx'
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'web',
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.html', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.html$/,
use: [
{
loader: "html-loader",
//options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
excludeChunks: [ 'server' ]
})
]
}
And the build command is:
rm -rf dist && webpack --mode development --display-error-details --config webpack.server.config.js && webpack --mode development
I'm out of ideas on how to fix this. I have tried removing and reinstalling nodejs, deleting all docker images, etc. Any suggestions would be much appreciated.
Fixed by installing this npm package, importing it on server.js, and monkey-wrenching:
var rp = require('fs.realpath')
rp.monkeypatch()
Unfortunately fixing it didn' give me any more insight on what's wrong with WSL and node, but at least it works.
EDIT:
Since this question seems to be relevant to some, I have since discovered that the real problem is that I was trying to use fs in a class that was bundled with target: 'web' (the second config file I posted). This is another part of the code, and it didn't occur to me that this could be the problem.
The webpack.config.js I posted originally is for an expressJS server, while this other part of the code was for the frontend of the application.
From what I understand, target: 'web' tells Webpack not to bundle and NodeJS functions because this code will be run in a browser. target: 'node' is appropriate for code that will run in a node environment (i.e. an expressJS server, that will run on the backend)
I hope this helps people who are running into this problem.
Do you have jquery in your package.json? I remember getting that error with Create-React-App when I forget to add the jquery cdn to index.html

Why does this webpack css-loader style-loader config still fail to interpret inline css import

I need to import .css files inline from within my Server-Side rendered React application. I have configured my Webpack file to use what I believe are the appropriate loaders, however I am still receiving the following SyntaxError:
~/.../node_modules/rc-slider/assets/index.css:1
(function (exports, require, module, __filename, __dirname) { .rc-slider {
^
SyntaxError: Unexpected token .
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.rc-slider/assets/index.css (/Users/roberthunter/DEV/AMNE/website-6.0/build/webpack:/external "rc-slider/assets/index.css":1:1)
I have consulted several guides including Webpack's configuration for MiniCssExtractPlugin
https://webpack.js.org/plugins/mini-css-extract-plugin/#root
The following SO question seems to address my problem, but the solution does not work for me.
Webpack css-loader is not importing CSS
I also referenced the following to get an understanding of how css-loader and style-loader actually operate
Webpack style-loader vs css-loader
I have tried many variations of the above including importing the css with loaders inline. Ex:
import SliderCSS from 'style-loader!css-loader!rc-slider/assets/index.css';
Here are my following relevant pieces of code.
webpack.confing.js (For client-side app)
// ...imports above
module.exports = {
mode: dev ? "development" : "production",
// context: path.join(__dirname, "src"),
devtool: !dev ? "none" : "source-map",
entry: {
vendor: ["styled-components"],
webflow: ["./src/app/webflow.js"],
app: ["#babel/polyfill/noConflict", "./src/app/react.js"],
wscripts: ["#babel/polyfill/noConflict", "./src/webflow-scripts/index.js"],
},
resolve: {
modules: [
path.resolve("./"),
"node_modules",
],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
}
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
use: [
MiniCSSExtractPugin.loader,
// 'style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
loader: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
},
plugins: [
new MiniCSSExtractPugin(),
new webpack.ProvidePlugin({
"React": "react"
}),
new webpack.DefinePlugin({
'process.env.IS_BROWSER_SIDE': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
'process.env.NODE_ENV': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
}),
]
};
webpack.server.config.js (For webpacking server)
// ...imports above
module.exports = {
mode: dev ? "development" : "production",
// context: path.join(__dirname, "src"),
devtool: !dev ? "none" : "source-map",
entry: {
server: ["#babel/polyfill/noConflict", "./src/server/server.js"],
},
resolve: {
modules: [
path.resolve("./"),
"node_modules",
],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
}
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
use: [
MiniCSSExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.scss$/,
use: [MiniCSSExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
loader: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].bundle.js",
},
plugins: [
new WebpackSourceMapSupport(),
new webpack.ProvidePlugin({
"React": "react"
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(true), // Used to determine if code is rendering on the client or the server.
}),
new MiniCSSExtractPlugin(),
],
target: 'node',
node: {
__dirname: false,
},
externals: [nodeExternals()],
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"babel-plugin-styled-components",
["css-modules-transform", {
"extensions": [".css"],
"keepImport": true,
}],
],
}
package.json (scripts)
"scripts": {
"build:dev": "webpack --config webpack.config.js --progress --watch",
"build:server:dev": "webpack --config webpack.server.config.js --progress --watch",
"start": "npm-run-all --parallel build:dev build:server:dev server:dev-webpack",
"server:dev-webpack": "nodemon build/server.bundle.js",
With my current setup, I am expecting the .css modules I am importing to be parsed and added to a /dist directory along with my other webpacked assets so that they can be served properly by the express server, whose code is webpacked into the /build directory. However, adding the a line within my app to import '.../../some.css raises this syntax error.
Also, I am aware that there are boilerplates out there that simplify rendering react server-side. I tried Next.js however it was too opinionated to meet my needs (serving statically generated html from a 3rd party web builder). I not completely new to webpack, however I do not have a strong grasp on its inner workings so any additional guidance, help or suggestions are greatly appreciated.

webpack --json: Error: 'output.filename' is required

I have a valid webpack.config.js that I use constantly for development, with the following content:
var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
const proxyTarget = 'http://localhost:2246/'
const visitPort = '8056'
const isMinimize =false
const outputFolderName = ''
const TARGET = process.env.npm_lifecycle_event;
isDebug = process.env.NODE_ENV === 'production' ?
true :
false;
const common = {
entry: './src/app.js',
devServer: {
hot: true,
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve : {
alias: {
'vue$': 'vue/dist/vue'
}
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
} else {
module.exports.devtool = '#source-map'
}
if(TARGET === 'build') {
module.exports = merge(common,
{
devtool: 'source-map',
});
}
if(TARGET === "dev-server") {
module.exports = merge(common, {
devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: true,
noInfo: true,
quiet: true,
stats: 'errors-only',
// host: process.env.HOST,
port: 3001
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true // --save
})
]
});
}
The following npm run commands are in package.json and all of the commands run successfully
"scripts": {
"dev-server": "cross-env NODE_ENV=development webpack-dev-server",
"dev": "cross-env NODE_ENV=development electron ./",
"build": "cross-env NODE_ENV=production webpack --progress --profile --colors",
"start": "cross-env NODE_ENV=production electron ./",
"package": "npm run build; npm run package-osx;
}
Problem
I am trying to use the webpack-bundle-size-analyzer to check the bundled packages. The following command
$ webpack --json | webpack-bundle-size-analyzer
produced this error
/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507
throw new Error("'output.filename' is required, either in config file or as --output-filename");
^
Error: 'output.filename' is required, either in config file or as --output-filename
at processOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507:11)
at processConfiguredOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:150:4)
at module.exports (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:112:10)
at yargs.parse (/usr/local/lib/node_modules/webpack/bin/webpack.js:171:41)
at Object.Yargs.self.parse (/usr/local/lib/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:152:7)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:598:3
Error: The input is not valid JSON.
Check that:
- You passed the '--json' argument to 'webpack'
- There is no extra non-JSON content in the output, such as log messages.
The parsing error was:
SyntaxError: Unexpected end of JSON input
webpack: 3.6.0
webpack-bundle-size-analyzer: 2.7.0
Additional Notes
I have validated the webpack.config.js file, at the root of project directory
No spelling mistakes in the webpack.config.js file as far as I can see
I just need a simple JSON output from webpack to feed to webpack-bundle-size-analyzer

Webpack, require is not a function

Getting an error when running my webpack-built React app - the error is as follows:
webpack-internal:///1495:3
var crypto = require('crypto');
^
TypeError: require is not a function
at eval (webpack-internal:///1495:3:14)
at Object.<anonymous> (/path/to/project/build/main.js:9739:1)
at __webpack_require__ (/path/to/project/build/main.js:21:30)
at eval (webpack-internal:///1494:1:20)
at Object.<anonymous> (/path/to/project/build/main.js:9733:1)
at __webpack_require__ (/path/to/project/build/main.js:21:30)
at eval (webpack-internal:///692:8:18)
at Object.<anonymous> (/path/to/project/build/main.js:4515:1)
at __webpack_require__ (/path/to/project/build/main.js:21:30)
at eval (webpack-internal:///1491:12:23)
I can't figure out which module this error is coming from. I am running my project by this command:
NODE_ENV=development nodemon --watch build/ build/main.js
Here is my webpack config:
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const webpackConfig = {
context: path.join(__dirname, '..'),
entry: ['babel-polyfill', path.join(__dirname, '../src/entry.js')],
target: 'node',
output: {
path: path.resolve(__dirname, '../build'),
publicPath: '/',
libraryTarget: 'commonjs2',
filename: 'main.js'
},
resolve: {
modules: [
path.join(__dirname, '../src'),
path.join(__dirname, '../server'),
'node_modules'
],
extensions: ['.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(png|gif|jpe?g|ico|eot|svg|ttf|woff2?)$/,
loader: 'file-loader',
options: {
context: 'src/app/assets/',
outputPath: 'dist/',
name: '[path][name].[ext]?[hash]',
//limit: 10000
}
}
]
},
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
fs: 'empty',
mysql: 'empty',
__dirname: true
},
plugins: [
// hot reload new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
API_HOST: JSON.stringify(process.env.API_HOST),
API_PORT: JSON.stringify(process.env.API_PORT)
},
}),
],
externals: ['mysql', 'bindings']
}
if (process.env.NODE_ENV === 'development') {
webpackConfig.devtool = 'eval-source-map'
}
module.exports = webpackConfig
The file is being built with this command:
./node_modules/.bin/webpack --display-error-details --config webpack/webpack.config.js
The version of webpack I am using is 3.0.0.
If you still have a require in your bundle, it means that some ES6 file has not been transpiled by Babel.
I can see that you exclude node_modules from babel-loader...
Can you try removing the exclusion and see if it's any better?
Also, can you search for "require('crypto')" in all files arborescence?
Last, you say that it's a React app but babel-loader only transpiles .js files, not .jsx... Can you try changing loader's test to /\.jsx?$/ ?

Resources