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"]
}