DockYard / svelte-inline-compile

27 stars 1 forks source link

typeerror "is not a function" #6

Closed JonasFocke01 closed 2 years ago

JonasFocke01 commented 2 years ago

Hi,

I did everything your readme says to install svelte-inline-compile, but when i try to run npm test, the test failed with the Error TypeError: (0, svelte_inline_comile_1.default) is not a function Running npm run dev now spilles this error svelte-inline-compile doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module

npm install --save-dev svelte-inline-compile ran with no errors

This is my .babelrc file module.exports = { "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]], "plugins": ["svelte-inline-compile"] }

What am i doing wrong? What do you need from me to understand what im trying to say?

drewchandler commented 2 years ago

Hi @JonasFocke01, I will get time to investigate this on Friday. Can you share your package.json as well? Thanks!

JonasFocke01 commented 2 years ago

Hi @drewchandler, here is my package.json { "name": "kundenportal", "version": "0.0.2", "custom": { "node-version": "16.10.0" }, "scripts": { "dev": "env-cmd svelte-kit dev --port 5000", "build": "npm run test && env-cmd svelte-kit build", "package": "svelte-kit package", "preview": "env-cmd svelte-kit preview", "prepare": "svelte-kit sync", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .", "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .", "test": "jest src --coverage --collectCoverageFrom=src/lib/**/*.svelte --silent", "test:watch": "npm run test -- --watch" }, "setupFilesAfterEnv": [ "@testing-library/jest-dom/extend-expect" ], "devDependencies": { "@babel/preset-env": "^7.18.6", "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "v1.0.0-next.347", "@testing-library/jest-dom": "^5.16.4", "@testing-library/svelte": "^3.1.3", "@types/babel__core": "^7.1.19", "@zerodevx/svelte-toast": "^0.7.1", "autoprefixer": "^10.4.4", "babel-jest": "^28.1.2", "babel-plugin-svelte-inline-compile": "^0.1.0", "jest": "^28.1.1", "jest-environment-jsdom": "^28.1.1", "jest-fetch-mock": "^3.0.3", "postcss": "^8.4.12", "prettier": "^2.5.1", "prettier-plugin-svelte": "^2.5.0", "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-inline-compile": "^0.1.0", "svelte-jester": "^2.3.2", "svelte-preprocess": "^4.10.7", "tailwindcss": "^3.0.23", "ts-jest": "^28.0.5", "tslib": "^2.3.1", "typescript": "~4.6.2" }, "type": "module", "dependencies": { "date-fns": "^2.28.0", "env-cmd": "^10.1.0", "js-sha256": "^0.9.0", "mongodb": "^4.6.0", "node-fetch": "^3.2.6" } } And here is my jest.config.cjs module.exports = { transform: { '^.+\\.js$': 'babel-jest', // '^.+\\.svelte$': 'svelte-jester', '^.+\\.svelte$': [ 'svelte-jester', { preprocess: true } ], '^.+\\.ts$': 'ts-jest' }, moduleFileExtensions: ['js', 'ts', 'svelte'], coverageReporters: ['html', 'text-summary'], moduleNameMapper: { '^\\$lib(.*)$': '<rootDir>/src/lib$1' }, automock: false, setupFiles: ['./setupJest.js'], testTimeout: 60000 }; Here is my svelte.config.js ` import adapter from '@sveltejs/adapter-auto'; import preprocess from 'svelte-preprocess';

/* @type {import('@sveltejs/kit').Config} / const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(),

kit: { adapter: adapter() } };

export default config; `

I also have this little js file setupJest.js with only one line: require('jest-fetch-mock').enableMocks();

drewchandler commented 2 years ago

Hi @JonasFocke01,

I have fixed the svelte-inline-compile doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module warning and published a new version on the npm package.

As for the error you are seeing, are you using TypeScript for your tests? If so, you'll need to use babel-jest to transform them, not ts-jest.

Can you try changing your jest.config.cjs file's transform to the following?

  transform: {
    "^.+\\.[j|t]s$": "babel-jest",
    "^.+\\.svelte$": ["svelte-jester", { preprocess: true }],
  },

Please let me know if this helps you!

JonasFocke01 commented 2 years ago

Hey @drewchandler, The Error with cjs - esmoduleis indeed fixed now! Thank you for that! Unfortunately the other errors have transformed a bit. when running npm run test, it complains about ts tokens, and that is not fixed with you suggestion of altering the transform section. when running npm run dev, the console spills this error multiple times failed to load module for ssr: /.svelte-kit/runtime/app/Stores. What is that and how can i fix this?

drewchandler commented 2 years ago

Hi @JonasFocke01, I am not quite sure what is going on here. Is your project available on GitHub? If so, I can try pulling it down to see what is up.

JonasFocke01 commented 2 years ago

I tested a bit further and my problems were related to other issues. This is fixed. Thank you :+1: