Ufdjrw

Why didn't Boeing produce its own regional jet?

Venezuelan girlfriend wants to travel the USA to be with me. What is the process?

One verb to replace 'be a member of' a club

Is it possible to create a QR code using text?

Im going to France and my passport expires June 19th

Should I cover my bicycle overnight while bikepacking?

Is there an expression that means doing something right before you will need it rather than doing it in case you might need it?

Bullying boss launched a smear campaign and made me unemployable

Unlock My Phone! February 2018

What exploit Are these user agents trying to use?

Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?

How badly should I try to prevent a user from XSSing themselves?

Would Slavery Reparations be considered Bills of Attainder and hence Illegal?

Examples of smooth manifolds admitting inbetween one and a continuum of complex structures

Can a virus destroy the BIOS of a modern computer?

How writing a dominant 7 sus4 chord in RNA ( Vsus7 chord in the 1st inversion)

Why do bosons tend to occupy the same state?

How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?

What's the in-universe reasoning behind sorcerers needing material components?

Assassin's bullet with mercury

A category-like structure without composition?

Little known, relatively unlikely, but scientifically plausible, apocalyptic (or near apocalyptic) events

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

What about the virus in 12 Monkeys?

Using Imports with .Net, React.Js, and Url.Content

Sending email in .NET through GmailHow to escape braces (curly brackets) in a format string in .NET.NET String.Format() to add commas in thousands place for a numberWhy is it important to override GetHashCode when Equals method is overridden?Difference between decimal, float and double in .NET?How can I get the application's path in a .NET console application?Perform debounce in React.jsUnderstanding unique keys for array children in React.jsWebpack throws syntax error for JSXWebpack css issue, missing bundle.css

0

1

I am using a .Net MVC framework, and trying to render a jsx (React) file that has imports. I am including this file in the razor page (cshtml) through the standard Url.Content injection as follows:

<script src="@Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
 ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));

 jQuery(window).on("load scroll", function () 
 'use strict'; // Start of use strict
 // Loader
 $("#dvLoading").fadeOut("fast");
 );
</script>

If I do not have an import at the top of my React file (QueueIndex.jsx) the page loads just fine. However, I would like to import the react-table package, but if include any imports in my QueueIndex.jsx file, the page breaks.

The error I'm getting is require is not defined.

I think the solution is somewhere in the use of webpack, here is my config:

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
entry: 
 nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
,
output: 
 path: __dirname + '/wwwroot/js/',
 publicPath: '/wwwroot/js/',
 filename: '[name].bundle.js'
,
module: 
 preLoaders: [
 ],
 loaders: [
 
 test: /.css$/,
 loader: "style-loader!css-loader"
 ,
 test: /.tsx?$/, loaders: ['babel', 'ts'] ,
 test: /.json$ /, loader: "json-loader" ,
 
 test: /.jsx?$/,
 exclude: /node_modules/,
 loader: "babel",
 query:
 
 presets: ['react']
 
 
 ],
 externals: 
 "moment": "moment",
 ,
,
devtool: 'source-map',
target: 'web',
plugins: [
 new CleanWebpackPlugin(['./wwwroot/js/*.js'], 
 root: __dirname,
 verbose: true,
 dry: false
 ),
 new webpack.DefinePlugin(
 'process.env': 
 NODE_ENV: JSON.stringify('production')
 
 ),
 new webpack.optimize.UglifyJsPlugin()
],
resolve: 
 extensions: ['', '.jsx', '.js', '.tsx', '.ts']
,
node: 
 fs: "empty",
 child_process: "empty"

Unfortunately, I have had no luck there. Please let me know if you have any ideas of how to resolve this issue. Thanks!

Also, Here is the Babel configuration:

"presets" : ["es2015", "react"]

javascript c# .net reactjs razor-pages

share|improve this question

edited Mar 8 at 1:28

Austin Wrenn

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you add more details? Do you get this error on the Webpack build? Runtime? How babel is configured?
  
  – EladBash
  Mar 7 at 23:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, so I get there error on runtime (like in the console). I have added my babelrc file to the question, if that's what you are looking for?
  
  – Austin Wrenn
  Mar 8 at 1:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am just quessing .. you are including queueIndex.js, but such file should not exist (probably babel temp file). Based on your webpack config the js file should be /js/nhqueue.bundle.js
  
  – Ondra
  Mar 8 at 19:29
  

  
  
  
  

add a comment | 

0

1

I am using a .Net MVC framework, and trying to render a jsx (React) file that has imports. I am including this file in the razor page (cshtml) through the standard Url.Content injection as follows:

<script src="@Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
 ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));

 jQuery(window).on("load scroll", function () 
 'use strict'; // Start of use strict
 // Loader
 $("#dvLoading").fadeOut("fast");
 );
</script>

If I do not have an import at the top of my React file (QueueIndex.jsx) the page loads just fine. However, I would like to import the react-table package, but if include any imports in my QueueIndex.jsx file, the page breaks.

The error I'm getting is require is not defined.

I think the solution is somewhere in the use of webpack, here is my config:

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
entry: 
 nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
,
output: 
 path: __dirname + '/wwwroot/js/',
 publicPath: '/wwwroot/js/',
 filename: '[name].bundle.js'
,
module: 
 preLoaders: [
 ],
 loaders: [
 
 test: /.css$/,
 loader: "style-loader!css-loader"
 ,
 test: /.tsx?$/, loaders: ['babel', 'ts'] ,
 test: /.json$ /, loader: "json-loader" ,
 
 test: /.jsx?$/,
 exclude: /node_modules/,
 loader: "babel",
 query:
 
 presets: ['react']
 
 
 ],
 externals: 
 "moment": "moment",
 ,
