Error when importing pug

[PaulVML]

I have a funny feeling it could be due to the version of webpack I am using ...

Thanks for your help.

Pug:

div
    div Hello this is a test for testing
    div this is another thing I am writing ... trying to find out what this mysterious token is

Error Message:

Module build failed: SyntaxError: Unexpected token, expected ; (2:8)
    1 | div
> 2 |     div Hello this is a test for testing
      |         ^
   3 |     div this is another thing I am writing ... trying to find out what this mysterious token is

Current Dev Dependencies:

"devDependencies": {
    "@storybook/addon-actions": "^3.0.0",
    "@storybook/react": "^3.0.0",
    "@webpack-blocks/dev-server2": "^0.4.0",
    "@webpack-blocks/webpack2": "^0.4.0",
    "babel-core": "^6.24.1",
    "babel-eslint": "^8.0.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-styled-components": "^1.1.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.0",
    "babel-preset-env": "^1.3.3",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "copyfiles": "^1.0.0",
    "cross-env": "^5.0.0",
    "delay": "^2.0.0",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.1",
    "eslint": "^4.9.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.0.1",
    "file-loader": "^1.1.5",
    "jest-cli": "^22.1.4",
    "opn-cli": "^3.1.0",
    "pug-as-jsx-loader": "^1.0.41",
    "raw-loader": "^0.5.1",
    "react-test-renderer": "^16.0.0",
    "redux-mock-store": "^1.2.3",
    "rimraf": "^2.6.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-assets-by-type-plugin": "^0.1.0",
    "webpack-blocks-happypack": "^0.1.3",
    "webpack-blocks-server-source-map": "^0.2.0",
    "webpack-blocks-split-vendor": "^0.2.1",
    "webpack-child-config-plugin": "^0.1.2",
    "webpack-dev-server": "^2.3.0",
    "webpack-node-externals": "^1.5.4",
    "webpack-spawn-plugin": "^0.1.1"
  }

[bluewings]

@PaulVML Did you put the rules for pug-as-jsx-loader in the webpack.config.js file?

module.exports = {
  entry: "...",

  output: { /* output options */ },

  modules: {
    rules: [
      { /* other rules */ },

      // Process pug as jsx.
      {
        test: /\.pug$/,
        include: paths.appSrc,
        use: [
          require.resolve('babel-loader'),
          require.resolve('pug-as-jsx-loader'),
        ],
      },

      { /* other rules */ },
    ]
  }
};

And here is a configuration example of webpack.

[PaulVML]

The rules I have used
{ test: /.pug?$/, exclude: /node_modules/, loaders: ['pug-as-jsx-loader','babel-loader']}

Thx for the quick reply

[bluewings]

@PaulVML The order of the loaders seems to be the problem. Change the order of the loader as follows.

{
  test: /.pug?$/,
  exclude: /node_modules/,
  loaders: ['babel-loader', 'pug-as-jsx-loader'],
}