Roots Discourse

Sage 10 & Vue Babel Problems

Problem: Attempting to load parts of the tailwindcss config file into a Vue component throws
tailwind.config.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' in the browser. When yarn building, I get this:

"export 'default' (imported as 'theme') was not found in '../../../../tailwind.config'
 @ ./resources/assets/scripts/components/NavbarHeader.vue?vue&type=script&lang=js&
 @ ./resources/assets/scripts/components/NavbarHeader.vue
 @ ./resources/assets/scripts/app.js
 @ multi ./resources/assets/scripts/app.js ./resources/assets/styles/app.scss ./resources/assets/styles/editor.scss

I looked more into it and found an old related issue that someone else might understand. I tried adding and removing different babel-related packages to no avail.

Basically what I’m trying to achieve is instead of having 2 nav bars I want to v-if one or the other based on the media query, but I want those breakpoints to be derived from the tailwind config file.

I’m posting it here because in a fairly standard laravel/tailwind/vue app this behavior works just fine; i think it may be something to do with the .babelrc config. I’m not really a webpack guy so I’m having a hard time really digging into what’s wrong.

Hopefully someone can see this and guess what it could be.

In the component, I ask for the tailwind config with this:
import theme from "../../../../tailwind.config"
and then console.log(theme)

In the laravel project, I get the object dumped out no problem. In the Sage 10 project, which admittedly doesn’t come WITH Vue, but most other Vue functionality is working with this as my package.json:

"devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2",
    "@wordpress/babel-preset-default": "^4.7.0",
    "@wordpress/browserslist-config": "^2.6.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^2.1.0",
    "animate.css": "^3.7.2",
    "axios": "^0.19.0",
    "babel-eslint": "^10.0.3",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^6.0.3",
    "laravel-mix": "^5.0.0",
    "laravel-mix-copy-watched": "^2.2.1",
    "laravel-mix-purgecss": "^4.2.0",
    "laravel-mix-tailwind": "^0.1.0",
    "laravel-mix-wp-blocks": "^0.2.0",
    "lodash": "^4.17.15",
    "npm-run-all": "^4.1",
    "postcss-import": "^12.0.1",
    "postcss-nesting": "^7.0.1",
    "rimraf": "^3.0",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "tailwindcss": "^1.1.4",
    "vue": "^2.6.11"
  }

and for those without their own Sage 10 projects but maybe could figure out what’s going on, the .babelrc file has only this:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

alrighty well I couldn’t solve it so i made a package to extract the data to json for consumption on the PHP AND Vue side.