search

bpmn-io / bpmn-js

A BPMN 2.0 rendering toolkit and web modeler.
https://bpmn.io/toolkit/bpmn-js/
Other
8.62k stars 1.33k forks source link

Unable to build production bundle with bpmn-js 10.3.0 RuntimeTemplate.importStatement() min-dash #1778

Closed berghall closed 1 year ago

berghall commented 1 year ago

Describe the Bug I'm updating from bpmn-js 8.2.2 to bpmn-js 10.3.0, but when I'm trying to build a production bundle with the command: webpack --mode=production --progress --color --config webpack.config.js it fails to this error: Project directory omitted

RuntimeTemplate.importStatement(): Module javascript/esm|node_modules\min-dash\dist\index.esm.js has no id assigned.
This should not happen.
It's in these chunks: none (If module is in no chunk this indicates a bug in some chunk/module optimization logic)

webpack.config.js Sensitive app entries omitted, replaced with app1 and app2 to simulate multiple entries

const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const config = {
    entry: {
        app1: "./Scripts/app/app1/index.tsx",
        app2: "./Scripts/app/app2/index.tsx"
    },
    output: {
        path: path.join(__dirname + "/Scripts/dist/"),
        filename: "[name].bundle.js",
        chunkFilename: "chunk.[name].js",
        clean: true
    },
    resolve: {
        modules: ["node_modules"],
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        plugins: [new TsconfigPathsPlugin()],
        fallback: {
            // BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
            // These are all needed by yaml-js used by swagger-editor, for now we don't include polyfills as these are probably not needed. 
            // If the polyfills are needed install the following packages: path-browserify, util and buffer and uncomment lines below
            path: false, // require.resolve("path-browserify"),
            util: false, // require.resolve("util"),
            buffer: false // require.resolve("buffer")
        }
    },
    devtool: "source-map", // Most accurate source-map, also slowest
    target: "web", // Compile for usage in a browser-like environment (default)
    module: {
        rules: [
            {
                test: /\.ts$|\.tsx$/,
                exclude: path.resolve(__dirname, "node_modules"),
                use: [
                    {
                        loader: "thread-loader",
                        options: {
                            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
                            workers: require("os").cpus().length - 1,
                            silent: true
                        },
                    },
                    { loader: "ts-loader", options: { configFile: "tsconfig.app.json", silent: true, happyPackMode: true } }
                ]
            },
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            },
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, "node_modules"),
                use: ["source-map-loader"],
                enforce: "pre",
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset',
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                ]
            },
            // {
            //     test: /\.less$/,
            //     use: [
            //         MiniCssExtractPlugin.loader,
            //         "css-loader",
            //         "less-loader"
            //     ]
            // },
        ]
    },
    optimization: {
        minimize: true,
        splitChunks: {
            cacheGroups: {
                common: { // this bundles all common libraries to one common.js file
                    name: "common",
                    filename: "[name].bundle.js",
                    test: /[\\/]node_modules[\\/]/
                },
                styles: { // this bundles all styles into one css file.
                    name: "styles",
                    type: "css/mini-extract",
                    chunks: "all",
                    enforce: true,
                }
            }
        }
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fi/),
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                diagnosticOptions: {
                    semantic: true,
                    syntactic: true,
                }
            }
        }),
        new BundleAnalyzerPlugin({
            // use value from environment var STATS or 'disabled'
            analyzerMode: process.env.STATS || 'disabled',
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        new MonacoWebpackPlugin({
            languages: ["handlebars", "html", "csharp", "xml", "sql", "yaml", "json"],
            globalAPI: true
        })
    ]
};

module.exports = config;

package.json Sensitive content omitted

