CODEWITHSUNDEEP
reactjstypescriptwebpackreact-select
Kay Schneider
Kay Schneider

Reputation: 311

Typescript with react-select module. Build failed

The error happens direct with webpack-dev server and when i try to generate a build.

After some research i added the option noImplicitAny to the ts-config. But this wont resolve my issue i have with the react-select module.

I think i must be missing something in the typescript config or in the webpack config. Because i dont found a related issue with this module.

Maybe someone can give me a hint what i should change in the config or maybe im missing something inside the webpack config.
Actually im new to typescript and react, maybe this is the main problem.

I added the config files and the console error below, maybe im missing something important.

Thanks for your support

versions

Error message from typescript:

ERROR in ./node_modules/react-select/src/components/Menu.js 5:7
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| import {
|   Component,
>   type Element as ReactElement,
|   type ElementRef,
|   type Node,

The current webpack config:

webpack config for project


const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // 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: [

            { test: /\.tsx?$/, loader: "awesome-typescript-loader" , options: {
                    cacheDirectory:false,
                    plugins:['react-hot-loader/babel']
                }},


            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },


    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },


    //Dev server config section
    devServer: {
        contentBase: path.join(__dirname ),
        compress: false,
        watchContentBase: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000,
            ignored: ['node_modules', 'build', 'dist'],
        },
        port: 9000,
        host:"0.0.0.0",
        hot:true
      }
};

TS config:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": false,
        "noEmit": true,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext",
            "es2017"
          ]
    },
    "include": [
        "./src/**/*"
    ]
}

Upvotes: 0

Views: 2058

Answers (2)

Rajitha Udayanga
Rajitha Udayanga

Reputation: 1732

check your import statement and it must be like this.

import Select from "react-select"

Upvotes: 0

Kay Schneider
Kay Schneider

Reputation: 311

I solved the problem now, and i also generated it ;-) ( with support of Webstorm )

That was the problematic code line:

import {NoOptionsMessage} from "react-select/src/components/Menu";

Webstorm can give great support for import statements, but i think sometimes its good to check what webstorm has generated.

shame on me ;-)

Upvotes: 2

Related Questions