New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt Edge - Issue when running/building the project #48

Closed
naveensky opened this Issue May 23, 2018 — with CMTY · 4 comments

Comments

Projects
None yet
3 participants
Copy link

naveensky commented May 23, 2018 — with CMTY

Version

latest

Reproduction link

[not required](not required)

Steps to reproduce

  • Create a normal typescript project by vue init nuxt-community/typescript-template my-project
  • Replace nuxt dependencies with nuxt-edge
  • Replace ts-loader with latest version of ts-loader (compatible with webpack 4.x)
  • Run command nuxt dev

What is expected ?

The app to start normally as per this https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67 which states no changes required for updating a nuxt 1.x project with nuxt 2.x project

What is actually happening?

Receiving an error

 INFO  Building project

✔ success Builder initialized
✔ success Nuxt files generated
✖ error TypeError: Cannot set property 'ts' of undefined
  at Builder.extendBuild.config (/Users/naveen/Downloads/nuxt/ts/modules/typescript.js:24:33)
  at Builder.<anonymous> (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:142:17)
  at WebpackClientConfig.config (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11310:56)
  at Builder.webpackBuild (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11881:56)
  at Builder.build (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11592:16)
  at <anonymous>
This bug report is available on Nuxt.js community (#c38)

@cmty cmty bot added the cmty:bug-report label May 23, 2018

@haleksandre

This comment has been minimized.

Copy link

haleksandre commented Jun 12, 2018

The reason for this error is because Nuxt edge uses webpack 4 & the newer version of vue-loader. vue-loader changed how it handles components & Nuxt adjusted their webpack config accordingly. You can see the webpack config changes here.

Because of this the object reference here doesn't exist in Nuxt edge.

To fix it you must adjust the Typescript module ~/modules/typescript.js. So it would look something like so:

module.exports = function () {
  // Add .ts & .tsx extension to Nuxt
  this.nuxt.options.extensions.push('ts', 'tsx')

  // Extend webpack build
  this.extendBuild(config => {
    // Add TypeScript
    config.module.rules.push({
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options: { appendTsSuffixTo: [/\.vue$/] }
    })

    // Add .ts extension in webpack resolve
    if (! config.resolve.extensions.includes('.ts')) {
      config.resolve.extensions.push('.ts')
    }

    // Add .tsx extension in webpack resolve
    if (! config.resolve.extensions.includes('.tsx')) {
      config.resolve.extensions.push('.tsx')
    }
  })
}

You'll also have to update ts-loader to version 4.x since version 3.x only support webpack 2 | 3.

After making those changes Nuxt edge should run without any issues.

@AndrewBogdanovTSS

This comment has been minimized.

Copy link

AndrewBogdanovTSS commented Jul 3, 2018

Just wanted to create same bug report! To make it work I just checked whether the object exists and if not - create a new one before pushing 'ts' extension into it.

if (rule.loader === 'vue-loader') {
          if(!rule.options.loaders)rule.options.loaders = {}
        rule.options.loaders.ts = tsLoader
      }

but I guess @haleksandre provided a better solution, I'm only curious about this part of the config:

// Add TypeScript
    config.module.rules.push({
      test: /\.tsx?$/,

why are we only testing for .tsx and not for .ts also?

@haleksandre

This comment has been minimized.

Copy link

haleksandre commented Jul 4, 2018

@AndrewBogdanovTSS It is testing for both. ? in regex means zero or one of whatever is before, in this case x. So the test will match .ts as well as .tsx.

If you don't plan on using .tsx you can remove x? from the test regex.

@naveensky

This comment has been minimized.

Copy link
Author

naveensky commented Jul 4, 2018

I can confirm this works :). Great thanks @haleksandre.

@naveensky naveensky closed this Jul 4, 2018

yinm added a commit to yinm/nuxtjs-sandbox that referenced this issue Sep 23, 2018

yinm added a commit to yinm/nuxtjs-sandbox that referenced this issue Sep 23, 2018

@otwm otwm referenced this issue Oct 3, 2018

Closed

new typescript #1

yinm added a commit to yinm/yinm.github.io that referenced this issue Nov 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment