bufferhead-code / nightowl

Add Dark Mode to your website semi-automatically.
198 stars 16 forks source link

Not working with npm install #15

Closed HackedStor closed 8 months ago

HackedStor commented 8 months ago

Hello thanks you for providing this magical tool.

I used it in my project without npm (cdn) and works perfectly but with npm it's not working.

I have an error in the console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

image

Do you have some informations about that issue ?

mAmineChniti commented 8 months ago

hey @HackedStor can you give me the snippet of code where you import nightowl, and what framework are you using it with or is it just a simple html basis?

Onatcer commented 8 months ago

do you use some sort of bundler?

HackedStor commented 8 months ago

hey @HackedStor can you give me the snippet of code where you import nightowl, and what framework are you using it with or is it just a simple html basis?

Hey so I'm using it with a simple html basis.

do you use some sort of bundler?

What do you mean by bundler

HackedStor commented 8 months ago

Sorry I forgot to give you the code and the way I using it so first I install with npm and I have a new folder node_modules. In this I have the folder of nightowl. Then I coppy paste the code in the Readme (doc for me now) in the github and change the path So here is the snippet code in the doc


<script type="module">
    import { createNightowl } from '@bufferhead/nightowl'

    createNightowl({
        defaultMode: 'dark',
        toggleButtonMode: 'newState'
    })
</script>
################################
# And here the snippet code for my project
################################

<script type="module">
    import { createNightowl } from '/node_modules/@bufferhead/nightowl'

    createNightowl({
        defaultMode: 'dark',
        toggleButtonMode: 'newState'
    })
</script>
Onatcer commented 8 months ago

You can try doing

import { createNightowl } from './node_modules/@bufferhead/nightowl/dist/nightowl.js';

this will directly import the minified JS. I'll clarify this in the readme but the npm install is mainly for usage with Bundlers Like Vite, Rollup, Webpack etc.

HackedStor commented 8 months ago

import { createNightowl } from './node_modules/@bufferhead/nightowl/dist/nightowl.js';

Hey I tried this but I have a new error :

Failed to load resource: the server responded with a status of 404 (Not Found)

Onatcer commented 8 months ago

do you have a package.json and a node_modules folder in the same directory?

HackedStor commented 8 months ago

do you have a package.json and a node_modules folder in the same directory?

Sorry I forgot to run the npm command. 😅

The code i have is this one


    <script type="module">
        import { createNightowl } from './node_modules/@bufferhead/nightowl/dist/nightowl.js';

        createNightowl({
            defaultMode: 'dark',
            toggleButtonMode: 'newState'
        })
    </script>

Thx you