Przy imporcie skryptu css leci błąd

0

Używam frameworka open-wc do webcomponentów, który używa bibliotek lit-element. Ściągnąłem sobie bibliotek która datatable.net tworzy webcomponent https://github.com/rom1504/wct-datatables-net Po uruchomieniu w konsoli mam error

failed to load module script: the server responded with a non-JavaScipt MIME type of " text/css"...... dataTables.bootstrap4.css....

import bootstrapCss from 'bootstrap/dist/css/bootstrap.css'
import bootstrapDT from 'datatables.net-bs4/css/dataTables.bootstrap4.css'
import 'bootstrap'
import 'popper.js'
import 'datatables.net-bs4'
import $ from 'jquery'
import 'datatables.net'
import detailsOpen from './assets/details_open.png'
import detailsClose from './assets/details_close.png'

export default class DataTable extends LitElement {
  static get properties () {
    return {
      table: { type: Object },
      options: { type: Object },
      detailsControls: { type: Object }
    }
  }

więc zmieniłem pliki bootstrap/dist/css/bootstrap.css => js i dodałem do niego:

 export const bootstrapCss = ()=> css`
:root {
--blue....

po tych zmianach mam coś takiego

mport { LitElement, html, css, unsafeCSS } from 'lit-element'

import bootstrapCss from 'bootstrap/dist/css/bootstrap.js'
import bootstrapDT from 'datatables.net-bs4/css/dataTables.bootstrap4.js'
import 'bootstrap'
import 'popper.js'
import 'datatables.net-bs4'
import $ from 'jquery'
import 'datatables.net'

export default class DataTable extends LitElement {
  static get properties () {
    return {
      table: { type: Object },
      options: { type: Object },
      detailsControls: { type: Object }
    }
  }

  constructor () {
    super()
    this.detailsControls = {}
  }

  updated (changedProperties) {
    if (changedProperties.has('options') && this.options !== undefined) {
      if (this.table !== undefined) {
        this.table.destroy()
        $('#table').html('')
      }
      this.table = $(this.shadowRoot.querySelector('#table')).DataTable(this.options)
      let event = new CustomEvent('table-created', {
        detail: {
          table: this.table
        }
      })
      this.dispatchEvent(event)
    }

    if (this.options !== undefined && this.detailsControls !== undefined && (changedProperties.has('options') || changedProperties.has('detailsControls'))) {
      this._disableDetailControls()
      this._enableDetailControls()
    }
  }

  _disableDetailControls () {
    $(this.shadowRoot.querySelector('#table')).off('click')
  }

  _enableDetailControls () {
    Object.keys(this.detailsControls).forEach(className => {
      const format = this.detailsControls[className]
      const self = this
      $(this.shadowRoot.querySelector('#table')).on('click', 'td.' + className, function () {
        const tr = $(this).closest('tr')
        const row = self.table.row(tr)

        if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide()
          tr.removeClass('shown')
        } else {
          // Open this row
          row.child(format(row.data())).show()
          tr.addClass('shown')
        }
      })
    })
  }

  static get styles () {
    return [
     
      css`
      td.details-control {
         
          cursor: pointer;
      }
      tr.shown td.details-control {
         
      }
      `
    ]
  }

  render () {
    return html`<table id="table" class="table table-striped table-bordered" style="width:100%"></table>`
  }
}

ale mi w konsoli krzyczy znowu

The request module '../../jquery/dist/jquery.js' doesn not provide export named 'default' localhost/:1

0

Podstawowe pytanie czy ścieżka do pliku jest prawidłowa.

0

ścieżka jest na bank dobra w node_module/jquery/dist/jquery.js jak zmienie np jqueryk to jest inn błąd Could not resolve import

0

Przepraszam, ale jakoś mi się przypomniał ten post z HN:
https://news.ycombinator.com/item?id=23078000

0

Spróbuj tego:

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax

1 użytkowników online, w tym zalogowanych: 0, gości: 1