Unexpected token: punc (:)

[sebastianpikand]

Hi. I am not using Terser directly, don't know which package is using either, but will try to do my best to explain the issue.

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "",
    "dev": "webpack-dev-server --open --mode development --display-error-details --env.TARGET_ENV=local",
    "build:production": "npm-run-all --sequential clean compile:production --parallel",
    "build:development": "npm-run-all --sequential clean compile:development --parallel",
    "compile:production": "webpack --env.TARGET_ENV=production",
    "compile:development": "webpack --env.TARGET_ENV=development",
    "clean": "rimraf ./dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-papaparse": "^3.8.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^3.1.0",
    "react-table": "^7.5.1",
    "react-table-sticky": "^1.1.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^3.2.0",
    "dotenv-webpack": "^3.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-link-type-plugin": "^1.0.3",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.10.0",
    "node-sass": "^4.13.1",
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2",
    "sass-loader": "^8.0.0",
    "sass-resources-loader": "^2.0.1",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.11.0"
  }
}

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

webpack.config.js

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const Dotenv = require('dotenv-webpack');

const publicFolder = path.join(__dirname, 'public');

module.exports = (env) => {
  const { TARGET_ENV } = env;

  return {
    mode: TARGET_ENV === 'production' ? 'production' : 'development',

    // webpack will take the files from ./src/index
    entry: ['babel-polyfill', './src/index.js'],
    // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
    resolve: {
      extensions: ['.js', '.jsx'],
    },

    output: {
      path: path.join(__dirname, '/dist'),
      filename: './[name].[hash].js',
    },

    module: {
      rules: [
        // we use babel-loader to load our jsx and tsx files
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },

        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
            },
          ],
        },

        {
          test: /\.scss$/,
          use: [
            // fallback to style-loader in development to get HMR
            // production uses extracted .css file for better browser caching
            process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                sourceMap: process.env.NODE_ENV !== 'production',
                importLoaders: 1, //means that it also applies CSS modules on @imported resources.
                modules: {
                  localIdentName:
                    process.env.NODE_ENV !== 'production' ? '[local]__[hash:base64:5]' : '[hash:base64:5]',
                },
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: process.env.NODE_ENV !== 'production',
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: ['./src/style/base/_variables.scss', './src/style/mixins/_mixins.scss'],
              },
            },
          ],
          include: /\.module\.scss$/,
        },

        {
          test: /\.scss$/,
          use: [
            // fallback to style-loader in development to get HMR
            // production uses extracted .css file for better browser caching
            process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                sourceMap: process.env.NODE_ENV !== 'production',
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: process.env.NODE_ENV !== 'production',
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: ['./src/style/base/_variables.scss'],
              },
            },
          ],
          exclude: /\.module\.scss$/,
        },
      ],
    },
    devServer: {
      host: '0.0.0.0',
      contentBase: publicFolder,
      historyApiFallback: true,
      hot: process.env.NODE_ENV !== 'production',
      inline: true,
      port: 3000,
      proxy: {
        '/api': {
          target: {
            host: 'api',
            protocol: 'http:',
            port: 5000,
          },
          secure: false,
        },
      },
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: path.join(__dirname, 'public/index.html'),
        filename: './index.html',
      }),
      new CopyPlugin({
        patterns: [{ from: publicFolder }],
      }),
      new MiniCssExtractPlugin({
        filename: './[name].css',
      }),
      new LinkTypePlugin({
        '*.css': 'text/css',
      }),
      new Dotenv({
        path: `./.env.${TARGET_ENV}`,
      }),
    ],
  };
};

---

the error I get

ERROR in ./main.b770d6ea60a5d80547d9.js from Terser Unexpected token: punc (:) [./main.b770d6ea60a5d80547d9.js:18837,18]

---

Running "build:development": "npm-run-all --sequential clean compile:development --parallel", works fine (i.e. building for non-production env), whilst running "build:production": "npm-run-all --sequential clean compile:production --parallel", produces the error.

How should I go about it and from where exactly is the problem coming? Can't open ./main.[hash].js to inspect line of error, as the file is not created.

[sebastianpikand]

absolutely no idea why this happened but the problem disappeared after I pruned my docker volumes...

[sebastianpikand]

Actually found the issue and has probably nothing to do with docker.

The error should be easily reproducible. One older project used "dotenv-webpack": "^2.0.0",, however, in this bug report I have used "dotenv-webpack": "^3.0.0", which breaks the build process.

[u01jmg3]

@sebastianpikand glad you sourced the problem. I would close this issue though as the issue lies with dotenv-webpack and it can only be fixed there.