Module not found with webpack and react

[popjxc]

Version(if relevant): 6.0.4

Environment(if relevant):

Code(if relevant):

npm i schema-based-json-editor
./node_modules/.bin/webpack

my webpack config ,

var json = require('./package.json')
module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        index: path.resolve(__dirname, "app/index.js"),
        vendor: Object.keys(json.dependencies)
    },
    output: {
        path: path.resolve(__dirname, './static/dist/js'),
        filename: '[name].[chunkhash:8].js',
        publicPath: '/static/dist/js'
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules|bower_components)/,
                test: /\.jsx?$/,
                loader: 'babel-loader',
                query: { presets: ['env', 'react', 'stage-2'] }
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    },
    plugins:.......

Expected:

build success

Actual:

[599] multi axios core-js es6-promise react react-bootstrap react-dom react-redux react-router-bootstrap react-router-dom redux redux-thunk schema-based-json-editor 160 bytes {0} [built]

• 753 hidden modules

ERROR in multi axios core-js es6-promise react react-bootstrap react-dom react-redux react-router-bootstrap react-router-dom redux redux-thunk schema-based-json-editor Module not found: Error: Can't resolve 'schema-based-json-editor' in '/Users/xincai/git/toilet-device-app/web' @ multi axios core-js es6-promise react react-bootstrap react-dom react-redux react-router-bootstrap react-router-dom redux redux-thunk schema-based-json-editor

[plantain-00]

How did you import the library? There is a document about the usage: https://github.com/plantain-00/schema-based-json-editor#reactjs-component-demo , anything different?

[popjxc]

I have not import it yet... First my project build ok, after install this module, build fail.

I use CommonsChunkPlugin in webpack, maybe problem is here.

new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor', 'manifest'],
            filename: '[name].[chunkhash:8].js'
        })

[plantain-00]

It is just a library, if it is not imported or required, it cannot effect your code. It seems something in your code or dependencies checks all node_modules's package.json's main, I will remove main later.

[plantain-00]

You can try v6.0.5

[popjxc]

Update to 6.0.5, but problem still exist. I add a demo: package.json

{
  "name": "tmp",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.1.1",
    "schema-based-json-editor": "^6.0.5"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "webpack": "^3.8.1"
  }
}

webpack.config.js

// webpack.config.js

var webpack = require('webpack');
var path = require('path')
var definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || (process.argv.indexOf('-p') === -1)))
});

var json = require('./package.json')

module.exports = {
    entry: {
        index: path.resolve(__dirname, "index.js"),
        vendor: Object.keys(json.dependencies)
    },
    output: {
        path: path.resolve(__dirname, './static/'),
        filename: '[name].[chunkhash:8].js',
        publicPath: '/static/'
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules|bower_components)/,
                test: /\.jsx?$/,
                loader: 'babel-loader',
                query: { presets: [] }
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    },
    plugins: [
        definePlugin,
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor', 'manifest'],
            filename: '[name].[chunkhash:8].js'
        })
    ]
};

index.js

console.log("a")

you can run the following commands to reproduce:

npm init
./node_modules/.bin/webpack  --progress --color --watch --display-error-details

[plantain-00]

The problem is:

vendor: Object.keys(json.dependencies)

it is same with a vendor.js with:

import "react";
import "schema-based-json-editor";

but this library has multiple entries, and should be used like:

import "react";
import "schema-based-json-editor/react";

[popjxc]

ahh, got it. Maybe separated it into several plugins is much better, anyway it's a wonderful project.

Some other small problems ,

1. if enum is a empty array in schema, the dropdown select will print some react warning logs in console.
2. when enum is not empty, also one warning:

   
   warning.js?6327:33 Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of Select2. See https://fb.me/react-warning-keys for more information. in span (created by Select2) in Select2 (created by StringEditor) in div (created by StringEditor) in StringEditor (created by Editor) in Editor (created by ObjectEditor) in div (created by ObjectEditor) in div (created by ObjectEditor) in ObjectEditor (created by Editor

3. if a object's child is optional, and the child type is a object. Nothing happened when click "Not exist" check-box of the child.

[plantain-00]

uninstall then install v6.0.7 should fix 1, 2 and 3. I will investigate how to separate it in next few days.

[plantain-00]

v7 should fix this.