Setting up actioncable and sockjs-node globally with ESBuild rails 6 - javascript

The dev team and I have been in the process of moving our current setup from webpack to esbuild. We have some coffeescript files that rely on actioncable. Actioncable has completely stopped since removing webpacker dependencies/webpack-dev-server. Does anyone know how to get actioncable to run at the window level, so that our coffeescript files can access it? We used sockjs-node for our webpack setup and need to get the same results with esbuild.
package.json
{
"name": "app",
"private": "true",
"dependencies": {
"#rails/actioncable": "^7.0.0"
"#hotwired/turbo-rails": "^7.0.1",
"#popperjs/core": "^2.10.2",
"bootstrap": "^5.1.1",
"esbuild": "^0.13.3",
"esbuild-rails": "^1.0.3",
"sass": "^1.42.1"
},
"scripts": {
"build": "node esbuild.config.js",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
esbuild.config.js
const path = require('path')
const rails = require('esbuild-rails')
require("esbuild").build({
entryPoints: ["application.js"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
watch: process.argv.includes("--watch"),
plugins: [rails()],
}).catch(() => process.exit(1))
application.js
import actioncable from "actioncable"

Related

Build error when compiling Next.js app using next-pwa

I have been trying to run a local Next.js (v 12.2.2) project but for some reason, the dev script is not working as it should.
All the dependencies have been installed but still, I can't narrow down the reason why the script doesn't work.
The terminal looks like this after running the script
error - Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'reactStrictMode' property is not expected to be
here. Did you mean property 'exclude'?
Here's the next.config.js file
const withPWA = require("next-pwa");
module.exports = withPWA({
reactStrictMode: true,
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false };
return config;
},
pwa: {
dest: "public",
register: true,
disable: process.env.NODE_ENV === "development",
},
images: {
domains: ["pbs.twimg.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"],
},
// for running with docker
output: "standalone",
});
Here's the package.json file
{
"name": "musixverse-client",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postbuild": "next-sitemap"
},
"dependencies": {
"#headlessui/react": "^1.6.6",
"#heroicons/react": "^1.0.5",
"#walletconnect/web3-provider": "^1.7.8",
"#web3auth/web3auth": "^1.1.1",
"axios": "^0.26.1",
"country-state-city": "^3.0.1",
"magic-sdk": "^8.0.1",
"moralis": "^1.10.0",
"next": "^12.2.2",
"next-pwa": "^5.4.4",
"next-sitemap": "^3.1.16",
"next-themes": "^0.0.15",
"persona": "^4.6.0",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "17.0.2",
"react-image-crop": "^8.6.12",
"react-moralis": "^1.4.0",
"react-select": "^5.4.0",
"styled-components": "^5.3.5",
"web3": "^1.7.4"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.6.0",
"eslint-config-next": "12.0.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
}
node-version: 16.17.0,
npm-version: 8.19.0
Your usage of the next-pwa plugin is incorrect as of version 5.6.0. A breaking change was introduced that changed the plugin signature (see next-pwa/releases/tag/5.6.0).
Start from version 5.6.0. This plugin function signature has been
changed to follow the recommended pattern from next.js. Mainly
extracting pwa config from mixing into rest of the next.js config.
From version 5.6.0, according to the documentation, your config should look like the following.
// `next-pwa` config should be passed here
const withPWA = require("next-pwa")({
dest: "public",
register: true,
disable: process.env.NODE_ENV === "development",
});
// Use `withPWA` and pass general Next.js config
module.exports = withPWA({
reactStrictMode: true,
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false };
return config;
},
images: {
domains: ["pbs.twimg.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"]
},
output: "standalone"
});

Module parse failed for wasm module generated by rust wasm-pack

I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.
When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.
I then import my rust function into a typescript file like:
import { run } from '../../../../Rust/skunk/pkg/skunk_lib';
My package.json looks like this:
{
"name": "skunk_interactive",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"primeicons": "^5.0.0",
"primevue": "^3.12.6",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.17",
"#vue/cli-plugin-eslint": "~4.5.17",
"#vue/cli-plugin-router": "~4.5.17",
"#vue/cli-plugin-typescript": "~4.5.17",
"#vue/cli-plugin-unit-jest": "~4.5.17",
"#vue/cli-plugin-vuex": "~4.5.17",
"#vue/cli-service": "~4.5.17",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^2.0.0-0",
"#wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
When I try to run npm run serve I get the following error:
Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| case 0:
| if (typeof input === 'undefined') {
> input = new URL('skunk_lib_bg.wasm', import.meta.url);
| }
|
I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.
I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.
Any thoughts on what might be going wrong?
I ran into a problem with the '#wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.
I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js
21 │ plugins: [
22 │ new WasmPackPlugin({
23 │ crateDirectory: __dirname,
24 + │ extraArgs: "--target web"
25 │ }),
26 │ ]
rust side preperation
in cargo.toml file
[dependencies]
wasm-bindgen="0.2.63"
[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]
inside rust file
use wasm_bindgen::prelude::*;
Inside .rs file you have to decorate any function or type with #[wasm_bindgen]
#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
Yes,
No,
}
Javascript preparation:
You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.
// package.json of your javascript project
"dependencies": {
// other dependencies
.....
// assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
"skunk_lib": "file:../pkg",
},
run npm install to load the pkg module. skunk_lib should be in the node_modules
Inside your javascript file:
// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";

