node.js:17 未捕获的错误：找不到模块“。”

Question

我在使用 webpacker 的 rails 应用程序。

我有一个入口文件，开头如下：

import grapesjs from 'grapesjs';

import loadBlocks from './../../../node_modules/grapesjs-mjml/src/blocks';
import loadComponents from './../../../node_modules/grapesjs-mjml/src/components';
import loadCommands from './../../../node_modules/grapesjs-mjml/src/commands';
import loadButtons from './../../../node_modules/grapesjs-mjml/src/buttons';
import loadStyle from './../../../node_modules/grapesjs-mjml/src/style';

export default grapesjs.plugins.add('grapesJSMJML', (editor, opts = {}) => {
...

我将 MJML 与 yarn 以及 grapesjs-mjml 安装到应用程序的 nodes_modules 文件夹中。

我不断收到 Uncaught Error: Cannot find module "." 由grapesjs-mjml 模块中的import mjml2html from 'mjml' 引起。

我尝试了我能想到的一切。包括一堆 babel 插件。

我正在使用所有grapesjs-mjml 开发依赖项。这是我的 package.json：

{
  "name": "my-app",
  "private": true,
  "dependencies": {
    "mjml": "^4.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.5.5",
    "@rails/webpacker": "3.5",
    "babel-loader": "^8.0.6",
    "caniuse-lite": "1.0.30000697",
    "coffeescript": "1.12.7",
    "grapesjs": "^0.14.52",
    "grapesjs-mjml": "^0.1.10",
    "grapesjs-navbar": "^0.1.5",
    "grapesjs-preset-webpage": "^0.1.10",
    "prop-types": "^15.6.0",
    "webpack": "^3.4.1",
    "webpack-dev-server": "2.11.2",
    "webpack-merge": "^4.1.1"
  }
}

我的rails开发webpack配置如下：

const environment = require('./environment')
const merge = require('webpack-merge');

module.exports = merge({
    module: {
        rules: [
            {
                test: /\.m?js$/,
                enforce: 'pre',
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-syntax-dynamic-import"],
                        ["@babel/plugin-proposal-object-rest-spread"],
                        ["@babel/plugin-proposal-class-properties"]
                    ]
                }
            },
        ]
    },
    externals: {
        'grapesjs': 'grapesjs',
        'jquery': 'jQuery'
    },
}, environment.toWebpackConfig());

我收到 webpac-server 报告的警告，但我认为这无关：

WARNING in ./node_modules/mjml-core/lib/helpers/mjmlconfig.js
89:9-80 Critical dependency: the request of a dependency is an expression
    at RequireResolveContextDependency.getWarnings (me/node_modules/webpack/lib/dependencies/ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (me/node_modules/webpack/lib/Compilation.js:702:24)
    at Compilation.finish (me/node_modules/webpack/lib/Compilation.js:565:9)
    at applyPluginsParallel.err (me/node_modules/webpack/lib/Compiler.js:502:17)
    at me/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (me/node_modules/webpack/lib/Compilation.js:511:11)
    at processModuleDependencies.err (me/node_modules/webpack/lib/Compilation.js:481:14)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./node_modules/mjml-core/lib/helpers/mjmlconfig.js
 @ ./node_modules/mjml-core/lib/index.js
 @ ./node_modules/mjml/lib/index.js
 @ ./node_modules/grapesjs-mjml/src/command-export-mjml.js
 @ ./node_modules/grapesjs-mjml/src/commands.js
 @ ./app/javascript/packs/grapesJSMJML.js
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/grapesJSMJML.js
webpack: Compiled with warnings.

有人知道我应该怎么做吗？

Answer 1

尝试像这样导入“grapesjs-mjml/src/blocks”。

import loadBlocks from 'grapesjs-mjml/src/blocks';
import loadComponents from 'grapesjs-mjml/src/components';
import loadCommands from 'grapesjs-mjml/src/commands';
import loadButtons from 'grapesjs-mjml/src/buttons';
import loadStyle from 'grapesjs-mjml/src/style';

Answer 2

在我的情况下（每种情况都不同），通过在 webpack 配置中的 resolve 中添加 mocks 解决了这个问题。