import mjml2html from 'mjml' - Uncaught Error: Cannot find module "."

UPDATE I tried to simply `import mjml2html from 'mjml'` inside an entry file and I still get the same error, which lead me to believe the issue is with MJML. So I did some search and found this issue. I think you guys must have found a workaround or you would not be able to make this work. Could you please share your solution?

Hi guys, I'm upgrading grapesjs-mjml to v.4 with MJML v.4 as well. Exciting. I'm on a rails app with webpacker.

I have an entry file that starts as follows:

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 = {}) => {
...

As you can see, I installed MJML with yarn, as well as grapesjs-mjml into the app's nodes_modules folder.

I keep getting Uncaught Error: Cannot find module "." caused by import mjml2html from 'mjml' inside command-export-mjml.js. I believe it [may have something to do with typescript]?(https://github.com/webpack/webpack/issues/4921).

I tried everything I could think of. Including a bunch of babel plugins.

I am using all of grapesjs-mjml dev dependencies. Here's my 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"
  }
}

My development webpack config is as follows:

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());

I do get a warning reported by the webpac-server, but I don't think it's related:

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.

Screen Shot 2019-08-21 at 1 14 04 AM

I also have no idea how to fix this error, but it's just a warning.

Are you guys having similar issues? @art, do you have any warning or issues when you run your webpacker server? If so, how do you solve them?

Cheers

GrapesJS / mjml

import mjml2html from 'mjml' - Uncaught Error: Cannot find module "." #117