Module build failed: SyntaxError: Unexpected token about babel-plugin-transform-vue-jsx HOT 10 CLOSED

vuejs commented on April 27, 2024 4

Module build failed: SyntaxError: Unexpected token

from babel-plugin-transform-vue-jsx.

Comments (10)

eirabben commented on April 27, 2024 4

I found a solution to this problem. To properly load vue-tables-2, the jsx template files need to be compiled with Babel. It won't compile when you exclude node_modules in the jsx loader. I use this:

loaders: [
    {
        test: /\.jsx$/,
        loader: 'babel'
    },
    {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
    },
]

You may also need to compile the javascript in the node_modules/vue-tables-2 and node_modules/vue-pagination-2 folders. This config worked for me in the end. It will compile .js and .jsx, and ignore everything in node_modules except for the two folders:

loaders: [
    {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
    },
]

from babel-plugin-transform-vue-jsx.

bibiseb commented on April 27, 2024 3

Small precision, I added this line to the webpack configuration:

{ test: /\.jsx?$/, loader: 'babel' }

from babel-plugin-transform-vue-jsx.

ycosine commented on April 27, 2024 2

{ test: /\.jsx$/, loader: 'babel', }, { test: /vue-tables-2.*?js$/, loader: 'babel' },

from babel-plugin-transform-vue-jsx.

Neurotec commented on April 27, 2024 1

the same problem, fix with solution from @eirabben

module.exports = {
    module: {
	loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
	]
    }
}

from babel-plugin-transform-vue-jsx.

pingupingu commented on April 27, 2024

I am having the same problem with jsx templates. my config below:
package.json:

  "dependencies": {
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vue-pagination-2": "^0.1.91",
    "vue-tables-2": "0.0.8"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.1",
    "babel-loader": "^6.0.0",
    "babel-plugin-syntax-jsx": "^6.13.0",
    "babel-plugin-transform-vue-jsx": "^3.1.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.5.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }

.babelrc
{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-vue-jsx"]
}

and this is the webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}```

from babel-plugin-transform-vue-jsx.

CoolGoose commented on April 27, 2024

Unfortunately I have the same issue, but with babelify.
I've opened a bug report on vue-tables-2 matfish2/vue-tables-2#69 .
I even tried specifying extensions: [".js", ".json", ".jsx"], in both brwoserify and babelify

from babel-plugin-transform-vue-jsx.

nickmessing commented on April 27, 2024

Closing for inactivity. Please reopen a new issue if you have the same problem.

from babel-plugin-transform-vue-jsx.

lihel commented on April 27, 2024

same problem

var path = require('path');
var config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname, 'app/main.js')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    }
};

module.exports = config;

from babel-plugin-transform-vue-jsx.

nickmessing commented on April 27, 2024

@lihel, can you provide minimal reproduction in a github repository please?

from babel-plugin-transform-vue-jsx.

nickmessing commented on April 27, 2024

Closing for inactivity.

from babel-plugin-transform-vue-jsx.

Module build failed: SyntaxError: Unexpected token about babel-plugin-transform-vue-jsx HOT 10 CLOSED

Comments (10)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent