grommet: Webpack build error when importing Card component.

Expected Behavior

Importing Card Component.

Actual Behavior

Build Error:

    ERROR in ./~/character-entities-legacy/index.json
    Module parse failed: W:\atlassocial\node_modules\character-entities-legacy\index.json Unexpected token (2:9)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:9)
        at Parser.pp$4.raise (W:\atlassocial\node_modules\acorn\dist\acorn.js:2221:15)
        at Parser.pp.unexpected (W:\atlassocial\node_modules\acorn\dist\acorn.js:603:10)
        at Parser.pp.semicolon (W:\atlassocial\node_modules\acorn\dist\acorn.js:581:61)
        at Parser.pp$1.parseExpressionStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:966:10)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:730:24)
        at Parser.pp$1.parseBlock (W:\atlassocial\node_modules\acorn\dist\acorn.js:981:25)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:709:33)
        at Parser.pp$1.parseTopLevel (W:\atlassocial\node_modules\acorn\dist\acorn.js:638:25)
        at Parser.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:516:17)
        at Object.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:3098:39)
        at Parser.parse (W:\atlassocial\node_modules\webpack\lib\Parser.js:902:15)
        at DependenciesBlock.<anonymous> (W:\atlassocial\node_modules\webpack\lib\NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
        at nextLoader (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
        at W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
        at Storage.finished (W:\atlassocial\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
     @ ./~/character-entities-legacy/index.js 12:17-40

    ERROR in ./~/character-reference-invalid/index.json
    Module parse failed: W:\atlassocial\node_modules\character-reference-invalid\index.json Unexpected token (2:5)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:5)
        at Parser.pp$4.raise (W:\atlassocial\node_modules\acorn\dist\acorn.js:2221:15)
        at Parser.pp.unexpected (W:\atlassocial\node_modules\acorn\dist\acorn.js:603:10)
        at Parser.pp.semicolon (W:\atlassocial\node_modules\acorn\dist\acorn.js:581:61)
        at Parser.pp$1.parseExpressionStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:966:10)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:730:24)
        at Parser.pp$1.parseBlock (W:\atlassocial\node_modules\acorn\dist\acorn.js:981:25)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:709:33)
        at Parser.pp$1.parseTopLevel (W:\atlassocial\node_modules\acorn\dist\acorn.js:638:25)
        at Parser.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:516:17)
        at Object.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:3098:39)
        at Parser.parse (W:\atlassocial\node_modules\webpack\lib\Parser.js:902:15)
        at DependenciesBlock.<anonymous> (W:\atlassocial\node_modules\webpack\lib\NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
        at nextLoader (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
        at W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
        at Storage.finished (W:\atlassocial\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
     @ ./~/character-reference-invalid/index.js 12:17-40

    ERROR in ./~/character-entities/index.json
    Module parse failed: W:\atlassocial\node_modules\character-entities\index.json Unexpected token (2:8)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:8)
        at Parser.pp$4.raise (W:\atlassocial\node_modules\acorn\dist\acorn.js:2221:15)
        at Parser.pp.unexpected (W:\atlassocial\node_modules\acorn\dist\acorn.js:603:10)
        at Parser.pp.semicolon (W:\atlassocial\node_modules\acorn\dist\acorn.js:581:61)
        at Parser.pp$1.parseExpressionStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:966:10)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:730:24)
        at Parser.pp$1.parseBlock (W:\atlassocial\node_modules\acorn\dist\acorn.js:981:25)
        at Parser.pp$1.parseStatement (W:\atlassocial\node_modules\acorn\dist\acorn.js:709:33)
        at Parser.pp$1.parseTopLevel (W:\atlassocial\node_modules\acorn\dist\acorn.js:638:25)
        at Parser.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:516:17)
        at Object.parse (W:\atlassocial\node_modules\acorn\dist\acorn.js:3098:39)
        at Parser.parse (W:\atlassocial\node_modules\webpack\lib\Parser.js:902:15)
        at DependenciesBlock.<anonymous> (W:\atlassocial\node_modules\webpack\lib\NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
        at nextLoader (W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
        at W:\atlassocial\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
        at Storage.finished (W:\atlassocial\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
     @ ./~/character-entities/index.js 12:17-40

Steps to Reproduce

import Card from 'grommet/components/Card'

Your Environment

  • Grommet version: 0.6.11
  • Node version: 6.5.0
  • Npm version: 3.10.3
  • Operating System: Windows 10

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (10 by maintainers)

Most upvoted comments

If the above did not fix, add the following to fix issue loaders: [ { test: /.json$/, loader: “json-loader” } ]

@lucasmullerm In your webpack config, just make sure to add a “.json” to your resolve extensions:

resolve: {
    root: path.resolve('./mydir'),
    extensions: ['', '.js', '.json'] // <- Just append a '.json' here
  }