title: npm run build fails in bitbucket pipeline because it can't resolve some files
body: <p>I made a react-app which I ejected. In my component file <code>Grid.jsx</code> there is :
  <code>import "./grid.scss";</code>.</p>
  
  <p>However, when I build with <code>npm run build:dev</code>, I have an error : <code>ERROR in ./src/App/components/wall/grid/Grid.jsx
  Module not found: Error: Can't resolve './grid.scss'</code>.</p>
  
  <p>I don't undestand because both files are in the same folder. Also, what is strange is that if I do my script <code>npm run build:dev</code> locally on my mac, everything works.</p>
  
  <p>Can somebody help me find the error please? Thank you</p>
  
  <p>Here is the full error :</p>
  
  <pre><code>+ npm run build:dev
  [13:39:06] Starting 'build'...
  [13:39:06] Starting 'clean'...
  [13:39:06] Finished 'clean' after 12 ms
  [13:39:06] Starting 'copy'...
  [13:39:06] Finished 'copy' after 22 ms
  [13:39:06] Starting 'bundle'...
  (node:176) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
  Version: webpack 4.29.0
  Time: 3609ms
                                Asset      Size   Chunks             Chunk Names
         main.5f3b72bf84d173109fc1.js  1.96 MiB     main  [emitted]  main
     main.5f3b72bf84d173109fc1.js.map   1.9 MiB     main  [emitted]  main
      vendors.5f3b72bf84d173109fc1.js   278 KiB  vendors  [emitted]  vendors
  vendors.5f3b72bf84d173109fc1.js.map   289 KiB  vendors  [emitted]  vendors
  ERROR in ./src/App/components/wall/grid/Grid.jsx
  Module not found: Error: Can't resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
  resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
    using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid)
      Field 'browser' doesn't contain a valid alias configuration
      using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid/grid.scss)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
        .web.js
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json doesn't exist
        .web.jsx
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx doesn't exist
        .scss
          Field 'browser' doesn't contain a valid alias configuration
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss doesn't exist
        as directory
          /opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx]
  [/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss]
   @ ./src/App/components/wall/grid/Grid.jsx 45:0-22
   @ ./src/App/components/wall/Wall.js
   @ ./src/App/App.js
   @ ./src/index.js
  </code></pre>
  
  <p>Here is my steps of the pipeline :</p>
  
  <pre><code>pipelines:
    branches:
     develop:
          - step:
              name: Build Dev
              caches:
                - node
              script: # Modify the commands below to build your repository.
              - node -v
              - npm set progress=false &amp;&amp; npm install
              - npm test
              - npm run build:dev
              artifacts:
               - build/**
  </code></pre>
  
  <p>And here is my webpack config:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  
  // import React from 'react';   
  // import ReactDOM from 'react-dom';
  // plugins
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const AutoCleanBuildPlugin = require('webpack-auto-clean-build-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  const WebpackChunkHash = require('webpack-chunk-hash');
  const AssetsWebpackPlugin = require('assets-webpack-plugin');
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  const JavaScriptObfuscator = require('webpack-obfuscator');
  const BuildInfo = require('./tools/build-info');
  const version = process.env.RELEASE_TAG || BuildInfo.releaseTag;
  // Get environment variables to inject into our app.
  const getClientEnvironment = require('./config/env');
  const env = getClientEnvironment('');
  const DEBUG = !process.argv.includes('--production') &amp;&amp; process.env.NODE_ENV !== 'production';
  const ANALYSER = process.argv.includes('--analyse');
  const VERBOSE = process.argv.includes('--verbose');
  const GLOBALS = {
    'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
    __DEV__: DEBUG
  };
  //
  const config = {
      mode: DEBUG ? 'development' : 'production',
  
      // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
      // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
      devtool: 'cheap-module-source-map',
      // These are the "entry points" to our application.
      // This means they will be the "root" imports that are included in JS bundle.
      // The first two entry points enable "hot" CSS and auto-refreshes for JS.
      // context: path.resolve(__dirname, 'src'),
      entry: {
        main: path.resolve(__dirname, './src/index.js'),
        vendors: ['react', 'react-redux', 'redux', 'react-router']
      },
  
      resolve: {
        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', ".scss"],
      },
      // resolve: {
      //   extensions: ['.js', '.jsx']
      // },
  
      output: {
        path: path.resolve(__dirname, './build/public/assets'),
        publicPath: './assets/',
        sourcePrefix: '  ',
        filename: '[name].[hash].js',
      },
  
      target: 'web',
  
      stats: {
        // fallback value for stats options when an option is not defined (has precedence over local webpack defaults)
        all: undefined,
  
        // Add asset Information
        assets: true,
  
        // Sort assets by a field
        // You can reverse the sort with `!field`.
        assetsSort: "field",
  
        // Add build date and time information
        builtAt: false,
  
        // Add information about cached (not built) modules
        cached: false,
  
        // Show cached assets (setting this to `false` only shows emitted files)
        cachedAssets: false,
  
        // Add children information
        children: false,
  
        // Add chunk information (setting this to `false` allows for a less verbose output)
        chunks: false,
  
        // Add namedChunkGroups information
        chunkGroups: false,
  
        // Add built modules information to chunk information
        chunkModules: false,
  
        // Add the origins of chunks and chunk merging info
        chunkOrigins: false,
  
        // Sort the chunks by a field
        // You can reverse the sort with `!field`. Default is `id`.
        chunksSort: "field",
  
        // `webpack --colors` equivalent
        colors: true,
  
        // Display the distance from the entry point for each module
        depth: false,
  
        // Display the entry points with the corresponding bundles
        entrypoints: false,
  
        // Add --env information
        env: false,
  
        // Add errors
        errors: true,
  
        // Add details to errors (like resolving log)
        errorDetails: true,
  
        // Add the hash of the compilation
        hash: false,
  
        // Set the maximum number of modules to be shown
        maxModules: 15,
  
        // Add built modules information
        modules: false,
  
        warnings: false,
      },
  
      module: {
        strictExportPresence: true,
        rules: [
             // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            //  { test: /\.tsx?$/, loader: "awesome-typescript-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?url=false", // translates CSS into CommonJS
              "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
          },
          {
            test: /\.css$/,
            use: [
              "style-loader", // creates style nodes from JS strings
              "css-loader?url=false", // translates CSS into CommonJS
            ]
          },
          {
            test: /\.jsx?$/,
            loader: 'babel-loader', /**/
            include: [
              path.resolve(__dirname, 'src'),
            ],
            query: {
              // https://github.com/babel/babel-loader#options
              cacheDirectory: DEBUG,
  
              // https://babeljs.io/docs/usage/options/
              babelrc: false,
              presets: [
                'react',
                'es2015',
                'stage-0',
              ],
              plugins: [
                'transform-runtime',
                [
                  'transform-react-remove-prop-types',
                  'transform-react-constant-elements',
                  'transform-react-inline-elements',
                ],
              ],
            },
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: 'url-loader?limit=100000'
          },
          {
            test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
            use: 'url-loader?limit=100000'
          },
          {
            test: /\.json$/,
            loader: 'json-loader'
          },
          {
            test: /\.txt$/,
            loader: 'raw-loader'
          },
        ]
      },
      // devtool: 'source-map',
      plugins: [
        new CaseSensitivePathsPlugin(),
        // webpack 3 scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // Define free variables
        // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
        new webpack.DefinePlugin({
          ...GLOBALS,
          'process.env.BROWSER': true,
          'process.env.API_URL': JSON.stringify(process.env.API_URL),
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
          'process.env.VERSION': JSON.stringify(version),
          ...env.stringified
        }),
        //
        new ExtractTextPlugin({
          filename: '[name]-[chunkhash].css',
          disable: false,
          allChunks: true
        }),
        // Plugin to replace a standard webpack chunk hashing with custom (md5) one.
        new WebpackChunkHash({
          algorithm: 'md5'
        }),
        // save stats
        new AssetsWebpackPlugin({
          filename: 'build/public/webpack-assets.json'
        })
      ],
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize:
            30000,
          maxSize:
            0,
          minChunks:
            1,
          maxAsyncRequests:
            5,
          maxInitialRequests:
            3,
          automaticNameDelimiter:
            '~',
          name:
            true,
          cacheGroups:
            {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority:
                  -10
              }
              ,
              default:
                {
                  minChunks: 2,
                  priority:
                    -20,
                  reuseExistingChunk:
                    true
                }
            }
        }
        ,
  
        occurrenceOrder: DEBUG,
        minimizer:
          [
            new UglifyJsPlugin({
              parallel: true,
              sourceMap: false,
              uglifyOptions: {
                mangle: false,
                beautify: DEBUG,
                minimize: !DEBUG,
                // Eliminate comments
                comments: false,
                // Compression specific options
                compress: {
                  warnings: false,
                  // Drop `console` statements
                  drop_console: DEBUG
                }
              }
            })
          ]
      }
      ,
      externals: {
        // "react": "React",
        // "react-dom": "ReactDOM"
    }
    }
  ;
  
  // DEV ONLY Configuration
  // Add a bundle analyser viewer
  if (ANALYSER) {
    config.plugins.push(new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    }));
  }
  
  if (!DEBUG) {
    console.log("Obfuscating ...");
    config.plugins.push(new JavaScriptObfuscator({
      rotateUnicodeArray: true
    }));
  }
  
  module.exports = config;
  </code></pre>