Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't use Grommet with Parcel - Uncaught Error: Cannot find module './Box/doc' #2719

Closed
a-h opened this issue Mar 5, 2019 · 4 comments
Closed

Can't use Grommet with Parcel - Uncaught Error: Cannot find module './Box/doc' #2719

a-h opened this issue Mar 5, 2019 · 4 comments
Labels
🙋‍♀️ Feature

Comments

@a-h
Copy link

a-h commented Mar 5, 2019

🐛 bug report

When importing the grommet package, I get unexpected errors.

Uncaught Error: Cannot find module './Box/doc'
    at newRequire (Grom.e31bb0bc.js:39)
    at localRequire (Grom.e31bb0bc.js:55)
    at doc (hocs.js:27)
    at Object.parcelRequire.node_modules/grommet/es6/components/Box/Box.js.react (Box.js:16)
    at newRequire (Grom.e31bb0bc.js:49)
    at localRequire (Grom.e31bb0bc.js:55)
    at Object.parcelRequire.node_modules/grommet/es6/components/Box/index.js../Box (index.js:1)
    at newRequire (Grom.e31bb0bc.js:49)
    at localRequire (Grom.e31bb0bc.js:55)
    at Object.parcelRequire.node_modules/grommet/es6/components/Accordion/Accordion.js.react (Accordion.js:12)

🎛 Configuration

I created a very basic React app to reproduce the issue:

package.json

{
  "name": "Grom",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "grommet": "^2.5.5",
    "parcel": "^1.11.0",
    "parcel-bundler": "^1.11.0",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "styled-components": "^4.1.3"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">Loading...</div>
    <script src="index.js"></script>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Grommet } from "grommet";

const App = () => (
  <div>Hello</div>
);

ReactDOM.render(<App />, document.getElementById('app'));
parcel index.html

🤔 Expected Behavior

Should run without issues.

😯 Current Behavior

Error as detailed in description.

💁 Possible Solution

I'm not sure of the cause.

🔦 Context

Trying to use Grommet to build a React application for a demo instead of the material-ui components I might otherwise use.

💻 Code Sample

As above.

🌍 Your Environment

Software Version(s)
Parcel 1.11
Node v10.15.1
npm/Yarn 1.13.0
Operating System MacOS
@a-h
Copy link
Author

a-h commented Mar 5, 2019

If I run parcel build index.html, the contents of the dist folder are correct (I can run a Web server in there with python -m SimpleHTTPServer 8888 and the contents work as expected).

There's an issue raised at grommet/grommet#2618 which discusses the change in Grommet which broke Parcel support. Something to do with changing to use higher-order components.

@mischnic
Copy link
Member

mischnic commented Mar 5, 2019

This is caused by this bit of code:

 if (process.env.NODE_ENV !== 'production') { 
   doc = component => require(`./${component}/doc`).doc; // eslint-disable-line 
 }

https://github.com/grommet/grommet/blob/6a94c0f26fd2fcf742e8e7390516bc9133ef0c37/src/js/components/hocs.js#L11-L13

I don't think Parcel doesn't support these kind of dynamic imports with a non-static argument. Webpack does however. https://webpack.js.org/guides/dependency-management/
@devongovett

Running with NODE_ENV set to production is indeed a workaround: cross-env NODE_ENV=production parcel index.html

@one19 one19 mentioned this issue Mar 11, 2019
Closed
@a-h
Copy link
Author

a-h commented Mar 31, 2019

This was resolved at the Grommet side in PR grommet/grommet#2944 and released in version 2.6.5, which I've tested now works fine with Parcel again.

Not sure whether you want to support the dynamic imports.

@mischnic
Copy link
Member

Not sure whether you want to support the dynamic imports.

Ideally, we would: #125

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🙋‍♀️ Feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@a-h @DeMoorJasper @mischnic