Unable to resolve some modules, when importing ReactPasswordStrength

help
1

On package github’s issue page I found that author suggests this issue is likely with Meteor itself, hence posting here.

As soon as Iimport ReactPasswordStrength from "react-password-strength"; i get the following error in terminal:

Unable to resolve some modules:

  "!!../node_modules/css-loader/index.js!./style.css" in /Users/ScottAgirs/workspace/app/appname/node_modules/react-password-strength/dist/index.js (web.browser.legacy)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save !!..

The app works as expected, but I’m concerned with this, also sometimes it continues in loop.

Here is my package.json:

{
  "name": "appname",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "apollo-client": "^2.3.7",
    "apollo-client-preset": "^1.0.8",
    "babel-plugin-inline-import": "^3.0.0",
    "bcrypt": "^3.0.0",
    "body-parser": "^1.18.3",
    "date-fns": "^1.29.0",
    "express": "^4.16.3",
    "faker": "^4.1.0",
    "google-map-react": "^1.0.6",
    "graphql": "^0.13.2",
    "graphql-server-express": "^1.4.0",
    "graphql-tag": "^2.9.2",
    "graphql-tools": "^3.1.1",
    "lodash": "^4.17.10",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.22.2",
    "moment-duration-format": "^2.2.2",
    "react": "^16.4.2",
    "react-apollo": "^2.1.9",
    "react-dom": "^16.4.2",
    "react-map-gl": "^3.3.4",
    "react-password-strength": "^2.3.1",
    "react-places-autocomplete": "^7.2.0",
    "react-router-dom": "^4.3.1",
    "react-stripe-elements": "^2.0.1",
    "react-toastify": "^4.3.1",
    "semantic-ui-calendar-react": "^0.8.0",
    "semantic-ui-react": "^0.82.2",
    "stripe": "^6.8.0",
    "styled-components": "^3.4.1"
  },
  "devDependencies": {
    "chai": "^4.1.2"
  }
}
2

Try to add ecmascript meteor package, it may solve this problem.

meteor add ecmascript
3

Thanks for your response, already have it.

Here is my packages file:

meteor-base@1.4.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.5.0                   # The database Meteor supports right now
static-html                   # Define static page content in .html files
tracker@1.2.0                 # Meteor's client-side reactive programming library

standard-minifier-css@1.4.1   # CSS minifier run for production mode
standard-minifier-js@2.3.4    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command

apollo
accounts-password
mrgalaxy:stripe
meteorhacks:aggregate
meteortesting:mocha
accounts-facebook
service-configuration
meteorhacks:async
4

It looks like this package is designed to work with webpack only.

5

This is an annoying artefact of their use of webpack and the way Meteor (and other build tools that attempt tree-shaking) scan for import or require statements to work out what to send to the client

The offending bit of code in react-password-strength is never meant to run:

// Hot Module Replacement
if(false) {
    // When the styles change, update the <style> tags
    if(!content.locals) {
        module.hot.accept("!!../node_modules/css-loader/index.js!./style.css", function() {
            var newContent = require("!!../node_modules/css-loader/index.js!./style.css");
            if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
            update(newContent);
        });
    }
    // When the module is disposed, remove the <style> tags
    module.hot.dispose(function() { update(); });
}

Specifically this line: require("!!../node_modules/css-loader/index.js!./style.css");

When meteor reads the file and finds the require statement, it tries to follow it and make sure that the dependency is available. Which immediately fails because it uses an esoteric webpack directive to specify a custom loader

If you have a poke around, all the other internal require statements use __webpack_require__ since it’s already a fully built app. This faulty require statement should not exists, or should use __webpack_require__ as well.

Personally, I’m going to blame react-password-strength for shipping code with this webpack-specific require statement

2 Likes
6

As an immediate solution, try adding the folder to .meteorignore
This will stop Meteor from trying to compile the module, though I’m unsure if it will still get caught on the import scanner.

Alternatively you could import the uncompiled version:

import ReactPasswordStrength from "react-password-strength/src";

And let Meteor compile the module itself, rather than use the precompiled webpack version.

Note: in Meteor 1.7.1, automatic compilation of node_modules will be turned off and you will need to tell Meteor to compile the module by linking it into your project.
More details here: https://github.com/meteor/meteor/pull/9771

1 Like
7

@coagmano, these are awesome replies, thank you!
I feel like this is worth forwarding to the developer of this package.

Just to clarify - does the Note mean that from 1.7.1 it will be possible to

import stuff from “the-package”

even if it uses some odd require statements or other esoteric webpack directives?

8

I’m not really sure.
It does mean that the module won’t be re-compiled, but I assume that Meteor will still try to follow imports so that all dependencies are available (same potential issue with .meteorignore).

The main reason why automatic compilation is being turned off is because almost all modules are already pre-compiled for use on the web and with the ever growing sizes of node_modules in projects, compiling every module now takes a lot of time. This saves a huge amount of compilation time

2 Likes