React-diagrams: Build issue with react diagrams

[ramspassion]

I am using react-scripts@next and storm-react-diagrams-^5.1.1 to build my app.
npm run build giving below error.
But interestingly when I do npm start, i dont see this error and application getting started without any issues/errors.

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '_' in 'C:\sourcecode\myapp\node_modules\storm-react-diagrams\dist'

[yim0331]

I also have the same Issue after I update babel version 7.0.

[ramspassion]

Are you using react-scripts ? If yes, please let me know the version.
I had issue with react-scripts@next version, while build and I am able to build [email protected] version with out any issues

[yim0331]

@ramspassion Thank you for sharing your experience. I use react-scripts @1.1.5 version. I tried [email protected] version but still, have the same problem.

This is all of my dependence list:
"dependencies": {
"chart.js": "^1.1.1",
"classnames": "^2.2.6",
"flux": "^3.1.3",
"immutable": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"file-loader": "2.0.0",
"react-web": "1.1.3",
"react-chartjs": "^1.2.0",
"react-scripts": "^1.1.5",
"underscore": "^1.7.0",
"babel-loader": "^8.0.2",
"@babel/core": "^7.0.0",
"@babel/cli": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-typescript": "^7.0.0"
},
"devDependencies": {
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
"@babel/plugin-syntax-flow": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.0.0",
"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/plugin-transform-regenerator": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/plugin-syntax-async-generators": "7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"react-leaflet-popup": "^4.0.3",
"react-redux-leaflet": "^0.11.1",
"storm-react-diagrams": "^5.2.1",
"webpack": "^4.17.2",
"webpack-cli": "3.1.0",
"webpack-dev-server": "^3.1.7",
"style-loader": "^0.23.0",
"css-loader": "^1.0.0",
"@types/node": "^10.9.4",
"dagre": "^0.8.2"
}

and webpack.config.js is

module: {
rules: [

            {
                test: /\.js$/,
                use:[
                    {   
                        loader: 'babel-loader',
                        options:{
                            presets: ['@babel/preset-react','@babel/preset-env', '@babel/preset-typescript', "@babel/preset-flow"],
                            plugins: [
                                "@babel/plugin-syntax-async-generators",
                                "@babel/plugin-syntax-flow",
                                "@babel/plugin-syntax-jsx",
                                "@babel/plugin-syntax-object-rest-spread",                                    
                                "@babel/plugin-transform-flow-strip-types",
                                "@babel/plugin-proposal-object-rest-spread",
                                "@babel/plugin-transform-react-jsx",
                                "@babel/plugin-transform-regenerator",                                    
                                "@babel/plugin-syntax-dynamic-import",
                                "@babel/plugin-syntax-import-meta"                     
                            ]
                        }
                    },

                ],
                exclude: [
                    path.resolve(__dirname, '/node_modules/')
                ],


            },
            {
                test: /\.css$/,
                use:[
                    {loader: 'style-loader'},
                    {loader: 'css-loader' }
                ]
            }

    ],

}

[ramspassion]

Thanks for sharing package.json. It seems your using both react-scripts and webpack together. Could you please remove react-scripts and build with webpack.

[yim0331]

After removing the react-scripts, the problem still occurs.

[yim0331]

I found a conflict between Babel-flow (@babel/plugin-transform-flow-strip-types or @babel/preset-flow).
If I use flow, storm-react-diagrams shows an error that:

Module not found: Error: Can't resolve '_' in ~/node_modules/storm-react-diagrams/dist'

In my searching, the only suspectible code in storm-react-diagrams is "import * as _ from lodash"
However, with Babel-flow, other modules or my code that include "import * as _ from lodash" are working properly.

Do you have any idea what would be the problem of importing '_' from lodash in Strom-react-diagrams with Babel-flow?

[gj1118]

I am facing the same issue. Is there any update on this? I am using create-react-app and have NOT done an eject yet. Following is my package.json

{
  "name": "mytestapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@atlaskit/css-reset": "^3.0.2",
    "@material-ui/core": "^3.1.2",
    "@material-ui/icons": "^3.0.1",
    "react": "^16.5.2",
    "react-beautiful-dnd": "^9.0.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.3",
    "storm-react-diagrams": "^5.2.1",
    "styled-components": "^3.4.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[timrbula]

I forked the project and changed webpack.config.js

lodash: {
     commonjs: "lodash",
     commonjs2: "lodash",
-    amd: "_",
-    root: "_"
+    amd: "lodash",
+    root: "lodash"
            }

My app now builds with a webpack config that is based on CRA. All of the functionality seems to still work as well. Anyone have an idea why this is the case? I don't have time to look more into it at the moment.

[nhunzaker]

It's not great, but I was able to resolve this issue by adding this alias to my webpack config:

  resolve: {
    alias: {
      _: 'lodash'
    }
  }

[dylanvorster]

This should be fixed in both 5.3 as well as in 6.0