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

[kickbk]

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]?(webpack/webpack#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.

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

[kickbk]

OK, I can see now. You added mocks in a resolve inside the webpack config. Awesome. I would only recommend adding a short note about this in the description. All good now.