xerebede / gridsome-plugin-typescript Goto Github PK

View Code? Open in Web Editor NEW

8.0 8.0 6.0 258 KB

Typescript plugin for Gridsome

License: MIT License

JavaScript 100.00%

gridsome-plugin-typescript's People

Contributors

Stargazers

Watchers

Forkers

manuelsch calebjclark hebilicious karolsw3 vsimko misaka-0x447f

gridsome-plugin-typescript's Issues

vue path not resolving to correct location

We use yarn's workspace feature, which doesn't always put node modules in ./node_modules of working directory. As a result, line 15-16 of index.js is resolving to incorrect path:

config.resolve.alias
  .set('vue$', resolve(process.cwd(), './node_modules/vue/dist/vue.esm.js'));

Changing the command from path.resolve to require.resolve ensures that it always finds the correct module path:

config.resolve.alias
  .set('vue$', require.resolve('vue/dist/vue.esm.js'));

Can you push a new version with this change? Would you like me to submit a pull request?

Loader doesn't resolve .ts files properly

Hi,

whenever I try to import something from within a .vue file, gridsome build fails with the following error:

yarn run v1.13.0
$ gridsome build
Gridsome v0.6.4

Initializing plugins...
Initialize - 0.96s
Load sources - 0s
Create GraphQL schema - 0.12s
Create pages and templates - 0.05s
Generate code - 0.03s
Bootstrap finish - 1.16s
Execute GraphQL (0 queries) - 0s
Write page data (0 files) - 0s
(undefined) ./src/pages/Index.vue?vue&type=script&lang=ts& (./node_modules/ts-loader??ref--15-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pag
es/Index.vue?vue&type=script&lang=ts&)
Module not found: Error: Can't resolve '~/util/validate-email' in 'C:\Development\TestProjects\gridsome-ts\src\pages'
resolve '~/util/validate-email' in 'C:\Development\TestProjects\gridsome-ts\src\pages'
  Parsed request is a module
  using description file: C:\Development\TestProjects\gridsome-ts\package.json (relative path: ./src/pages)
    aliased with mapping '~': 'C:\Development\TestProjects\gridsome-ts\src' to 'C:\Development\TestProjects\gridsome-ts\src/util/validate-email'
      using description file: C:\Development\TestProjects\gridsome-ts\package.json (relative path: ./src/pages)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: C:\Development\TestProjects\gridsome-ts\package.json (relative path: ./src/util/validate-email)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            C:\Development\TestProjects\gridsome-ts\src\util\validate-email doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            C:\Development\TestProjects\gridsome-ts\src\util\validate-email.js doesn't exist
          .vue
            Field 'browser' doesn't contain a valid alias configuration
            C:\Development\TestProjects\gridsome-ts\src\util\validate-email.vue doesn't exist
          ts
            Field 'browser' doesn't contain a valid alias configuration
            C:\Development\TestProjects\gridsome-ts\src\util\validate-emailts doesn't exist
          as directory
            C:\Development\TestProjects\gridsome-ts\src\util\validate-email doesn't exist
[C:\Development\TestProjects\gridsome-ts\src\util\validate-email]
[C:\Development\TestProjects\gridsome-ts\src\util\validate-email.js]
[C:\Development\TestProjects\gridsome-ts\src\util\validate-email.vue]
[C:\Development\TestProjects\gridsome-ts\src\util\validate-emailts]
 @ ./src/pages/Index.vue?vue&type=script&lang=ts& (./node_modules/ts-loader??ref--15-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Index.
vue?vue&type=script&lang=ts&) 21:0-50 30:15-28
 @ ./src/pages/Index.vue?vue&type=script&lang=ts&
 @ ./src/pages/Index.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi ./node_modules/gridsome/app/entry.client.js
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

This error is related to xerebede/gridsome-starter-typescript#3

Notice how it tries to resolve the .ts import: C:\Development\TestProjects\gridsome-ts\src\util\validate-emailts doesn't exist. It seems the file extension for ts files is incorrect and should be ".ts" instead of "ts"

Hot reload issues when using custom typings for third party libraries

I was having issues hot reloading with this plugin for typescript support. Started getting errors that the TSL could not find type declarations even after adding necessary d.ts files for the third party libraries.

The app would load up fine using gridsome develop however any subsequent saves to files which made use of the libraries would cause errors like this: Could not find a declaration file for module ... and prevent the hot reload.

I resolved this by adding { transpileOnly: true } to the webpack config:

chainWebpack: (config) => {
    config.module
      .rule('typescript')
      .use()
      .loader('ts-loader')
      .options({ transpileOnly: true })
  },

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.