Webpack breaking changes for builtin modules on Gatsby site

I've tried deploying my Gatsby site to Netlify, but I keep getting these errors for various node modules whenever I try to deploy. I've tried making a webpack.config.js file and including both of the suggested solutions to no avail. I've also tried using alias instead of fallback, adding a browser section to the package.json file which sets the modules to false, and adding a target property in the webpack.config.js file as some other stackoverflow answers have suggested, but I'm still pretty stuck. I don't have any prior experience to webpack and have been doing my best to look for answers. Is there some sort of special configuration for this with Gatsby that I'm missing?
Error message
10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM: - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
webpack.config.js
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"crypto-browserify": "^3.12.0",
"ethers": "^5.4.5",
"gatsby": "^3.11.1",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-offline": "^4.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-sharp": "^3.11.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"web3": "^1.5.2"
},
"devDependencies": {
"prettier": "2.3.2"
},
"browser": {
"assert": false,
"crypto": false,
"http": false,
"https": false
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
In Gatsby, you can't define the webpack configuration like you did because Gatsby ships its own webpack.config.js as you can read in Gatsby's glossary.
However, Gatsby allows you to add a custom webpack configuration by exposing onCreateWebpackConfig method in your gatsby-node.js file.
So:
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
Should become:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
})
}
As I said, onCreateWebpackConfig is a method exposed only in the gatsby-node.js file so that snippet must be placed there.

Trying to create readable output bundle but error message:- Entry module not found: Error: Can't resolve './src/index.js'

I am using Webpack version 6.14.8 in an Asp.net Core Razor Pages application in Visual Studio 2019. I am trying to create a readable output file. Here is the structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
|-->dist (generated by webpack)
------->main.js (webpack bundle)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
The src/index.js file is blank index.js file.
The package.json: -
{
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --entry ./src/index.js --output ./dist/main.js --mode development",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.20",
"startbootstrap-simple-sidebar": "^5.1.2",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I am trying to create a readable output folder: -"dist/main.js" in wwwroot folder: dist/main.js. However, when I ran the command: npm run wbp, I received the following error message about the entry module could not be found: Error: Can't resolve './src/index.js' in C:\ directory folder: -
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >npm run wbp
>helloword#1.0.0 wbp C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
>webpack ./src/index.js --output ./dist/main.js --mode development
asset main.js 1.47 KiB [emitted] (name: main)
.dist/main.js 644 bytes built] code generated
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
webpack 5.1.3 compiled with 1 error in 858 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HelloWorld#1.0.0 build: `webpack --config webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HelloWorld#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-10-18T07_19_13_940Z-debug.log
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >
The dist/main file was created in the project directory and its contents are: -
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./dist/main.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ })()\n;\n\n//# sourceURL=webpack://HelloWorld/./dist/main.js?");
/******/ })()
;
I looked at the url address:- https://webpack.js.org/configuration/devtool/, and I tried the "output.path" option: Output|webpack, but it did not work, when I ran the "npm run wbp" command.
How do I fix the issue of input: .src/index.js file is not found and how do I create a readable output: dist/main file?
Thank you in advance.
Current structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
----->dist (generated by webpack-created by the command: npm run build)
------->main.js (webpack bundle-created by the command: npm run build)
------->index.html (created by the command: npm run build)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
package.json
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "SET NODE_ENV='production' && webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"startbootstrap-simple-sidebar": "^5.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"#fullcalendar/core": "^5.3.1",
"#fullcalendar/daygrid": "^5.3.2",
"#fullcalendar/list": "^5.3.1",
"#fullcalendar/timegrid": "^5.3.1"
}
}
I updated the input and output files of the webpack.config.js file in development mode as follows: -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'./wwwroot/src/index.js'
],
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.json']
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: {presets: ['#babel/preset-react']} }},
{ test: /\.(sass|scsss|css)$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] },
]
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], //in order to ignore all modules in node_modules folder
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
and afterwards run the command:- npm run build

