export all babel-compiled src/modules to fix #110

[ChieveiT]

The drop-in package 'create-react-class' will trigger #110 . I tried to use wepback alias to force 'create-react-class' resolving to react-lite.createClass but found it's hard to do this if rolling up react-lite as a commonjs module. So I babel all src to lib. I don't know whether it's a good idea for the project specifications of react-lite.

[ChieveiT]

The config for webpack(2.x):

resolve: {
    alias: {
      'react': 'react-lite/lib',
      'react-dom': 'react-lite/lib',
      'create-react-class': 'react-lite/lib/createClass'
    }
}

[Lucifier129]

If add an alias to webpack configuration can resolve the problem, it's better to build a custom module named create-react-class.js

// create-react-class.js
import React from 'react' // which is react-lite actually
export default React.createClass

And the webpack.config.js will look like below:

resolve: {
    alias: {
      'react': 'react-lite',
      'react-dom': 'react-lite',
      'create-react-class': './create-react-class'
    }
}

[ChieveiT]

@Lucifier129 Cool! Works for meXD

[Bbooth4]

If someone was to use this solution, would all classes need to be replaced with es5 create-react-class?

Does this mean that es6 is not compatible?

[Lucifier129]

@Bbooth4 this solution would not cause any code change, and es6 classes is compatible.

[Bbooth4]

I tried the above method out to try to solve this issue. Important to note, I am using electron, antd and webpack 3.0.0, webpack-bundle-analyzer: 2.8.2, webpack-dev-server: 2.5.0, webpack-merge: 4.1.0.

The following error and warning resulted:

Module not found: Error: Can't resolve 'create-react-class' in '/home/user/folder/app-name/node_modules/rc-calendar/lib/date'
 @ ./node_modules/rc-calendar/lib/date/DateTBody.js 15:24-53
 @ ./node_modules/rc-calendar/lib/date/DateTable.js
 @ ./node_modules/rc-calendar/lib/range-calendar/CalendarPart.js
 @ ./node_modules/rc-calendar/lib/RangeCalendar.js
 @ ./node_modules/antd/lib/date-picker/RangePicker.js
 @ ./node_modules/antd/lib/date-picker/index.js
 @ ./app/components/modals/ProfileSetUp.js
 @ ./app/containers/modals/ProfileSetUp.js
 @ ./app/components/RootModal.js
 @ ./app/containers/RootModal.js
 @ ./app/components/Home.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js
Not rewriting GET /dist/renderer.dev.js because the path includes a dot (.) character.

Alternatively, I tried this in webpack because of the earlier error:

import createReactClass from './create-react-class';

resolve: {
   extensions: ['.js', '.jsx', '.json'],
   modules: [
     path.join(__dirname, 'app'),
     'node_modules',
   ],
   alias: {
     'react': 'react-lite',
     'react-dom': 'react-lite',
     'create-react-class': createReactClass,
   }
 },

The new error:

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve.alias should be one of these:
   object { <key>: string } | [object { alias?, name?, onlyModule? }]
   Details:
    * configuration.resolve.alias['create-react-class'] should be a string.
    * configuration.resolve.alias should be an array:
      [object { alias?, name?, onlyModule? }]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app-name@0.0.1 start-renderer-dev: `cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app-name@0.0.1 start-renderer-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[Lucifier129]

@Bbooth4

resolve: {
   extensions: ['.js', '.jsx', '.json'],
   modules: [
     path.join(__dirname, 'app'),
     'node_modules',
   ],
   alias: {
     'react': 'react-lite',
     'react-dom': 'react-lite',
     'create-react-class': './create-react-class', // here must be a path string, not an export of module
   }
 },

[Bbooth4]

If I add in the alias as a filepath, then the below error appears, breaking my antd. The error you see below appearsfor a number of calendar node_modules packages and the antd form. In the past, it has broken all of antd but the most recent instance only broke the calendar and the Form import from antd.

ERROR in ./node_modules/rc-calendar/lib/date/DateTBody.js
Module not found: Error: Can't resolve 'create-react-class' in '/home/user/folder/app/node_modules/rc-calendar/lib/date'
 @ ./node_modules/rc-calendar/lib/date/DateTBody.js 15:24-53
 @ ./node_modules/rc-calendar/lib/date/DateTable.js
 @ ./node_modules/rc-calendar/lib/range-calendar/CalendarPart.js
 @ ./node_modules/rc-calendar/lib/RangeCalendar.js
 @ ./node_modules/antd/lib/date-picker/RangePicker.js
 @ ./node_modules/antd/lib/date-picker/index.js
 @ ./app/components/modals/ProfileSetUp.js
 @ ./app/containers/modals/ProfileSetUp.js
 @ ./app/components/RootModal.js
 @ ./app/containers/RootModal.js
 @ ./app/components/Home.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js

The final error after the several 'Module not found' errors is the line below.

Not rewriting GET /dist/renderer.dev.js because the path includes a dot (.) character.

That dot (.) error is why I originally tried to import the small create-react-class file, since it only appeared when the alias had a filepath.

If I remove the 'create-react-class': './create-react-class' line in the webpack alias, then the error that started this thread originally on issue 110 appears.

Could be important to note, that I upgraded to react 15.6.0.

[Lucifier129]

@Bbooth4 try absolute file path

'create-react-class':  path.join(__dirname, './create-react-class') // use absolute file path 

[Bbooth4]

@Lucifer129 Thanks, that at least solved the breaking antd and calendar components.

However, now I am exactly where I started. Uncaught TypeError: Cannot set property 'parentContext' of undefined

[Lucifier129]

@Bbooth4 I have no idea now. Can you add a simple code example to reproduce the problem here?

[Bbooth4]

@Lucifier129 Thank you so much for your help. In the process of creating the simple code example, I it worked for the first time (first time even the simplest thing had worked) and I slowly built up my app from there. It works now but seems somewhat fragile since I am not 100% sure what solved the problem within the code that was unrelated to what was discussed here.

Thanks again and I really appreciated the time you took to answer my questions.