,
devtool: 'source-map',
target: 'web',
plugins: [
 new CleanWebpackPlugin(['./wwwroot/js/*.js'], 
 root: __dirname,
 verbose: true,
 dry: false
 ),
 new webpack.DefinePlugin(
 'process.env': 
 NODE_ENV: JSON.stringify('production')
 
 ),
 new webpack.optimize.UglifyJsPlugin()
],
resolve: 
 extensions: ['', '.jsx', '.js', '.tsx', '.ts']
,
node: 
 fs: "empty",
 child_process: "empty"

Unfortunately, I have had no luck there. Please let me know if you have any ideas of how to resolve this issue. Thanks!

Also, Here is the Babel configuration:

"presets" : ["es2015", "react"]

javascript c# .net reactjs razor-pages

share|improve this question

edited Mar 8 at 1:28

Austin Wrenn

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you add more details? Do you get this error on the Webpack build? Runtime? How babel is configured?
  
  – EladBash
  Mar 7 at 23:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi, so I get there error on runtime (like in the console). I have added my babelrc file to the question, if that's what you are looking for?
  
  – Austin Wrenn
  Mar 8 at 1:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am just quessing .. you are including queueIndex.js, but such file should not exist (probably babel temp file). Based on your webpack config the js file should be /js/nhqueue.bundle.js
  
  – Ondra
  Mar 8 at 19:29
  

  
  
  
  

add a comment | 

I am using a .Net MVC framework, and trying to render a jsx (React) file that has imports. I am including this file in the razor page (cshtml) through the standard Url.Content injection as follows:

<script src="@Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
 ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));

 jQuery(window).on("load scroll", function () 
 'use strict'; // Start of use strict
 // Loader
 $("#dvLoading").fadeOut("fast");
 );
</script>

If I do not have an import at the top of my React file (QueueIndex.jsx) the page loads just fine. However, I would like to import the react-table package, but if include any imports in my QueueIndex.jsx file, the page breaks.

The error I'm getting is require is not defined.

I think the solution is somewhere in the use of webpack, here is my config:

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
entry: 
 nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
,
output: 
 path: __dirname + '/wwwroot/js/',
 publicPath: '/wwwroot/js/',
 filename: '[name].bundle.js'
,
module: 
 preLoaders: [
 ],
 loaders: [
 
 test: /.css$/,
 loader: "style-loader!css-loader"
 ,
 test: /.tsx?$/, loaders: ['babel', 'ts'] ,
 test: /.json$ /, loader: "json-loader" ,
 
 test: /.jsx?$/,
 exclude: /node_modules/,
 loader: "babel",
 query:
 
 presets: ['react']
 
 
 ],
 externals: 
 "moment": "moment",
 ,
,
devtool: 'source-map',
target: 'web',
plugins: [
 new CleanWebpackPlugin(['./wwwroot/js/*.js'], 
 root: __dirname,
 verbose: true,
 dry: false
 ),
 new webpack.DefinePlugin(
 'process.env': 
 NODE_ENV: JSON.stringify('production')
 
 ),
 new webpack.optimize.UglifyJsPlugin()
],
resolve: 
 extensions: ['', '.jsx', '.js', '.tsx', '.ts']
,
node: 
 fs: "empty",
 child_process: "empty"

Unfortunately, I have had no luck there. Please let me know if you have any ideas of how to resolve this issue. Thanks!

Also, Here is the Babel configuration:

"presets" : ["es2015", "react"]

javascript c# .net reactjs razor-pages

share|improve this question

edited Mar 8 at 1:28

Austin Wrenn

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

<script src="@Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
 ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));

 jQuery(window).on("load scroll", function () 
 'use strict'; // Start of use strict
 // Loader
 $("#dvLoading").fadeOut("fast");
 );
</script>

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
entry: 
 nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
,
output: 
 path: __dirname + '/wwwroot/js/',
 publicPath: '/wwwroot/js/',
 filename: '[name].bundle.js'
,
module: 
 preLoaders: [
 ],
 loaders: [
 
 test: /.css$/,
 loader: "style-loader!css-loader"
 ,
 test: /.tsx?$/, loaders: ['babel', 'ts'] ,
 test: /.json$ /, loader: "json-loader" ,
 
 test: /.jsx?$/,
 exclude: /node_modules/,
 loader: "babel",
 query:
 
 presets: ['react']
 
 
 ],
 externals: 
 "moment": "moment",
 ,
,
devtool: 'source-map',
target: 'web',
plugins: [
 new CleanWebpackPlugin(['./wwwroot/js/*.js'], 
 root: __dirname,
 verbose: true,
 dry: false
 ),
 new webpack.DefinePlugin(
 'process.env': 
 NODE_ENV: JSON.stringify('production')
 
 ),
 new webpack.optimize.UglifyJsPlugin()
],
resolve: 
 extensions: ['', '.jsx', '.js', '.tsx', '.ts']
,
node: 
 fs: "empty",
 child_process: "empty"

"presets" : ["es2015", "react"]

share|improve this question

edited Mar 8 at 1:28

Austin Wrenn

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

share|improve this question

edited Mar 8 at 1:28

Austin Wrenn

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516

asked Mar 7 at 22:39

Austin WrennAustin Wrenn

11516