Webpack / babel Token inesperado, esperado ";"

4

Estoy intentando importar un archivo JSON, pero cuando intento cargar mi archivo JSON, el paquete web me da un error.

ERROR in ./src/testData.json Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\Alex\Documents\Work\test-app\learn-fullstack-javascript\src\testData.json: Unexpected token, expected ";" (3:12)

Intenté cambiar mis archivos de configuración de babel y webpack, pero no he podido solucionar el problema.

Aquí están mis archivos de configuración: webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|json)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        }
      ]
    }
  };

babel.config.js

module.exports = {
    presets: ['@babel/preset-env', '@babel/react'],
};

.babelrc

{
  "presets": [
      "@babel/preset-env",
      "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

por ultimo mi package.json

{
  "name": "learjs",
  "version": "1.0.0",
  "description": "For an up-to-date configuration guide: [jscomplete.com/reactful](https://jscomplete.com/reactful)",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node server.js --ignore public/",
    "dev": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jscomplete/learn-fullstack-javascript.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jscomplete/learn-fullstack-javascript/issues"
  },
  "homepage": "https://github.com/jscomplete/learn-fullstack-javascript#readme",
  "dependencies": {
    "@babel-preset-node7": "^1.5.0",
    "@babel/register": "^7.4.0",
    "braces": "^2.3.2",
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "mongodb": "^3.2.3",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack-dev-server": "^3.3.1"
  },
  "devDependencies": {
    "@babel-core": "^7.0.0-bridge.0",
    "@babel-eslint": "^10.0.1",
    "@babel-jest": "^24.7.1",
    "@babel-loader": "^8.0.0-beta.6",
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/node": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.16.0",
    "eslint-plugin-react": "^7.12.4",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "nodemon": "^1.18.11",
    "regenerator-runtime": "^0.13.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  }
}

{
  "contests": [
    {
      "id": 1,
      "categoryName": "Business/Company",
      "contestName": "Cognitive Building Bricks"
    },
    {
      "id": 2,
      "categoryName": "Magazine/Newsletter",
      "contestName": "Educating people about sustainable food production"
    },
    {
      "id": 3,
      "categoryName": "Software Component",
      "contestName": "Big Data Analytics for Cash Circulation"
    },
    {
      "id": 4,
      "categoryName": "Website",
      "contestName": "Free programming books"
    }
  ]
}

Esperaba obtener algo como esto dentro de las herramientas de desarrollo de Chrome.

Object i
  contents: Array[4]
  > 0: Object
  > .......
2
  • 2
    Ha omitido el archivo que más necesitamos ver: testData.jsonal que apunta específicamente el mensaje de error. :-) Aparentemente tiene un ;. No debería (fuera de una cadena), JSON no se usa ;para nada. 26/04/19 a las 18:25
  • oh hombre, pasé por alto eso; /, acabo de agregar el archivo json a la publicación. 29/04/19 a las 17:23
2

Intente sacar el jsonde la configuración de su paquete web. No necesita babel-loader para manejar json, puede usar json-loader para eso

module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets:['@babel/preset-env']
            }
          }
        },
        {
          test:  /\.json$/,
          exclude: /node_modules/,
          use: {
            // included by default (https://webpack.js.org/loaders/json-loader/)
            loader: 'json-loader' 
          }
        }
      ]
    }
  };
3
  • 1
    eres una hermosa persona! ¡Esto funcionó muy bien! ¡Muchas gracias por su ayuda! 29/04/19 a las 17:24
  • ¡Me alegro de que haya funcionado! Si lo desea, puede seleccionar esto como su respuesta y obtendré puntos.
    djheru
    29/04/19 a las 18:38
  • Para mí, sacar el jsonde la configuración del paquete web fue suficiente. No tuve que usar json-loader. Por lo que yo entiendo, Webpack hace esto de inmediato.
    Ben
    13/08/20 a las 6:10
-1

Probablemente solo necesite eliminar jsx y json de test: /\.(js|jsx|json)$/su archivo webpack.config.json

 rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets:['@babel/preset-env']
        }
      }
    }
  ]    
2
  • 1
    Intente explicar sus respuestas para que otros puedan aprender de ellas. 12 de mayo de 2019 a las 10:46
  • De hecho, no sé por qué sucede esto. Tuve exactamente el mismo problema y soy nuevo en reaccionar. Supongo que hay un conflicto entre jsx y json, y los archivos json no deben manejarse con babel-loader. 12 de mayo de 2019 a las 10:54