I can import MyComponent into the same package and render it on the page, but I cannot link or download the MyComponent package and import the component.
package.json:
{ "name": "my-component", "version": "1.0.0", "main": "dist/index.js", "directories": {}, "dependencies": {}, "devDependencies": { "babel-loader": "^6.2.3", "babel-preset-es2015": "", "babel-preset-react": "", "css": "^2.2.1", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "node-sass": "^3.4.2", "react": "^0.14.7", "react-dom": "^0.14.7", "sass": "^0.5.0", "sass-loader": "^3.1.2", "style": "0.0.3", "style-loader": "^0.13.0", "webpack": "^1.12.13", "webpack-dev-server": "^1.14.1" } }
webpack.config.js:
var path = require('path'); module.exports = { entry: './src/MyComponent.jsx', output: { path: './dist/', filename: './index.js' }, module: { loaders: [{ test: /\.jsx$/, include: path.resolve(__dirname), exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, include: /.scss$/, loader: 'style!css!sass' }, { test: /\.html$/, loader: "file?name=[name].[ext]", },] } };
./CSI/MyComponent.jsx
import React from 'react'; export default class MyComponent extends React.Component { constructor(props) { super(props); } render() { return ( <div>Hello World.</div> ); } } MyComponent.propTypes = { class: React.PropTypes.string } MyComponent.defaultProps = { class: '' } console.log(MyComponent)
Using the webpack dev server, I can import this component into another file and display it on the page.
When I link and / or set the webpack build results in another project, I expect that I can do the same, for example:
new app.jsx:
import React from 'react' import ReactDOM from 'react-dom' import MyComponent from 'my-component' console.log(MyComponent) ReactDOM.render(MyComponent, document.body)
When I import a module from "my-component", the console.log statement that exists in MyComponent.jsx registers the "MyComponent function (requisite) {..." as expected, but the console.log statement in the new application registers an empty object .
console output when rendering new-app.jsx: I believe that the first log is the log coming from MyComponent.jsx, and the second log is coming from my new application.
index.js:19783 MyComponent(props) { _classCallCheck(this, MyComponent); return _possibleConstructorReturn(this, Object.getPrototypeOf(MyComponent).call(this, props)); } index.js:58 Object {}
Am I losing anything in my configurations? Am I exporting / importing incorrectly?