Webpack 3.11 - ExtractTextPlugin - You may need an appropriate loader to handle this file type - Unexpected token

Question

I like the error messages, they are very helpful (irony off)

Error-Message:

webpack Hash: 9ff6bc2b8b3cb641bb93 Version: webpack 3.11.0 Time: 483ms Asset Size Chunks Chunk Names bundle.js 2.83 kB 0 [emitted] main bundle.js.map 2.45 kB 0 [emitted] main index.html 188 bytes [emitted] [0] ./src/index.ts 320 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.ts Module parse failed: Unexpected token (50:44) You may need an appropriate loader to handle this file type. | setTimeout(() => { | getComponent().then(component => { |
document.body.appendChild(component as HTMLDivElement); |
}).catch((e) => { | console.log(e); Child html-webpack-plugin for "index.html": 1 asset 2 (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules

webpack.config.js, example code taken from webpack.js.org v3.11

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

Packages.json

  "dependencies": {
    "@types/extract-text-webpack-plugin": "^3.0.1",
    "@types/html-webpack-plugin": "^2.30.2",
    "@types/node": "^9.4.5",
    "@types/source-map": "^0.5.2"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.0",
    "@types/lodash": "^4.14.102",
    "@types/webpack": "^3.8.7",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.3.1",
    "less": "^3.0.0",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.5",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "webpack": "^3.11.0"
  },

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "rootDir": "src",
    "sourceMap": true,
    "lib": [    
      "dom",
      "es5",
      "scripthost",
      "es2015.promise"
    ]
  }
}

It looks like it's failing on index.ts. Have you tried adding a rule for ts-loader? E.g., {test: /\.ts$/, use: 'ts-loader'}. More details on the GitHub page. — Mike Hill
the .ts file is fine, it is something with the configuration... the error messages are misleading. It could also spit out "New York, the weather is shiny", this would be the equivalent of the above error message... — Legends

Legends Legends · Accepted Answer · 2018-02-15T00:35:28

Works with Webpack v3.11

I made some changes to the webpack.config.js, take a look below:

const {
    join
} = require('path')


const webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin")

const extractLESS = new ExtractTextPlugin({
    filename: 'stylesheets/[name]-two.css',
    disable: false,
    allChunks: true
});
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');

module.exports = {

    devtool: 'inline-source-map',

    entry: join(__dirname, 'src/index'),

    plugins: [
        extractCSS,
        extractLESS 
    ],

    devtool: "source-map",

    output: {
        path: join(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: "/dist/",
        devtoolModuleFilenameTemplate: '[absolute-resource-path]'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.less']
    },

    module: {
        rules: [{
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            }, {
                test: /\.less$/i,
                use: extractLESS.extract(['css-loader', 'less-loader'])
            },
            {
                test: /\.ts$/,
                loaders: ['ts-loader']
            }             
        ],

    }
}

And in my index.ts file, I reference my less/css file(s):

Index.ts

   import "./css/style.css"
   import "./css/test.less"

Webpack 3.11 - ExtractTextPlugin - You may need an appropriate loader to handle this file type - Unexpected token

1 Answers