Unable to resolve correct file path

[cjbuchmann-work]

Hey, Awesome library! Recently however, I've been encountering some issues with it, where the tests are not able to resolve the correct file path for the given alias. For instance, I'm seeing

> cd client && npm run test --silent

module.js:327
    throw err;
    ^

Error: Cannot find module 'node_modules/react/react'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (MyTestComponent.jsx:1:1)
    at Module._compile (module.js:409:26)
    at loader (..../client/node_modules/babel-core/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (..../client/node_modules/babel-core/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (MyTestComponent.spec.jsx:4:1)
    at Module._compile (module.js:409:26)
    at loader (..../client/node_modules/babel-core/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (..../client/node_modules/babel-core/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at ..../client/node_modules/mocha/lib/mocha.js:220:27
    at Array.forEach (native)
    at Mocha.loadFiles (..../client/node_modules/mocha/lib/mocha.js:217:14)
    at Mocha.run (..../client/node_modules/mocha/lib/mocha.js:469:10)
    at Object.<anonymous> (..../client/node_modules/mocha/bin/_mocha:404:18)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:974:3

In the webpack alias, this is defined as

resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      ...
      react: path.resolve('./node_modules/react'),
    },
  },

When this gets compiled in development, it's able to detect the right path, however in test, it looks like the path is wrong, as this is in a nested subfolder, that looks like

- client
  - app
    - bundles
      - MyBundle
        - components
          - MyComponent
            - MyComponent.jsx

so I think the path should actually be more like ./../../../../../node_modules/react/react rather than just node_modules/react/react. When I manually update this path to reflect that, it's able to find the module as intended.

I'm not entirely sure that this is a problem of this package, as this has worked for us in the past, and now it isn't. However, any insights here, would be greatly appreciated.

[cjbuchmann-work]

My package.json has the following dependencies, if that helps

"dependencies": {
    "autoprefixer": "^6.3.5",
    "axios": "^0.9.1",
    "babel-cli": "^6.6.5",
    "babel-core": "^6.7.5",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-regenerator-runtime": "^6.5.0",
    "babel-runtime": "^6.6.1",
    "c3": "~0.4.11",
    "classnames": "^2.2.5",
    "css-loader": "^0.23.1",
    "email-validator": "^1.0.4",
    "es5-shim": "^4.5.7",
    "expose-loader": "^0.7.1",
    "i18n-iso-countries": "^1.5.0",
    "immutable": "^3.7.6",
    "imports-loader": "^0.6.5",
    "inflected": "^1.1.7",
    "jquery": "^2.2.2",
    "jquery-ujs": "^1.2.1",
    "json-loader": "^0.5.4",
    "loader-utils": "^0.2.13",
    "lodash": "^4.7.0",
    "moment": "^2.13.0",
    "react": "^15.1.0",
    "react-addons-test-utils": "^15.1.0",
    "react-bootstrap": "^0.29.4",
    "react-dom": "^15.1.0",
    "react-media-player": "^0.4.0",
    "react-motion-ui-pack": "^0.8.0",
    "react-notification-system": "^0.2.7",
    "react-on-rails": "5.2.0",
    "react-redux": "^4.4.4",
    "react-router": "^2.5.2",
    "react-router-redux": "^4.0.5",
    "react-tinymce": "^0.5.1",
    "redux": "^3.4.0",
    "redux-form": "^5.3.0",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.0.1",
    "underscore.string": "^3.3.4",
    "webpack": "^1.12.14"
  },
  "devDependencies": {
    "axios-mock-adapter": "^1.5.0",
    "babel-cli": "^6.10.1",
    "babel-eslint": "^6.0.2",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-webpack-alias": "^1.3.1",
    "body-parser": "^1.15.0",
    "chai": "^3.5.0",
    "chai-immutable": "^1.5.4",
    "dirty-chai": "^1.2.2",
    "eslint": "^2.12.0",
    "eslint-config-shakacode": "^4.0.0",
    "eslint-plugin-react": "^4.2.3",
    "immutable": "^3.7.6",
    "isparta": "^4.0.0",
    "istanbul": "^0.4.4",
    "jsdom": "^8.3.1",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^15.0.1",
    "react-test-context": "^0.1.0",
    "react-transform-hmr": "^1.0.4",
    "redux-mock-store": "^1.1.2",
    "sinon": "^1.16.4",
    "sinon-stub-promise": "^3.0.1",
    "webpack-dev-server": "^1.14.1"
  }

[adriantoine]

Hi @cjbuchmann-work thanks for these very detailed instructions! I'm having a look right now! 😄

[adriantoine]

I suspect path.resolve('./node_modules/react') to return a path that can't be processed by our plugin. It is a bug but can you try with path.join(__dirname, 'node_modules/react') or './node_modules/react'? As this is the kind of paths we have in our unit tests.

[adriantoine]

I added a unit test for this particular case, using path.resolve('./node_modules/react') but it should work as path.resolve('./node_modules/react') returns an absolute path 🤔.

I will keep investigating, if you have time, can you create a sample project in a github repo which replicates this issue?

Thanks!

[cjbuchmann-work]

Thanks for the support @adriantoine! I'll work to get a sample project up and running in the next the few days.

I agree, it looks like path.resolve('./node_modules/react') is returning the correct absolute path, which is why it's so odd that it seems like it's looking for the wrong path in that test failure.

I'll keep cracking away as well. Thanks again!

[cjbuchmann-work]

Hey @adriantoine we were actually able to resolve this issue by upgrading our babel-core version to 6.13.2. It looks like there were some versions in between 6.7.5 and 6.13 that were the cause of this issue. After upgrading, it seems to be working again.

So we can close out this issue.

[adriantoine]

Cool! Glad you fixed it ☺️