Support native node require to load modules

Author: dustinsoftware

src/React.NodeServices/NodeJsEngine.cs

@@ -19,13 +19,16 @@ private NodeJsEngine(INodeJSService nodeJSService)
 			_nodeJSService = nodeJSService;
 		}
 
-		private string WrapAsModule(string code) => $"let wrappedCode = () => vm.runInContext({JsonConvert.SerializeObject(code, _settings)}, vmContext	); module.exports = function(callback, message) {{ callback(null, wrappedCode()); }}";
+		private string WrapAsModule(string code) => $@"
+let wrappedCode = () => vm.runInThisContext({JsonConvert.SerializeObject(code, _settings)});
+
+module.exports = function(callback, message) {{
+	callback(null, wrappedCode());
+}}";
 
 		public static INodeJsEngine CreateEngine(INodeJSService nodeJSService)
 		{
-			var engine = new NodeJsEngine(nodeJSService);
-			engine._nodeJSService.InvokeFromStringAsync("let wrappedCode = () => { global.vmContext = {}; vm.createContext(global.vmContext); }; module.exports = function(callback, message) {{ callback(null, wrappedCode()); }}").ConfigureAwait(false).GetAwaiter().GetResult();
-			return engine;	
+			return new NodeJsEngine(nodeJSService);
 		}
 
 		public string Name => throw new NotImplementedException();
@@ -59,8 +62,7 @@ public void Execute(string code)
 
 		public void ExecuteFile(IFileSystem fileSystem, string path)
 		{
-			var contents = fileSystem.ReadAsString(path);
-			Execute(contents);
+			_nodeJSService.InvokeFromStringAsync(WrapAsModule($"require(path.resolve({JsonConvert.SerializeObject(fileSystem.MapPath(path), _settings)}));")).ConfigureAwait(false).GetAwaiter().GetResult();
 		}
 
 		public void ExecuteResource(string resourceName, Assembly assembly)

src/React.Sample.Webpack.CoreMvc/Content/components/expose-components.js

@@ -18,3 +18,5 @@ global.EmotionServer = { renderStylesToString };
 global.Helmet = Helmet;
 
 global.RootComponent = RootComponent;
+
+export default (resolve) => resolve();

src/React.Sample.Webpack.CoreMvc/Startup.cs

@@ -48,9 +48,7 @@ public void Configure(IApplicationBuilder app)
 					.SetLoadBabel(false)
 					.SetLoadReact(false)
 					.SetNodeJsEngine(() => NodeJsEngine.CreateEngine(app.ApplicationServices.GetService<INodeJSService>()))
-					.AddScriptWithoutTransform("~/dist/runtime.js")
-					.AddScriptWithoutTransform("~/dist/vendor.js")
-					.AddScriptWithoutTransform("~/dist/components.js");
+					.AddScriptWithoutTransform("~/server/dist/components.js");
 			});
 
 			app.UseStaticFiles();

src/React.Sample.Webpack.CoreMvc/package-lock.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "webpack"
+    "build": "rimraf wwwroot/dist && rimraf wwwroot/server && webpack"
   },
   "dependencies": {
     "emotion": "^9.2.12",
@@ -17,6 +17,7 @@
     "react-router-dom": "^5.0.0",
     "react-select": "^3.0.4",
     "reactstrap": "^8.0.0",
+    "rimraf": "^3.0.1",
     "styled-components": "^4.0.0"
   },
   "devDependencies": {

src/React.Sample.Webpack.CoreMvc/package.json

@@ -1,9 +1,10 @@
 const path = require('path');
 
-module.exports = {
+const bundle = {
 	entry: {
 		components: './Content/components/expose-components.js',
 	},
+	devtool: 'sourcemap',
 	output: {
 		filename: '[name].js',
 		globalObject: 'this',
@@ -35,3 +36,22 @@ module.exports = {
 		],
 	},
 };
+
+module.exports = [
+	{
+		...bundle,
+		target: 'web'
+	},
+	{
+		devtool: bundle.devtool,
+		entry: bundle.entry,
+		mode: bundle.mode,
+		module: bundle.module,
+		target: 'node',
+		output: {
+			...bundle.output,
+			path: path.resolve(__dirname, 'wwwroot/server/dist'),
+			libraryTarget: 'commonjs',
+		},
+	}
+]