Laravel-mix: [6.0.0-beta.14][Trying to use vue-router and Tailwindcss 2.0 together]Module parse failed: Unexpected token (1:0)

[maverickchangithub]

• Laravel Mix Version: 6.0.0-beta.14 (npm list --depth=0)
• Node Version (node -v): 14.8.0
• NPM Version (npm -v): 6.14.8
• OS: macOs High Sierra , valet php-7.4.9

Description:

for using Tailwindcss 2.0, i have to use beta 6.0.0-beta.14, but if i use vue-router , .vue file resolve failed

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Steps To Reproduce:

create a file called postcss.config.js under the root directory , and make the file like this

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

. npm install
. npm run dev

[thecrypticace]

As I understand Vue SFCs doesn't work with PostCSS 8-only plugins yet. You can use the tailwind PostCSS 7 compatibility build to work around this (see: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)

[solamichealolawale]

Okay I tried using the below command as seen in the link and I still experienced the same issue

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Until I downgrade the laravel mix verstion from 6.0 to "laravel-mix": "^5.0.1"

[thoresuenert]

With the new version and vue3 support built in, you need to specify wich vue version you want to use.
Otherwise the loader isn't configured correctly.

mix.js('src/app.js', 'dist').vue({ version: 2 });

See the docs: https://laravel-mix.com/docs/6.0/vue

@thecrypticace I guess you don't have support for <style> tags within Vue SFCs, the rest is working fine.

[donmbelembe]

mix.js('src/app.js', 'dist').vue();