Meteor does not work with Ionic React 4 (or 5)

help
1

Hi folks,

I was trying earlier in 2019 to get Ionic 4 working with Meteor and ran into a roadblock.

The original issue I had is at the end of this message.

I’m wondering if anyone was able to figure out how to use Ionic React + Meteor ?

2

hi, I am from https://github.com/meteor/meteor/issues/10890
For question 1, this is how I solved it. copy meteor plugin typescript to local, change package name to ‘gland:static-assets’, and replace plugin.js with this code, It mainly comes from ‘babel-compiler’.

Plugin.registerCompiler(
  {
    extensions: ['svg'],
  },
  function() {
    return new TypeScriptCompiler({
      react: true,
    });
  },
);

class TypeScriptCompiler extends BabelCompiler {
  processFilesForTarget(inputFiles) {
    return super.processFilesForTarget(inputFiles.filter(file => true));
  }

  processOneFileForTarget(inputFile, source) {
    this._babelrcCache = this._babelrcCache || Object.create(null);

    if (typeof source !== 'string') {
      source = inputFile.getContentsAsString();
    }

    var packageName = inputFile.getPackageName();
    var inputFilePath = inputFile.getPathInPackage();
    var outputFilePath = inputFilePath;
    var fileOptions = inputFile.getFileOptions();
    var toBeAdded = {
      sourcePath: inputFilePath,
      path: outputFilePath,
      data: source,
      hash: inputFile.getSourceHash(),
      sourceMap: null,
      bare: !!fileOptions.bare,
    };

    if (fileOptions.transpile !== false && !toBeAdded.bare) {
      const features = { ...this.extraFeatures };
      const arch = inputFile.getArch();

      if (arch.startsWith('os.')) {
        features.nodeMajorVersion = parseInt(process.versions.node, 10);
      } else if (arch === 'web.browser') {
        features.modernBrowsers = true;
      }

      if (!features.hasOwnProperty('jscript')) {
        features.jscript = true;
      }

      if (shouldCompileModulesOnly(inputFilePath)) {
        features.compileModulesOnly = true;
      }

      const cacheOptions = {
        cacheDirectory: this.cacheDirectory,
        cacheDeps: {
          sourceHash: toBeAdded.hash,
        },
      };

      this.inferTypeScriptConfig(features, inputFile, cacheOptions.cacheDeps);

      var babelOptions = Babel.getDefaultOptions(features);
      babelOptions.caller = { name: 'meteor', arch };

      this.inferExtraBabelOptions(inputFile, babelOptions, cacheOptions.cacheDeps);

      babelOptions.sourceMaps = true;
      babelOptions.filename = babelOptions.sourceFileName = packageName ? 'packages/' + packageName + '/' + inputFilePath : inputFilePath;
      let result;
      inputFile.addAsset({
        data: inputFile.getContentsAsBuffer(),
        path: `${inputFilePath}`,
      });
      try {
        result = {
          code: `module.exportDefault('/${inputFilePath}')`,
        };
      } catch (e) {
        if (e.loc) {
          inputFile.error({
            message: e.message,
            line: e.loc.line,
            column: e.loc.column,
          });
        } else {
          inputFile.error(e);
        }

        return null;
      }

      toBeAdded.data = result.code;
      //toBeAdded.hash = result.hash;

      //result.map.file = babelOptions.filename + '.map';

      //toBeAdded.sourceMap = result.map
    }
    return toBeAdded;
  }
}

function shouldCompileModulesOnly(path) {
  const parts = path.split('/');
  const nmi = parts.lastIndexOf('node_modules');
  if (nmi >= 0) {
    const part1 = parts[nmi + 1];
    // We trust that any code related to @babel/runtime has already been
    // compiled adequately. The @babel/runtime/helpers/typeof module is a
    // good example of why double-compilation is risky for these packages,
    // since it uses native typeof syntax to implement its polyfill for
    // Symbol-aware typeof, so compiling it again would cause the
    // generated code to try to require itself. In general, compiling code
    // more than once with Babel should be safe (just unnecessary), except
    // for code that Babel itself relies upon at runtime. Finally, if this
    // hard-coded list of package names proves to be incomplete, we can
    // always add to it (or even replace it completely) by releasing a new
    // version of the babel-compiler package.
    if (part1 === '@babel' || part1 === 'core-js' || part1 === 'regenerator-runtime') {
      return true;
    }
  }

  return false;
}

add this package name to .meteor/packages.

3

for problem 2, refer https://guide.meteor.com/using-npm-packages.html#recompile
problem 3, You may need to import these files manually.

Through this method, even if it succeeds, I don’t think it means much
I hope there is a better way, like ‘webpack’

4

@hexsprite, Hope to help you.

1 Like