Confusing error when using tailwind/smelte JS

[Taha-Firoz]

I was using tailwind and Smelte JS in my project, initially I was using the new typescript template that svelte has officially uploaded. However this setup worked only while I was in development, when it came to creating the build routify kept saying no dist folder found. I tried specifying dir name to routify but it wasn't working so I decided to pull this template and then convert it to TS.

I've added all my dependencies and from the look of it everything seems to be working except that theres no styling. I followed Smeltes preffered way of adding it to the project, by adding this line to the rollup file(which is apparently the base.config.js file in the case of this template I think).

  const _rollupConfig = {
        inlineDynamicImports: !dynamicImports,
        preserveEntrySignatures: false,
        input: 'src/main.ts',
        output: {
            name: 'routify_app',
            sourcemap: true,
            ...outputConfig
        },
        plugins: [

                      . . . 

           smelte({ 
                purge: !production,
                output: "static/global.css", // it defaults to static/global.css which is probably what you expect in Sapper 
                postcss: [], // Your PostCSS plugins
                whitelist: [], // Array of classnames whitelisted from purging
                whitelistPatterns: [], // Same as above, but list of regexes
                tailwind: {
                    future: {
                        removeDeprecatedGapUtilities: true,
                        purgeLayersByDefault: true,
                    },
                    theme: {
                        colors: {
                            "dark-blue": "#2A2F39", 
                            "light-blue": "#303642",
                            "deep-blue":"#20242b",
                            "highlight": "#ec6e00"
                        },
                        transitionProperty: {
                            'height': 'height',
                            'spacing': 'margin, padding',
                        }
                    },
                    colors: { 
                        primary: "#ec6e00",
                        secondary: "#009688",
                        error: "#f44336",
                        success: "#4caf50",
                        alert: "#ff9800",
                        blue: "#2196f3",
                        dark: "#2A2F39",
                        background: "#303642"
                    }, // Object of colors to generate a palette from, and then all the utility classes
                    variants: {
                        textColor: ['hover',],
                        textDecoration: ['hover'],
                        transitionProperty: ['responsive'],
                        borderColor: ['focus-within'],
                    }
                }, 

Now nothing goes wrong until this point, however you have to add import "smelte/src/tailwind.css" somewhere in your App.svelte so the css starts actually working. However the minute I add this one line I get this error .

TypeError: 'set' on proxy: trap returned falsish for property '../../static/global.css'
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:910:35
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:19:24)
    at _next (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:41:9)
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:48:7
    at new Promise (<anonymous>)
    at /home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:37:12
    at Object.generateBundle (/home/taha-firoz/Documents/routify-starter/node_modules/rollup-plugin-postcss/dist/index.js:920:9)
    at _callAsyncHook (/home/taha-firoz/Documents/routify-starter/node_modules/nollup/lib/impl/PluginLifecycle.js:11:31)
    at callAsyncSequentialHook (/home/taha-firoz/Documents/routify-starter/node_modules/nollup/lib/impl/PluginLifecycle.js:49:24)

I read somewhere these TypeError: 'set' on proxy: trap returned falsish for property errors come up when TS is in strict mode. But I haven't specified strict mode anywhere, neither can I see it specified in my tsconfig.json. I'm kind of stumped at this point because I really have to deploy in a few days and really wasn't expecting exporting a final build to be a problem. I would really appreciate any help I can get with this issue.

[jakobrosenberg]

Have you tried using dist as your distDir?

[Taha-Firoz]

This error is from the routify starter template, the only changes I did were add that line to the Rollup config and added my svelte pages. This specific error comes up when I add that Tailwind import

On Sat, 12 Sep 2020, 00:38 Jakob Rosenberg, notifications@github.com wrote:

Have you tried using dist as your distDir?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/roxiness/routify-starter/issues/64#issuecomment-691277978, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKCH6QNPDSKBKKARZJX4OWDSFJ4DDANCNFSM4RHV7BMA .

[Taha-Firoz]

I'm going to open a codespace with this and hopefully I can replicate the problem

[Taha-Firoz]

It's as I expected, even on codespace, on a completely fresh template of the routify-starter I added the Smeltejs line and I'm getting the same error. Here's the repo with the most recent commit being the only changes I did, like converting the project to TS and added the rollup stuff.

[Taha-Firoz]

@jakobrosenberg Any input?

[jakobrosenberg]

@Taha-Firoz sorry, I completely missed your previous post. I tried replicating your project , but weren't able to replicate your error.

What I did approximately:

• npx setup-routify-ts init my-routify-app
• copied your config to rollup.config.js
• added @import "../static/global.css" to style tag in App.svelte

The outcome can be seen here https://github.com/roxiness/routify-starter/tree/tailwind-smelte

You can check it out with npx @roxi/routify init --branch tailwind-smelte

NOTE: I haven't done any extensive testing. I just ran npm run dev and verified that the Tailwind CSS was loaded.

[Taha-Firoz]

I'll check it out, Thank you.

[Taha-Firoz]

@jakobrosenberg No luck, I cloned the template, removed all the existing pages set an empty index.svelte and only added a progress circular component from Smelte and there's no styling on the page. When I checked our the bundle.css it had some weird stuff in it. I'm very confused because theres no styling :(

[ghostdevv]

Still having this issue? @Taha-Firoz

[Taha-Firoz]

Unfortunately yes, I gave up on Smelte because it was hardly maintained though. But this might have gotten fixed after all the updates that were added to Routify.

[ghostdevv]

Oki, if you have any more issues feel free to reopen/ create a new issue @Taha-Firoz

[Makohan]

@Taha-Firoz I got the same error with routify-starter. Then, I resolve this when I use rollup instead of nollup.

package.json

   "scripts": {
      "dev": "run-p routify rollup",

[Taha-Firoz]

Please don't use Smelte, the original maintainer left he project.

[Makohan]

Opps... thank you for telling me about.