Question

我正在尝试在生产环境中编译the following module，但失败了。

我遵循webpack.config.js和

中的指南

在开发中，一切正常。当我投入生产时，我得到了grapesjs-mjml-15f49f538bf623ba80f5.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null的编译函数。这是一个缩小的文件，因此我无法调试，但是错误发生在这里：getTemplateFromEl:function(t){return t.firstChild.innerHTML} 在原始模块中，它位于index.js中的以下函数中：

getTemplateFromEl(sandboxEl) {
  return sandboxEl.firstChild.innerHTML;
},

我正在使用Rails 5.2和您将在以下package.json中看到的其余已安装模块：

{
    "name": "app",
    "private": true,
    "dependencies": {
        "mjml": "^4.4.1"
    },
    "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@rails/webpacker": "^4.0.7",
        "babel-loader": "^8.0.6",
        "caniuse-lite": "1.0.30000697",
        "coffeescript": "1.12.7",
        "eslint": "^6.1.0",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "grapesjs": "^0.14.52",
        "grapesjs-mjml": "^0.1.10",
        "grapesjs-navbar": "^0.1.5",
        "grapesjs-preset-webpage": "^0.1.10",
        "html-webpack-plugin": "^3.2.0",
        "mermaid": "^8.2.3",
        "node-sass": "^4.12.0",
        "prop-types": "^15.6.0",
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.7.2",
        "webpack-merge": "^4.1.1",
        "webpack-node-externals": "^1.7.2"
    }
}

和我的webpack production.js配置文件：

process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const TerserPlugin = require('terser-webpack-plugin')
const environment = require('./environment')
const path = require('path');
let plugins = [];
const merge = require('webpack-merge');
module.exports = merge({
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                },
            },
        ]
    },
    resolve: {
        alias: {
            'fs': path.resolve('node_modules/grapesjs-mjml/mocks/fs'),
            'uglify-js': path.resolve('node_modules/grapesjs-mjml/mocks/uglify-js'),
        }
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    keep_fnames: true
                },
            }),
        ],
    },
    target: 'web',
    plugins: plugins,
    externals: {
        'grapesjs': 'grapesjs',
        'jquery': 'jQuery',
    },
}, environment.toWebpackConfig());

它正在合并environment.js，如下所示：

const { environment } = require('@rails/webpacker')
module.exports = environment

有人知道发生了什么吗？我该如何调试？我错过了什么吗？

我觉得这与通天塔有关，但是我不知道如何找出答案。

Webpack生产失败，开发失败

0 个答案: