Eric Felix Eric Felix - 3 months ago 8
React JSX Question

Why does my bundled file not include all jsx files?

I am trying to implement reactJS with my existing asp.net application, I do not want my node_modules folder to be inside my solution.

I am new to node.js and npm so I might be doing something weird here.

I am trying to separate my node_modules, package.json, and wbpack.config.js file out from my jsx files and my entry file.

When I run webpack I do not get any errors, but the resulting js file is just an import statement.

I am using Babel and WebPack.

Is this a scope issue that my import statement can't find my StoryBox Class?



.
+-- rebate_mapper
| +-- node_modules
| +-- package.json
| +-- webpack.config.js
+-- smasolutions.com
| +-- admin
| | +-- rebate
| | | +-- App
| | | | +-- index.jsx
| | | +-- bundle.js
| | | +-- default.aspx
| | | +-- main.js





webpack.config.js



var path = require('path');
var webpack = require('webpack')

module.exports = {
context: path.join(__dirname, './../smasolutions.com/admin/rebate'),
entry: path.join(__dirname, './../smasolutions.com/admin/rebate/main.js'),
output: {
path: '../smasolutions.com/admin/rebate/',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx?$/,
include: path.join(__dirname, './../smasolutions.com/admin/rebate/app'),
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
},


};







import StoryBox from './index.jsx';







/******/
(function(modules) { // webpackBootstrap
/******/ // The module cache
/******/
var installedModules = {};

/******/ // The require function
/******/
function __webpack_require__(moduleId) {

/******/ // Check if module is in cache
/******/
if (installedModules[moduleId])
/******/
return installedModules[moduleId].exports;

/******/ // Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
exports: {},
/******/
id: moduleId,
/******/
loaded: false
/******/
};

/******/ // Execute the module function
/******/
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ // Flag the module as loaded
/******/
module.loaded = true;

/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}


/******/ // expose the modules object (__webpack_modules__)
/******/
__webpack_require__.m = modules;

/******/ // expose the module cache
/******/
__webpack_require__.c = installedModules;

/******/ // __webpack_public_path__
/******/
__webpack_require__.p = "";

/******/ // Load entry module and return exports
/******/
return __webpack_require__(0);
/******/
})
/************************************************************************/
/******/
([
/* 0 */
/***/
function(module, exports) {

import StoryBox from './index.jsx';



/***/
}
/******/
]);





Updated Webpack.config.js



module: {
loaders: [
{
test: /.jsx?$/,
include: path.join(__dirname,'./../smasolutions.com/admin/rebate'),

loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-react')
]
}
}
]
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')

},

};





Using
require.resolve()
solved the issue of babel not finding the presets.

Answer

You have configured your entry file

entry: path.join(__dirname, './../smasolutions.com/admin/rebate/main.js'),

which is great, but you have ES6 in there, and your babel-loader config only applies to the /app folder:

include: path.join(__dirname, './../smasolutions.com/admin/rebate/app'),

which means the ES6 inside main.js will not be processed. You probably want

include: path.join(__dirname, './../smasolutions.com/admin/rebate'),
Comments