Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack build error when importing Card component.

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:18 (10 by maintainers)

Top GitHub Comments

4reactions

nnurmanocommented, Feb 25, 2017

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

4reactions

bnoguchicommented, Nov 2, 2016

@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
  }

Top Results From Across the Web

Webpack Module build failed when importing React ...

The error is because you have not added a .babelrc file or babel options to your package.json file to provide babel options.

Webpack

Learn how to include Bootstrap in your project using Webpack 3. Installing Bootstrap. Install bootstrap as a Node.js module using npm. Importing JavaScript....

Revolutionizing Micro Frontends with Webpack 5, Module ...

The module will build a unique JavaScript entry file which can be downloaded ... Let's import the Header component into another application.

An import path cannot end with a '.tsx' extension in TS

To solve the error, remove the .tsx extension when importing files. index.ts.

Blog - Next.js 13

We've created a new library @vercel/og that works seamlessly with Next.js to generate dynamic social cards. // pages/api/og.jsx import { ...