{
  "scripts": {
    "test": "karma start karma.config.js --single-run=true",
    "dev-test": "karma start karma.config.js",
    "dev-test-chrome": "karma start karma.config.js --browsers=Chrome",
    "dev-server": "webpack serve --hot --mode development --progress --config webpack.dev.config.js",
    "dev-server-debug": "webpack serve --hot --mode development --progress --config webpack.dev.config.js --env debug",
    "dev-common": "webpack --progress --mode development --color --config  webpack.dev-common.config.js",
    "build": "webpack --mode=production --progress --color --config webpack.config.js",
    "start": "npm run generateLocalizations && npm run dev-server",
    "start-debug": "npm run generateLocalizations && npm run dev-server-debug",
    "deploy": "npm run generateLocalizations && npm run build && npm run test",
    "stats": "set STATS=server&&npm run build",
    "generateLocalizations": "node .\\generateLocalizations.js",
    "lint": "eslint --ext .ts,.tsx Scripts/app --ignore-pattern /Scripts/app/tests/ --color"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.15.8",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/chai": "^4.3.0",
    "@types/cheerio": "^0.22.30",
    "@types/clipboard": "^1.5.34",
    "@types/deep-diff": "^1.0.0",
    "@types/downloadjs": "^1.4.3",
    "@types/fetch-mock": "7.3.1",
    "@types/history": "^4.6.0",
    "@types/inherits": "^0.0.30",
    "@types/js-yaml": "^4.0.0",
    "@types/json-bigint": "^1.0.0",
    "@types/karma": "6.3.3",
    "@types/lodash": "^4.14.176",
    "@types/mocha": "^9.1.0",
    "@types/moment-duration-format": "^2.2.2",
    "@types/node": "^12.12.5",
    "@types/prop-types": "^15.7.3",
    "@types/qs": "^6.5.0",
    "@types/react": "18.0.21",
    "@types/react-datepicker": "1.1.7",
    "@types/react-dom": "^18.0.6",
    "@types/react-grid-layout": "^1.3.2",
    "@types/react-highlighter": "^0.3.4",
    "@types/react-modal": "^3.13.1",
    "@types/react-router": "^5.1.19",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-sparklines": "^1.7.2",
    "@types/react-tabs": "^2.3.4",
    "@types/react-virtualized": "^9.21.20",
    "@types/redux-mock-store": "^1.0.1",
    "@types/resize-observer-browser": "^0.1.6",
    "@types/semver": "^7.1.0",
    "@types/styled-components": "^5.1.24",
    "@types/styled-theming": "^2.2.5",
    "@types/swagger-schema-official": "^2.0.22",
    "@types/url-join": "^4.0.0",
    "@types/validator": "^6.2.3",
    "@types/webpack-env": "1.16.3",
    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",
    "@welldone-software/why-did-you-render": "^6.2.1",
    "babel-loader": "8.2.3",
    "babel-plugin-recharts": "^2.0.0",
    "babel-plugin-styled-components": "^2.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "chai": "^4.3.6",
    "chai-things": "^0.2.0",
    "cheerio": "^1.0.0-rc.10",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.5.0",
    "eslint": "^8.1.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "expose-loader": "^3.1.0",
    "fetch-mock": "9.11.0",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "6.4.0",
    "karma": "6.3.17",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "3.1.1",
    "karma-mocha": "2.0.1",
    "karma-mocha-reporter": "2.2.5",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-webpack": "5.0.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.4.3",
    "mocha": "9.2.2",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "process": "^0.11.10",
    "react-refresh": "^0.14.0",
    "react-refresh-typescript": "^2.0.5",
    "react-test-renderer": "16.14.0",
    "redux-mock-store": "^1.3.0",
    "sinon": "^11.1.2",
    "source-map-loader": "3.0.0",
    "speed-measure-webpack-plugin": "^1.2.2",
    "style-loader": "^3.3.1",
    "thread-loader": "3.0.4",
    "ts-loader": "9.3.1",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
    "type-fest": "^2.13.1",
    "typescript": "4.4.4",
    "url-loader": "^4.1.1",
    "webpack": "5.73.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.9.2",
    "webpack-notifier": "1.15.0"
  },
  "dependencies": {
    "@kunukn/react-collapse": "^2.2.9",
    "@monaco-editor/react": "^4.4.6",
    "@tanstack/react-table": "^8.5.11",
    "bpmn-js": "10.3.0",
    "bpmn-js-cli": "2.2.1",
    "bpmn-js-differ": "^2.0.2",
    "classnames": "^2.2.5",
    "clipboard": "^1.7.1",
    "connected-react-router": "^6.2.1",
    "deep-diff": "^1.0.2",
    "diagram-js": "10.0.0",
    "diagram-js-minimap": "^3.0.0",
    "diagram-js-origin": "1.3.4",
    "downloadjs": "^1.4.7",
    "es6-shim": "^0.35.3",
    "history": "^4.10.1",
    "humanize-string": "^3.0.0",
    "immutability-helper": "2.7.1",
    "jquery": "^3.6.0",
    "js-yaml": "3.8.1",
    "json-bigint": "^0.3.0",
    "lodash": "^4.17.5",
    "moment": "2.18.1",
    "moment-duration-format": "^2.3.2",
    "monaco-editor": "^0.34.0",
    "qs": "^6.5.1",
    "rc-progress": "^3.3.3",
    "react": "18.2.0",
    "react-accessible-accordion": "^4.0.0",
    "react-datepicker": "1.6.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
    "react-grid-layout": "^1.3.4",
    "react-highlighter": "^0.4.3",
    "react-loading-skeleton": "^3.1.0",
    "react-markdown": "^7.0.1",
    "react-modal": "^3.14.4",
    "react-paginate": "^8.1.3",
    "react-redux": "^8.0.4",
    "react-router-dom": "^5.3.4",
    "react-select": "5.2.2",
    "react-sortable-hoc": "^0.8.4",
    "react-sparklines": "^1.7.0",
    "react-split-pane": "^0.1.92",
    "react-switch": "^5.0.1",
    "react-tabs": "^4.2.0",
    "react-tiny-popover": "^7.0.1",
    "react-toastify": "^8.0.3",
    "react-virtualized": "^9.21.1",
    "recharts": "^2.1.9",
    "redux": "^4.0.1",
    "redux-thunk": "^2.4.1",
    "remark-gfm": "^3.0.1",
    "reselect": "^3.0.1",
    "semver": "^5.5.1",
    "signalr": "^2.4.2",
    "styled-components": "^5.3.3",
    "styled-theming": "^2.2.0",
    "swagger-editor": "^4.4.3",
    "swagger-schema-official": "^2.0.0-bab6bed",
    "tslib": "^2.4.0",
    "url-join": "^4.0.1",
    "url-pattern": "^1.0.3",
    "use-font-face-observer": "^1.2.1",
    "validator": "^8.2.0",
    "whatwg-fetch": "^2.0.3"
  },
  "packageManager": "yarn@3.1.0",
  "resolutions": {
    "styled-components": "^5"
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "importHelpers": true,
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "sourceMap": true,
    "baseUrl": "Scripts/app",
    "paths": {
      "@styled": [
        "shared/styledComponents"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

In development mode it works. The production build works with optimization.concatenateModules set to false in the webpack config, but that breaks some of the app pages in runtime and removes default optimization which is bad.

Steps to Reproduce

Create React + webpack project with the webpack.config.js config and run webpack --mode=production --progress --color --config webpack.config.js

Expected Behavior Expected production bundle to build successfully

Environment

cc @nickeeex

nikku commented 1 year ago

Did reading through our CHANGELOG yield any meaningful results? If not, please share a code-sandbox or example project that allows us to reproduce the issue.

berghall commented 1 year ago

Unfortunately I can't give you the project which this is happening in and I couldn't reproduce it with a minimal repro. I got it however to build if I remove the sideEffects: false, property from min-dash package.json, so that sideEffects would default to true. Could there be some side effects min-dash is leaving out?

nikku commented 1 year ago

We'll double-check min-dash to see if it leaks side-effects. Thanks for drilling down into this one further!

nikku commented 1 year ago

Unfortunately I could not find how min-dash would leak side-effects.

What could be interesting is upgrading step-by-step and see when it starts to fail.

berghall commented 1 year ago

Okay, that's unfortunate. I'll upgrade version-by-version until it breaks in the coming days. Thanks for looking into it.

berghall commented 1 year ago

So, bpmn-js@10.0.0 with diagram-js@8.9.0 builds fine, but bpmn-js@10.1.0 with diagram-js@9.1.0 throws the same error. Here is tag comparison for bpmn-js https://github.com/bpmn-io/bpmn-js/compare/v10.0.0...v10.1.0, tag comparison for diagram-js https://github.com/bpmn-io/diagram-js/compare/v8.9.0...v9.1.0 and for min-dash https://github.com/bpmn-io/min-dash/compare/v3.5.2...v4.0.0.

The error says that something is wrong with chunk/module logic, so that change in min-dash to rollup.config.js is ringing some kind of bell.

nikku commented 1 year ago

Thanks for further root causing.

Indeed with diagram-js@9.x we moved to ES2018 as a library target. Same for min-dash which we also turned into a module (https://github.com/bpmn-io/min-dash/compare/v3.8.1...v4.0.0).

May that be the offender? You could override min-dash (move back to 3.8.1). API / interface is the same.

For the record a similar issue has previously been reported to webpack (https://github.com/webpack/webpack/issues/12114), but fixed late 2020.