Having trouble with compiling with Webpack Encore en Svelte Flowbite

45 Views Asked by At

I've been fiddling around with a project running Symfony 7 as backend together with Webpack Encore to handle all my style and JS stuff. It has been running great with Tailwind and DaisyUI. I then wanted to get Svelte running. I followed the instruction. All seems well. Then I wanted to use some Tailwind magic in my Svelte components. I also followed those instructions for the most part. Some things are a little specific to Webpack Encore I think, so not everything is applicable.

When compiling using npm run watch or npm run dev I get this error: Module build failed: Module not found: "./node_modules/flowbite-svelte/dist/index.js" contains a reference to the file "./types". This file can not be found, please check it for typos or update it if the file got moved.

I've searched all over the internet and as far as I know it was some TypeScript issue. But I am not using TS so that's where I get confused. I am not that strong in the frontend maze, so I am not sure what to do. I've asked on the GH of the Svelte package, but no one is there it seems. Maybe someone knows what the issue here is, maybe it's something obvious that I just can't see. The file node_modules/flowbite-svelte/dist/types.d.ts is opened when I alt+click on VSCode, so that seems fine.

As workaround I have now uncommented the line:

export * from './types';

This works fine. Everything works, no errors further, and all components work together like they should (I think at least).

But this is no solution obviously. Anyone that can point me in the right direction?

Here's my Webpack Encore config:

const Encore = require('@symfony/webpack-encore');
const FosRouting = require('fos-router/webpack/FosRouting');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSvelte()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })
    .enablePostCssLoader()
    .addPlugin(new FosRouting(
        { target: './assets/fos_js_routes.json' },
        false 
        )
    )
    .enableIntegrityHashes(Encore.isProduction())
;

let config = Encore.getWebpackConfig();

config.resolve.mainFields = ['svelte', 'browser', 'module', 'main'];
config.resolve.conditionNames = ['svelte', 'browser', 'import'];

module.exports = config;

Here is my tailwind config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
    "./assets/**/*.js",
    "./assets/**/*.svelte",
    "./templates/**/*.html.twig",
    "./node_modules/flowbite/**/*.js",
    './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
  ],
  daisyui: {
    themes: [
      {
       
      }
    ],
  },
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/typography'),
    require("daisyui"),
  ],
}

Not sure if anything else is important? Running Node v21.6.2. No tsconfig file right now.

I tried to install Svelte Flowbite and expected it to compile successfully.

edit: Fixed it. Thanks for the help.

0

There are 0 best solutions below