React SVG imports broken and no CSS output file in 2.7.5 with webpack bundler

[jamesg1]

Used with node v12.16.1 and yarn 1.22.4

npx create-snowpack-app ts-app --template @snowpack/app-template-react-typescript --use-yarn

Configured webpack: snowpack.config.js

module.exports = {
  extends: '@snowpack/app-scripts-react',
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          // config.plugins.push(/* ... */);
          return config;
        },
      },
    ],
  ],
};

On yarn build I get:

./_dist_/App.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/user/Github/ts-app/build/_dist_/App.js: Unexpected token (2:12)

  1 | import React from '../web_modules/react.js';
> 2 | import logo .svg;
    |             ^
  3 | import './App.css.proxy.js';
  4 |
  5 | function App({}) {
    at Parser._raise (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:762:17)
    at Parser.raiseWithData (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:755:17)
    at Parser.raise (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:749:17)
    at Parser.unexpected (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:8913:16)
    at Parser.expectContextual (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:8879:41)
    at Parser.parseImport (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:12681:12)
    at Parser.parseStatementContent (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:11382:27)
    at Parser.parseStatement (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:11284:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:11864:25)
    at Parser.parseBlockBody (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:11850:10)
    at Parser.parseTopLevel (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:11215:10)
    at Parser.parse (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:12922:10)
    at parse (/Users/user/Github/ts-app/node_modules/@babel/parser/lib/index.js:12975:38)
    at parser (/Users/user/Github/ts-app/node_modules/@babel/core/lib/parser/index.js:54:34)
    at parser.next (<anonymous>)
    at normalizeFile (/Users/user/Github/ts-app/node_modules/@babel/core/lib/transformation/normalize-file.js:93:38)
 @ ./_dist_/index.js 25:0-27 27:107-110
 5 assets

▶ Build Complete!

Commenting out that logo and including some css in src folder I don't see it outputted to the build/css folder. The webpack config is using the extract css plugin and a generic rule.

When I setup a week ago with "@snowpack/app-scripts-react": "^1.6.0-alpha.0", "@snowpack/plugin-webpack": "1.6.0-alpha.0" and "snowpack": "^2.6.4", everything will work

                              __snowpack__/env.js   56 bytes          [emitted]
  assets/logo-d264c5adf9650c78ea3f951b10fb965a.svg   2.27 KiB          [emitted]
                css/index.d9dd3937e52fe61a6d21.css  734 bytes       0  [emitted] [immutable]  index
                  js/index.0f94707be7d9c9d6cc71.js    149 KiB       0  [emitted] [immutable]  index
      js/index.0f94707be7d9c9d6cc71.js.LICENSE.txt   51 bytes          [emitted]

▶ Build Complete!

Thanks

[FredKSchott]

This issue should be fixed in the latest plugin version, and was caused by a bad import rewrite of non-JS imports into something like "import logo .svg;"

[jamesg1]

Thanks! Is there build/ci tests to cover these starter templates before a release is merged/tagged?

[FredKSchott]

Yup!