Webpack throws 'Illegal import declaration', suspected config error

I have am attempting to compile my Javascript (es6) for use server side, the environment I'm targeting involves:
node 8.9.1
npm 6.0.0
webpack 4.8.1
The first part of the code I'm attempting to compile using webpack is the file index.js and it starts like this.
import express from 'express';
import https from 'https';
// Import socket.io
let io = require('socket.io').Server;
// Now import some basic middleware for express
import * as session from 'express-session';
import * as bodyParser from 'body-parser';
import * as favicon from 'serve-favicon';
// Import useful file IO
import * as path from 'path';
let fs = require('fs');
...
However when I run webpack I get the following error:
$ webpack
Webpack is watching the files…
Hash: 1bd3f903f9c5ccdc3456
Version: webpack 4.8.1
Time: 684ms
Built at: 2018-05-10 14:51:08
Asset Size Chunks Chunk Names
server.js 3.97 KiB main [emitted] main
server.js.map 2.52 KiB main [emitted] main
../dist/keys/it-test-crt.crt 1.16 KiB [emitted]
../dist/images/favicon.ico 1.19 KiB [emitted]
../dist/keys/it-test-csr.pem 1.02 KiB [emitted]
../dist/keys/it-test-key.pem 1.64 KiB [emitted]
Entrypoint main = server.js server.js.map
[./index.js] 1.2 KiB {main} [built] [failed] [1 error]
ERROR in ./index.js
Module build failed: Error: Parse Error: Line 1: Illegal import declaration
...
BTW I am using Javascript in it's es6 incarnation so do need Bable and it is in my configs (q.v.). Even if I was not using es6 the Webpack documentation suggests that import should be respected regardless, see here, where the Webpack documentations says:
Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you.
So my question is why do I see the above error? My current assumption is I have made an error somewhere in my configuration of Webpack, see below:
var nodeExternals = require('webpack-node-externals');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
context: __dirname,
mode: 'development',
entry: './index.js',
output: {
filename: 'server.js',
path: __dirname + '/../dist/'
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: ['./', 'node_modules']
},
module: {
rules:[
{
test: /\.js?$/,
use: {
loader: 'babel-loader?presets[]=env',
}
},
{
test: /\.jsx?$/,
use: {
loader: 'jsx-loader?harmony'
}
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
target: 'node',
node: {
__dirname: false,
__filename: false
},
externals: [nodeExternals()],
watch: true,
watchOptions: {
ignored: /node_modules/
},
plugins: [
new CopyWebpackPlugin([
{from: 'images', to: '../dist/images'},
{from: 'keys', to: '../dist/keys'}
])
]
};
I have not set up a .babelrc file as I was appending the presets[]=env query to the babel-loader. Just in case it's helpful to know any other version numbers my package.json looks like this:
{
"name": "web-app",
"version": "1.0.0",
"description": "A web application using react, etc. ",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/nigel-daniels/web-app.git"
},
"keywords": [
"web",
"app",
"react",
"redux"
],
"author": "Nigel Daniels",
"license": "MIT",
"bugs": {
"url": "https://github.com/nigel-daniels/web-app/issues"
},
"homepage": "https://github.com/nigel-daniels/web-app#readme",
"dependencies": {
"async": "^2.6.0",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.2",
"cookie-parser": "^1.4.3",
"debug": "^3.1.0",
"express": "^4.16.2",
"express-session": "^1.15.6",
"express-socket.io-session": "^1.3.2",
"fs": "0.0.1-security",
"immutable": "^3.8.2",
"mongoose": "^5.0.6",
"nodemailer": "^4.4.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"redux": "^3.7.2",
"serve-favicon": "^2.4.5",
"socket.io": "^2.0.4"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"chai": "^3.5.0",
"chai-immutable": "^1.6.0",
"copy-webpack-plugin": "^4.2.3",
"jsx-loader": "^0.13.2",
"mocha": "^5.0.1",
"source-map-loader": "^0.2.3",
"webpack": "^4.8.1",
"webpack-node-externals": "^1.7.2"
},
"engines": {
"node": "^8.1.0",
"npm": "6.0.0"
}
}
Thanks for any advice!
You shouldn't need jsx-loader for a nodejs backend build. You can remove it and if necessary, let babel-loader handle .jsx extensions for you:
{
test: /\.jsx?$/, // notice the little 'x'
use: {
loader: 'babel-loader?presets[]=env',
}
},
I think the problem is that it the express module exports with module.exports, while you import with es2015 import. I don't think webpack supports the conversion natively. I would just use require instead when importing npm modules, but otherwise you this babel plugin might solve it for you: https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs.

Categories