0

I started making custom gutenberg block and am trying to setup the environment but never work...

Webpack always throws error like "Unexpected token", which says JSX Compiling.

Here are testing files.

block.js

export default {
    name: 'sample/sample',
    title: 'Sample',
    icon: 'universal-access-alt',
    category: 'common',
    edit: () => {
        return (
            <div className="edit"> // <= This part causing error, so it means babel-loader is not working?
                <h1>Header1</h1>
                <p>Paragraph</p>
            </div>
        );
    },
    save: () => {
        return (
            <div className="save">
                <h1>Header1</h1>
                <p>Paragraph</p>
            </div>
        );
    },
};

index.js / Entry Point

import Sample from './block.js';

const { registerBlockType } = wp.blocks;

registerBlockType( Sample.name, Sample );

In package.json,

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-add-module-exports": "^1.0.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^2.2.2",
    "classnames": "^2.2.5",
    "cross-env": "^5.1.1",
    "css-loader": "^2.1.0",
    "eslint": "^5.14.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-config-wordpress": "^2.0.0",
    "eslint-plugin-prettier": "^3.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.15.3",
    "raw-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5"
  },
  "dependencies": {
    "@wordpress/babel-plugin-import-jsx-pragma": "^1.1.3",
    "@wordpress/babel-preset-default": "^3.0.2",
    "webpack-cli": "^3.2.3"
  }

}

In the webpack.config.js, I wrote rules like this for the target files. actually I have others.

rules: [
    { 
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: [
            {
                loader: "babel-loader",
            }
        ]
    },
}

and in .babelrc this way

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [ "transform-react-jsx", {
            "pragma": "wp.element.createElement"
        } ]
    ]
}

Error message says, "You may need an appropriate loader to handle this file type."

Please help me. What am I missing?

  • I'm having the same problem. Did you find a solution? – Mark Howells-Mead Mar 13 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.