web-dev-qa-db-fra.com

Jeton inattendu tapuscrit / nœud *

J'essaie de mettre à jour le backend de mon nœud d'application en TypeScript et je continue de rencontrer cette erreur de syntaxe:

/Users/Shared/website/src/server.ts:1
(function (exports, require, module, __filename, __dirname) { import * 
as express from 'express';
                                                                 ^

SyntaxError: Unexpected token *

J'ai mon tsconfig/webpack/server, etc configuré comme suit:

server.ts

import * as express from 'express';
import * as path from 'path';

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res, next){
    res.sendFile(path.resolve(__dirname, '/public', 'index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}!`));

webpack.config.json:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, outputDirectory)
    },
    mode: 'development',

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-TypeScript-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
    },

    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
          template: './public/index.html',
          favicon: './public/favicon.gif'
        }),
        new CopyWebpackPlugin([
            { from: 'public' }
        ])
    ]
};

tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ],
}

Le processus de construction réussit, mais j'ai frappé la syntaxError lors de l'exécution. J'ai un frontal réagissant également configuré en utilisant TypeScript/tsx et cela fonctionne très bien. Il semble que je rencontre des problèmes avec les fichiers server.ts/node. Je suis très nouveau pour essayer de tout configurer, mais je voulais m'exercer à créer un site avec de nombreuses technologies (react/node/TypeScript/sass/webpack/etc). Jusqu'à présent, j'ai tout sauf la relation TypeScript/nœud.

node.jstypescriptwebpackcommonjs
6
jajabarr

J'ai fait face au même problème avant. Je le résous en changeant le 'call' d'importation:

De:

import * as express from 'express';

À:

const express = require('express');
1
Rodrigo Aires

Je suis donc tombé sur this post sur github où, fondamentalement, il y a deux sortes de méthodes de travail présentées puisque vous utilisez un outil de regroupement ciblé sur es6 add

"allowSyntheticDefaultImports": true à ”compilerOptions”

Ou changer

import express from "express";

à

import express = require('express');
0
Vaibhav Kumar Goyal

Comme d'autres l'ont indiqué, le problème est que votre tsconfig.json n'est pas appliqué à server.ts. Vous avez omis des détails importants de votre configuration, c'est pourquoi d'autres ne peuvent pas reproduire ce problème.

J'ai une bonne idée de ce qu'est le problème et ayant moi-même lutté avec ce problème identique, je vais expliquer ma supposition ici dans l'espoir d'aider une autre pauvre âme à être tourmentée par ce problème.

Le problème de base est que le code de votre serveur se trouve dans une arborescence différente de votre code de réaction. C'est pourquoi le tsconfig.json ne lui est pas appliqué car (je crois) il est en dehors du chemin "./src/" spécifié. (Peut-être "./website/src/").

Vous ne nous avez pas montré le fichier package.json mais très probablement l'entrée du serveur est quelque chose comme "serveur": "ts-node ./website/src/server.ts"

Pour vérifier que l'application tsconfig.json est bien le problème, essayez ceci à partir de la ligne de commande ...

$ ts-node -O '{\"module\":\"commonjs\"}' ./website/src/server.ts

Les chances sont que les choses commenceront à fonctionner. Maintenant, la solution est probablement aussi simple que d'ajouter un autre chemin d'accès à votre fichier tsconfig.json.

0
AQuirky

Cela peut se produire si votre tsconfig.json n'est pas à l'origine de votre projet. Configurez webpack pour pointer vers votre fichier de configuration cible (que vous pouvez modifier avec des variables pour pointer vers les configurations dev et prod).

https://github.com/TypeStrong/ts-loader

S'il est défini, analysera le fichier de configuration TypeScript avec le chemin absolu donné comme chemin de base. Par défaut, le répertoire du fichier de configuration est utilisé comme chemin de base. Les chemins relatifs dans le fichier de configuration sont résolus par rapport au chemin de base lors de l'analyse. Le contexte d'option permet de définir l'option configFile sur un chemin autre que la racine du projet (par exemple un package NPM), tandis que le chemin de base pour ts-loader peut rester la racine du projet.

Essayez de modifier votre webpack.config.js fichier pour avoir ceci:

module.exports = {
  ...
  module: {
    rules: [
      {
        options: {
          configFile: path.join(__dirname, "tsconfig.json")
        }
      }
    ]
  }
};
0
nwayve