Parcel: 🐛 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[gugiserman]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }],
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-object-rest-spread",
    "transform-class-properties",
    "transform-es2015-modules-commonjs"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

  "scripts": {
    "start": "parcel ./src/index.html -d ./demo -o",
    "build": "parcel ./src/index.js"
  },
  "dependencies": {
    "currency.js": "^1.0.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react-dom": "^16.2.0"
  }

😯 Current Behavior

Terminal:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Browser console:

Uncaught Error: Cannot find module "."
    at webpackMissingModule (index.js:60)
    at ../react-currency-input/dist/index.js.require.14 (index.js:60)

💁 Possible Solution

I got nothing

🔦 Context

I wrote a small react component and tried publishing it to our npm org and then Import it in another project.

It runs just fine with parcel, problems only appear when trying to import it on other applications. (the other app is running on create-react-app).

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.2.1
| Node | 8.6.0 (nvm)
| npm/Yarn | 5.3.0 (npm) / 1.2.1 (yarn)
| Operating System | Mac OSX El Capitan

[devongovett]

hmm this looks like a webpack issue? looks like it is failing in webpackMissingModule? how is this issue related to parcel?

[gugiserman]

@devongovett I just tested on another host app but this time i wrote the webpack config myself instead of using create-react-app and it works just fine.

Yeah, I think I should move this issue to CRA's repo maybe. Sorry mate

[relign]

how to use parcel bundle js

i tell a joke, happy and so silly to me

[nardeas]

I have exactly the same problem, I don't see an issue of this in CRA. @gugiserman did you find a solution?

[mesqueeb]

I have the exact same problem!
@gugiserman were you able to fix it.

I guess I need to write some other build file for parcel, because now just writing parcel build ./src/index.js gives me the error above.

The only config I have is .babelrc:

{
  "presets": ["env"],
  "plugins": ["babel-plugin-transform-object-rest-spread"]
}

Do I need to build every file that gets imported into my src/index.js?

Would much appreciate any help!

[gugiserman]

@nardeas @mesqueeb nope, sorry

We eventually moved the project from CRA to a custom setup with webpack. I still have no idea how to fix this. 😞