search

TypeStrong / ts-loader

TypeScript loader for webpack
https://johnnyreilly.com/ts-loader-goes-webpack-5
MIT License
3.46k stars 431 forks source link

Error i m getting with webpack #1384

Closed skynetjam closed 2 years ago

skynetjam commented 3 years ago

Currently we are getting below error while executing this with webpack

Running webpack ...

F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\webpack\lib\Compilation.js:4571
                                                                if (!inTry) throw err;
                                                                            ^

TypeError: Right-hand side of 'instanceof' is not an object
    at F:\xampp\htdocs\appointdemo\appointBook\node_modules\ts-loader\dist\after-compile.js:68:20
    at Set.forEach (<anonymous>)
    at determineModules (F:\xampp\htdocs\appointdemo\appointBook\node_modules\ts-loader\dist\after-compile.js:67:25)
    at F:\xampp\htdocs\appointdemo\appointBook\node_modules\ts-loader\dist\after-compile.js:32:25
    at F:\xampp\htdocs\appointdemo\appointBook\node_modules\ts-loader\dist\instances.js:198:69
    at Hook.eval [as call] (eval at create (F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\tapable\lib\Hook.js:14:14)
    at F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\webpack\lib\Compilation.js:3046:40
    at eval (eval at create (F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (F:\xampp\htdocs\appointdemo\appointBook\node_modules\@symfony\webpack-encore\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

without webpack and ts-loader its working fine Please check the below code

Package.json

{
  "name": "Appointmento",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^13.0.6",
    "@types/jest": "^26.0.21",
    "@types/node": "^14.14.35",
    "@types/react": "^17.0.3",
    "@types/react-calendar": "^3.4.0",
    "@types/react-dom": "^17.0.2",
    "body-parser": "^1.19.0",
    "clsx": "^1.1.1",
    "eslint": "^7.26.0",
    "formik": "^2.2.6",
    "moment-timezone": "^0.5.33",
    "react": "^17.0.1",
    "react-calendar": "^3.4.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "socket.io-client": "^4.0.1",
    "typescript": "^4.2.3",
    "use-debounce": "^6.0.0",
    "yup": "^0.32.8"
  },
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress",
    "lint": "eslint *.{js,ts,tsx} --fix"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:3001",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@symfony/webpack-encore": "^1.6.1",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.23.0",
    "@typescript-eslint/parser": "^4.23.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.1.3",
    "lint-staged": "^10.5.4",
    "prettier": "^2.3.0",
    "ts-loader": "9.0.0"
  },
  "lint-staged": {
    "assets/**/*.{tsx, ts, js,jsx}": [
      "eslint . --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

My webpack.config.js

const { join } = require('path')
const Encore = require('@symfony/webpack-encore')

/*
|--------------------------------------------------------------------------
| Encore runtime environment
|--------------------------------------------------------------------------
*/
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

/*
|--------------------------------------------------------------------------
| Output path
|--------------------------------------------------------------------------
|
| The output path for writing the compiled files. It should always
| be inside the public directory, so that AdonisJS can serve it.
|
*/
Encore.setOutputPath('./public/build')

/*
|--------------------------------------------------------------------------
| Public URI
|--------------------------------------------------------------------------
|
| The public URI to access the static files. It should always be
| relative from the "public" directory.
|
*/
Encore.setPublicPath('/build')

/*
|--------------------------------------------------------------------------
| Entrypoints
|--------------------------------------------------------------------------
|
| Entrypoints are script files that boots your frontend application. Ideally
| a single entrypoint is used by majority of applications. However, feel
| free to add more (if required).
|
| Also, make sure to read the docs on "Assets bundler" to learn more about
| entrypoints.
|
*/
Encore.addEntry('app', './assets/index.js')

/*
|--------------------------------------------------------------------------
| Copy assets
|--------------------------------------------------------------------------
|
| Since the edge templates are not part of the Webpack compile lifecycle, any
| images referenced by it will not be processed by Webpack automatically. Hence
| we must copy them manually.
|
*/
// Encore.copyFiles({
//   from: './resources/images',
//   to: 'images/[path][name].[hash:8].[ext]',
// })

/*
|--------------------------------------------------------------------------
| Split shared code
|--------------------------------------------------------------------------
|
| Instead of bundling duplicate code in all the bundles, generate a separate
| bundle for the shared code.
|
| https://symfony.com/doc/current/frontend/encore/split-chunks.html
| https://webpack.js.org/plugins/split-chunks-plugin/
|
*/
// Encore.splitEntryChunks()

/*
|--------------------------------------------------------------------------
| Isolated entrypoints
|--------------------------------------------------------------------------
|
| Treat each entry point and its dependencies as its own isolated module.
|
*/
Encore.disableSingleRuntimeChunk()

/*
|--------------------------------------------------------------------------
| Cleanup output folder
|--------------------------------------------------------------------------
|
| It is always nice to cleanup the build output before creating a build. It
| will ensure that all unused files from the previous build are removed.
|
*/
Encore.cleanupOutputBeforeBuild()

/*
|--------------------------------------------------------------------------
| Source maps
|--------------------------------------------------------------------------
|
| Enable source maps in production
|
*/
Encore.enableSourceMaps(!Encore.isProduction())

/*
|--------------------------------------------------------------------------
| Assets versioning
|--------------------------------------------------------------------------
|
| Enable assets versioning to leverage lifetime browser and CDN cache
|
*/
Encore.enableVersioning(Encore.isProduction())

/*
|--------------------------------------------------------------------------
| Configure dev server
|--------------------------------------------------------------------------
|
| Here we configure the dev server to enable live reloading for edge templates.
| Remember edge templates are not processed by Webpack and hence we need
| to watch them explicitly and livereload the browser.
|
*/
Encore.configureDevServerOptions((options) => {
    /**
     * Normalize "options.static" property to an array
     */
    if (!options.static) {
        options.static = []
    } else if (!Array.isArray(options.static)) {
        options.static = [options.static]
    }

    /**
     * Enable live reload and add views directory
     */
    options.liveReload = true
    options.static.push({
        directory: join(__dirname, './assets'),
        watch: true,
    })
})

/*
|--------------------------------------------------------------------------
| CSS precompilers support
|--------------------------------------------------------------------------
|
| Uncomment one of the following lines of code to enable support for your
| favorite CSS precompiler
|
*/
// Encore.enableSassLoader()
// Encore.enableLessLoader()
// Encore.enableStylusLoader()

/*
|--------------------------------------------------------------------------
| CSS loaders
|--------------------------------------------------------------------------
|
| Uncomment one of the following line of code to enable support for
| PostCSS or CSS.
|
*/
// Encore.enablePostCssLoader()
// Encore.configureCssLoader(() => {})
Encore.enableTypeScriptLoader()

Encore.enableReactPreset()
/*
|--------------------------------------------------------------------------
| Enable Vue loader
|--------------------------------------------------------------------------
|
| Uncomment the following lines of code to enable support for vue. Also make
| sure to install the required dependencies.
|
*/
// Encore.enableVueLoader(() => {}, {
//   version: 3,
//   runtimeCompilerBuild: false,
//   useJsx: false
// })

/*
|--------------------------------------------------------------------------
| Configure logging
|--------------------------------------------------------------------------
|
| To keep the terminal clean from unnecessary info statements , we only
| log warnings and errors. If you want all the logs, you can change
| the level to "info".
|
*/
const config = Encore.getWebpackConfig()
config.infrastructureLogging = {
    level: 'warn',
}
config.stats = 'errors-warnings'

/*
|--------------------------------------------------------------------------
| Export config
|--------------------------------------------------------------------------
|
| Export config for webpack to do its job
|
*/
module.exports = config

Tsconfig.json

{
    "compilerOptions": {
        "target": "es2020",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react-jsx"
    },
    "include": ["assets"],
    "exclude": ["node_modules"],
    "compileOnSave": false,
    "buildOnSave": false
}

Any kind of help will be highly appricated

appzuka commented 3 years ago

@skynetjam,

It is hard to see what is wrong from just a few files. If you can submit a minimal repository that allows the error you are seeing to be reproduced I will try to take a look. I don't use symfony so it may be hard to help you but you could start with the symfony documentation on how to integrate TypeScript in a project:

https://symfony.com/doc/current/frontend/encore/typescript.html

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 2 years ago

Closing as stale. Please reopen if you'd like to work on this further.