Getting error importing theme.js

[pippaink]

I get this error when I follow the instructions.

tailwind.js?3649:67 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.eval (tailwind.js?3649:67)

It does not like that I am importing at the top of tailwind and the error is pointing to module.exports = {

Where in tailwind must the "import theme from './theme'" go?

Thanks

[jan-dh]

I set the theme import to the first line of the tailwind.js file. I'm assuming this has more to do with your actual Webpack setup then with the plugin.

I could help you debug it a bit, but I would need a repo or more info on your setup (specially to the way you set up babel). I think it's related to this issue.

[pippaink]

Thanks, I will post my tailwind and babel.irc files.

It is a wordrpress gutenberg block that is using it. I am getting some values from the tailwind file for block settings. This runs through webpack so what you say makes sense.

However I compile tailwind.js to css separately, not via webpack and while testing it by running tailwind from terminal with this command I get another error about the import

node-sass src/tailwind.scss dist/css/tailwind.css && tailwind build dist/css/tailwind.css -c tailwind.js -o dist/css/tailwind.css

/plugins/gbmb/tailwind.js:1
import theme from './tailwind-base-theme';
       ^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Any ideas?

[jan-dh]

This is because the importstatement is part of ES6, a "newer" version of javascript. The import statement is not implemented in most versions of node, so node doesn't recognize the import. That's why you get the Unexpected identifier error. Babel helps you using newer versions of javascript in, for example node.

I suggest you google a bit for making Babel work with node. I once wrote a blogpost on this, you can find it here.

I'm going to close this issue since the issue is not really related to the actual plugin itself.

[pippaink]

Thanks for the assistance, I will look at how to setup babel to work with node.

May I just ask what build method you are using where import works?

[jan-dh]

Yes, I'm working with a webpack setup where I use the babel-loader. My .babelrc-file looks something like this:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage"
    }],
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

I then use a postcss-loader in my webpack config, and for my postcss.config.js I import the tailwind file:

module.exports = ({ options }) => ({
    plugins: {
        ...
        'tailwindcss': 'tailwind.js',

I don't think you need all the webpack magic though, It should be enough to get Babel up and running. You can find all the possible setup options here.