Importing config for use in JS

[kjbrum]

I'm using Storybook to build a design system and having trouble importing my config file into JS to use as design tokens.

This is what my color.stories.js looks like:

import { storiesOf } from '@storybook/html'

// Utilities
import { tw } from '@utilities'

// Init stories
const stories = storiesOf('Tokens', module)

// Color
stories.add('Color', () => {
	let output = '';

	// Do something with Tailwind colors here

	return output;
})

My utilities JS file is as follows:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../tailwind/tailwind.config.js'

export let tw = resolveConfig(tailwindConfig).theme

Sometimes everything compiles fine, but I'm getting the default TW config. Other times I get the following error in my terminal.

WARNING in ./utilities/index.js 18:30-44
"export 'default' (imported as 'tailwindConfig') was not found in '../tailwind/tailwind.config.js'
 @ ./stories/01-tokens/color.stories.js
 @ ./stories sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Any help would be greatly appreciated!

[ellisio]

Any insight on this issue? Just ran into this myself.

[tylerwiegand]

I also am having a similar problem. It never happens in a laravel project, but in another (still uses laravel mix) it persists. I've tried -alot- of things to no avail.

https://discourse.roots.io/t/sage-10-vue-babel-problems/17317