FormidableLabs / radium-grid

A powerful, no-fuss grid system component for React
MIT License
122 stars 13 forks source link

Cannot find module 'babel-runtime/helpers/interop-require' #31

Closed choonchernlim closed 8 years ago

choonchernlim commented 8 years ago

After a few hours of debugging, I have determined that v1.1.0 causes Cannot find module 'babel-runtime/helpers/interop-require' error when I do npm run build.

Based on https://phabricator.babeljs.io/T6993 , it appears interop-require was a helper in Babel 5, but not anymore in Babel 6.

I attached my very simplified project (test.zip).

Run npm install, then npm run build to produce the error.

To be 100% sure, remove radium-grid dependency from package.json, then npm run reinstall (to clear node_modules and npm cache), then npm run build... and the problem goes away.

Thank you.

alexlande commented 8 years ago

Thanks @choonchernlim!

I reduced the test into something more minimal that still demonstrates the issue: minimal-test.zip

/cc @tptee

tptee commented 8 years ago

I'll try to knock this one out today!

tptee commented 8 years ago

I have a feeling that the updated builder archetype in #37 will fix Babel resolution. @choonchernlim I'll try to release 1.2.0 tomorrow, can you try to reproduce against that version once it's published?

ryan-roemer commented 8 years ago

@tptee - ping me if you can't get it all working and have a tight repro. I may be able to jump in too

choonchernlim commented 8 years ago

Let me know when 1.2.0 is out, I can give it a spin. Thank you very much for your help.

tptee commented 8 years ago

Just released 2.0.0 since I introduced some small breaking changes. Can you try reproducing against that?

choonchernlim commented 8 years ago

Unfortunately, I'm still getting the same error: ERROR in Cannot find module 'babel-runtime/helpers/interop-require'

My package.json looks like this:-

{
  "name": "test",
  "private": true,
  "scripts": {
    "build": "webpack --progress --colors",
    "reinstall": "npm cache clean && rimraf node_modules && npm install"
  },
  "devDependencies": {
    "autoprefixer": "6.3.6",
    "babel-cli": "6.7.5",
    "babel-core": "6.7.6",
    "babel-eslint": "6.0.2",
    "babel-loader": "6.2.4",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-runtime": "6.7.5",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-stage-0": "6.5.0",
    "babel-runtime": "6.6.1",
    "chai": "3.5.0",
    "chai-as-promised": "5.3.0",
    "clean-webpack-plugin": "0.1.8",
    "css-loader": "0.23.1",
    "eslint": "2.7.0",
    "eslint-config-airbnb": "6.2.0",
    "eslint-loader": "1.3.0",
    "eslint-plugin-react": "4.3.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "image-webpack-loader": "1.6.3",
    "isparta": "4.0.0",
    "jsdom": "8.3.0",
    "mocha": "2.4.5",
    "mocha-junit-reporter": "1.10.0",
    "nock": "8.0.0",
    "node-sass": "3.4.2",
    "postcss-loader": "0.8.2",
    "react-addons-test-utils": "15.0.1",
    "rimraf": "2.5.2",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.12.14",
    "webpack-dev-server": "1.14.1"
  },
  "dependencies": {
    "babel-polyfill": "6.7.4",
    "css-mediaquery": "0.1.2",
    "immutable": "3.7.6",
    "isomorphic-fetch": "2.2.1",
    "material-ui": "0.15.0-alpha.2",
    "radium-grid": "2.0.0",
    "react": "15.0.1",
    "react-dom": "15.0.1",
    "react-redux": "4.4.1",
    "react-router": "2.0.1",
    "react-router-redux": "4.0.2",
    "react-tap-event-plugin": "0.2.2",
    "redux": "3.3.1",
    "redux-saga": "0.9.5",
    "roboto-fontface": "0.4.5"
  }
}
tptee commented 8 years ago

What's your npm version?

choonchernlim commented 8 years ago

npm version is v3.8.3 and node version is v5.10.1.

tptee commented 8 years ago

Cool, thanks! I reproduced this and I'll keep looking into why this happens

tptee commented 8 years ago

Found the problem:

babel-plugin-transform-runtime for some reason still depends on babel-runtime@^5.0.0. Pinning babel-runtime to 6.6.1 breaks the transform. Remove that version from your package.json and the error should disappear!

I'm closing since this isn't a radium-grid bug, but let me know if that works for you!

choonchernlim commented 8 years ago

That didn't work for me either.

I don't believe that is the problem.... I thought by having that ^ sign, it means it will work from 5.0.0 onward? If you look at babel-core, it also has babel-runtime@^5.0.0.

It doesn't still quite explain why my code builds properly if I completely drop radium-grid from package.json defined above... and when I introduced radium-grid, I will get the interop problem.

Thank you.

choonchernlim commented 8 years ago

@tptee, I totally misread your post, truly sorry about that... removing babel-runtime from my package.json fixes the problem.

Thanks again for your wonderful help... totally appreciate it.

tptee commented 8 years ago

Not a problem! Glad we got it sorted out 👍